Div problem with Firefox vs IE

[Spheerke]

Does someone know why this site: http://www.strandredders.be/indextmp.php

look different using IE or Firefox? And for once, the Firefox look is messed up while IE does the right thing?

I've modified the layout template so the footer div is outside the page div. Also, i modified the layout stylesheet so the footer class shows up like this.

Strange... I've tried many things to fix it, nothing helps. Then i opened up IE and saw this was like it should be 

And apart from this, can anyone tell me how to edit the CSSMenu? I'd like to edit some properties of it, because now i can change the colors etc, but the links it takes are used from the general links properties (color & decoration etc). I'd like to modify those.

Thx already

[westis]

Hi Spheerke,

The content div is adding some margin if not set. Set this to div#content:

Code: Select all

margin-bottom: 0;

Out of curiosity, why did you move the footer outside the page anyway?

[Spheerke]

the footer has feathered edges, and if the footer is inside the page, the borders continue untill the bottom (overlapping the normally feathered edges of the footer). If you know what i mean? So the footer has rounded edges but the page has a square structure, so it would kinda mess it up.

I also tried some table design but as table design is referred to as "bad" i refuse to try that way This is my first decent css project and i would like to make something nice of it.

thx for the margin. Works now.

I've put the footer back into the page so you can see the effect.

/edit: ok so i've edited the margin for the footer to -12px and now it is in place. At least, in Firefox, now it's messed up in IE. Aargh so many hours, just for a footer 

[westis]

Ok, I see. You could also wrap it in another container (that contains the div with the borders and another one for the footer), so that if you want to change the page width you will only have to change in one place and not for the footer as well. But of course your solution works just as fine.

[Spheerke]

Ok another problem:

I've put 2 images in div's and put them next to each other (the second img should become a flash intro). Apparently they still think the second image is on a second line, because they take up all the white space there (http://www.strandredders.be/indextmp.php). I've used the relative position argument and used top: -260px;

Any ideas? (god i'm a noob on this)

But really, i've seen quite some cms's and this one looks the most promising (as in simple) to make a nice design with.

[westis]

You need to use float to put to divs on the same line.

Compare this with the CSS that you're currently using and you get the idea:

Code: Select all

    /* INTRO-IMAGE */
        div#intro-image {
            margin: 0;
            padding: 0;
            width: 320px;
            height: 260px;
            background: url(images/intro-image.jpg) no-repeat 0 0px;            
            float: left;
        }

    /* END INTRO-IMAGE */

    /* INTRO-FLASH*/
        div#intro-flash {
            margin: 0;
            padding: 0;
            width: 460px;
            height: 260px;
            background: url(images/intro-image2.jpg) no-repeat 0 0px;            
            float: left;
        }

A good tutorial about float can be found here.

[Spheerke]

nice tutorial. Thx! Got it. 

[Spheerke]

Hmm, just noticed that this again collides with IE 's view of the site. Is there a problem with IE and floats?

[Spheerke]

So i solved the differences by applying some tricks. IE and firefox look the same now.

I had to:

• Put the footer outside the page div to make it appear as wanted
• Put the 2 float images in the center together in one image as IE puts the floats on 2 different lines.

[Spheerke]

Ok, here i am again:

what is the problem with IE clearing 2 float's on the same line?

This page: http://www.strandredders.be/indextmp.ph ... n_Koksijde works as it should, putting more than one float on the same line, while IE always forces a clear and puts it on the new line.

I've put clear: none explicitely in the left-image div but no help. Furthermore, the images are placeholders, i know they don't work And the margins, well they tend to differ also between FF and IE.

Any ideas?

[westis]

Hi there,

You have the boxes to the right wrapped in a div with the id main. div#main has width set to 100%, which I think may be what is causing IE to believe that it has to take up the entire width and therefore needs to be under the left-floated element.

The other thing to try is to set float: left for the div#main selector, as it is the entire main div that you want to be in the right column.

About float margins in IE and FF, yes, there is a bug in IE that causes an additional margin when two floats are put beside each other. Look in this article for the reasons and solutions to that: http://positioniseverything.net/explore ... xtest.html

The following article may also contain some useful info: http://nemesis1.f2o.org/aarchive?id=11

[Spheerke]

Ok, apparently the width was set wrong for IE to parse it as it should. The link about the float wrapping and dropping was very helpful! You're like a living database, aren't you westis  Thx. (though i suppose you just know where to look )

[westis]

You're like a living database, aren't you westis Thx. (though i suppose you just know where to look )

Hehe, I knew about the three pixel gap since before and Google is your friend in cases like these. I wish I could save all that info in my personal database, but unfortunately there ain't enough memory left and the HDD is in desperate need of defragmentarization...

I am in the process of putting together a list of useful links for CSS issues, as I think a lot of people would find that helpful. But I'll still be in Christmas mode for another few days, so I only drop in here occasionally until then.