Firefox and 100% height problem

[monkey64]

Well I'm a newbie to CSS and I have an issue with using 100% height when viewed in Firefox.

IE renders the page as I wish, and the blue background holds all the yellow blocks. Firefox does something weird and the yellow boxes overlap the blue background. If I use a pixel measurement, everything works well. That's great, but I don't want to keep changing the px height of the page each time I add new content.

I uploaded it to my site: http://www.realbabyguide.co.uk/test.html

Any ideas? I'm tearing my hair out (what's left of it!).

Maybe I should have stuck with tables...

[moojoo]

If the yellow blocks are floated then in this case FF is handling the layout correctly and IE is handling it incorrectly. What you need is a "clearing" div or similar to keep the blue box below the yellow boxes despite amount of content.

.clearing {
height:0;
clear:both;
}

<div class="container">

<div class="block">Here is a test floated block</div>
<div class="block">Here is a test floated block</div>
<div class="block">Here is a test floated block</div>

<div class="block">Here is a test floated block</div>
<div class="block">Here is a test floated block</div>
<div class="block">Here is a test floated block</div>

<div class="clearing">&nbsp;</div>
</div><!--Close COntainer DIV -->

[spinal007]

This is the IE hack I use:

.Clear{width:100%;display:inline-block;clear:both!important}
.Clear:after{content:".";display:block;height:0;cl ear:both;visibility:hidden}
* html .Clear{height:1%}/* Only IE obeys this line */

I know it may be a bit longer than needed but I prefer to be sure....
Simply apply the class 'Clear' to a div so both IE and FF will display what's expected.

[moojoo]

Even just clear:both would work in most cases, the problem with the holly hack is IE 7 won't read it I don't think.

[ukgeoff]

Now here's an anarchic thought - IE is doing it right.

Why do I say that?

You need to have Firefox with the web deveopers toolbar to see what I'm getting at.

If you look at the page in Firefox and select Outline Current Element and position the cross-hairs appropriately, you will see that it shows the div as wrapped around the floated boxes.

That blue band at the top is the 80px bottom padding.

IE on the other hand wraps around the boxes, including the bottom margin of the second row and adds the 80px bottom padding after that.

Ergo - IE is doing exactly what you might reasonably expect and Firefox is making a fist of it!

Because everything inside the container div is floated, adding the clearing div still won't make it right.

[spinal007]

and so the fight goes on...

[Ryan Fait]

I usually do one of these:

Code: Select all

.clear {
    width: 100%;
    height: 1px;
    margin: 0 0 -1px 0;
    clear: both;
}

Seems less messy than yours, spinal. Unless I'm missing some advantage with the hack..?

[spinal007]

some browsers won't expand the box to show its content so if you say height:1px it literally means height:1px.

Internet explorer always expands the box to display its content, but the float bug (and some other) happen when a height hasn't been defined.

I'll go through it line by line...

This is the general idea, which we're all using...
.Clear{width:100%;display:inline-block;clear:both!important}
Unfortunatelly, it doesn't always work (as you'd expect).

This is for browsers that accept the :after selector. Just to make sure, it adds an element that will clear on both sides. I haven't needed this per se, but some geeks said some browsers do. don't argue with them...
.Clear:after{content:".";display:block;height:0;cl ear:both;visibility:hidden}

Finally, this line is only understood by IE. It's the safety net to work around the IE box-model bugs. Other browsers ignore it so its no harm...
* html .Clear{height:1%}/* Only IE obeys this line */

I compiled those 3 lines based on this information:
http://www.positioniseverything.net/explorer.html

Because of this:
http://www.webforumz.com/html-forum/...ird-ie-bug.htm
http://www.webforumz.com/css-forum/6...blem-in-ie.htm
http://www.webforumz.com/css-forum/2...ng-borders.htm

To sum up, with those 3 lines I am sure that the browsers will display things what I want, how I want and where I want them.
At least until Microsoft decide to screw it up!

[Ryan Fait]

I wish I had IE at hand to test on. I've never had problems before with that code, however. The height of it, 1px, is then offset by a -1px bottom margin so that one pixel is essentially non-existent.

When I do test in IE, I run through IE 5, 5.5, and 6.

I'm a little bit, okay, extremely confused by your last post. I looked at all those links, and I didn't see anything that suggested the code I posted wouldn't work flawlessly. If I could get you to elaborate some more, I'd like to understand your method.

[spinal007]

I wish I could elaborate... But I'm no expert!

I see your solution makes perfect sense... And it probably has the same effects.
The thing is, you only know for sure if it works when you come across a certain bug.

You may not have come across this Mozilla bug:
http://www.cs.hmc.edu/~mbrubeck/clear-after/

I had several bugs with floating elements in the last few months so I found every solution to the problems and compiled them into one.

What are your specs? Win/mac?

[masonbarge]

monkey - the Mozilla fanboys would claim Foxfire was doing it right if it turned your yellow squares into pictures of Hillary Clinton's bum.

This is one of the big pains using FF, you just have to set ".clear: clear: both;" in any stylesheet and be ready to use it. The FF trick I really love is when the containing div turns 1px high and pops up to the very top of the page. appears above the main containter.

IE6 has plenty of problems and theoretically a lot more individual instances of non=compliance with w3c, but as a practical matter IE is just as easy to code for.

The one big advantage writing css for FF is, IMO, an add-on called Aardvark.

[moojoo]

FF is much more lax on things than the others. Firefox will let you get away with css errors and such while Safari and others are more strict. This is both good and bad. but I will tell you just a simple .clear {height:0; clear:both;} put in the right spot will work wonders. I use it often and it works in everything.

[Ryan Fait]

I've used my clear class in many sites and have never had a problem with it. However, there are so many things that CSS depends on to render everything correctly, it may be that by chance other elements were placed in such a way that they got a layout to render correctly. To be frank, I am a firm believer that hacks are a means to cheat the proper use of CSS. In all my test sites and work projects, I haven't seen one situation where I couldn't come up with an alternative stylesheet to compensate for the differences in every major browser. Hacks may be easy, but it won't assure you that your site will look good when another browser release is available six months from now.

Er. Back to the topic monkey64 started, height is a rather ambiguous property when it comes to various browsers. There is no sure-fire way to get exactly the same results in every browser when it comes to percentages. Only using other CSS properties (specifically, clear), will you be able to work it out.

[spinal007]

well put ryan, agree with you 100%...
but these hacks aren't invalid CSS. I think they're simply 'tweaks' that don't actually serve any purpose to the layout other than making the browser understand it and render it properly...

there's no harm in that, specially if it reassuers you that you will get the desired output...
a bug that hasn't yet affected you could at any time because, as you said, there are so many factors involved.

[moojoo]

http://www.themaninblue.com/experiment/footerStickAlt/

[ukgeoff]

If you look at the code behind maninblue's pages and see thow many divs he uses and the way he has his divs laid out there's nothing very clever going on there at all. IMO

[moojoo]

It is all about the footer stick man, nothing more.

[masonbarge]

As you say, nothing clever about it, it's more what you'd call a "hard work" layout. Still it takes a good idea and a lot of pixel-pushing, and it looks great.