DIV Problem

[dbrimlow]

This always happens.

 

BUT, it is best for the person who started the thread. It shows that the issue is not a simple one and has deep layers.

 

And, if the solution they go with starts to blow up once adding other data and page content, they don't get as frustrated because they know it is most likely a float issue.

 

Since you're not a newbie at html, it shouldn't be as daunting as it could be beginners.

 

You will eventually run into float clearing trouble if you don't use a fix.

 

Good luck.

 

Dave

[bronzemonkey]

Floats and positioning (two things that are heavily used in css-based layouts) seem to be the root of many people's difficulties. It is really worth anyone's time to read something like Eric Meyer's CSS Definitive Guide (the only css book I've ever read) to understand what is going on and how to make these things work for you.

 

Absolutely! I constantly (almost daily) have situations (usually a bordered box with an image and  text floated to its left) where before entering the clearfix, IE6/WinXP will clear the floats while FF doesn't. It is the one situation where it seems as if IE6 got something right that FF didn't.

 

Can you post a code example? Is the image and text within the box? At the moment, it sounds more like FF is behaving correctly by allowing the floats to poke out the bottom of the box while the IE hasLayout property is causing non-standard behaviour by self-clearing a container.

 

But the main problem with the state of css and browsers today is that it is NOT an exact science. Each browser interprets the CSS2 Specs differently (some closer to others).

 

This is true, but I only experience differences between modern browsers and IE. Some of my colleagues show me differences that they have found between FF and Opera, or Safari and FF, but it is always down to a less than ideal solution to a layout. The differences exist but they can be avoided.

 

The biggest differences, that I come across, are between different OS. Not because FF2 or FF3 on Windows/Mac/Linux have different interpretations of the specs, but because something like Ubuntu will often render fonts differently or use alternative fonts to Arial / Times / Georgia. So sometimes a bit of care is required to make sure things don't "break" in Ubuntu et al.

[dbrimlow]

I never noticed the full extent of the float clearing problem until I saw my sites on FF in Ubuntu.

 

I had always checked my betas in:

WinXP/IE5.5, IE6, FF, Opera,

Mac/Safari, IE5.03

SuSeLinux/FF, Sea Monkey

 

But once I saw what Ubuntu did to my main site's homepage I realized that I was ignoring a fundamental of floats because I had previously not seen the problem in all the browser/platforms above.

 

bronzemonkey elects to not use the :first-child pseudo element in the IE7 haslayout fix because he hasn't "seen" a need for it. But I learned my lesson thanks to Ubuntu. If the prevailing wisdom says it should be ... I will believe them before I believe my lyin' eyes.

 

By the way ... finally being able to completely ignore IE/Mac and IE5.5/Win is one of the most satisfying events in my 12 year career!

 

But this shows me that IE6 will hang on for a good 5 more years at least.

[bronzemonkey]

But once I saw what Ubuntu did to my main site's homepage I realized that I was ignoring a fundamental of floats because I had previously not seen the problem in all the browser/platforms above.

 

There is no difference in css implementation in FF/Win and FF/Linux. Differences I come across are down to OS font-rendering or selection.

 

bronzemonkey elects to not use the :first-child pseudo element in the IE7 haslayout fix because he hasn't "seen" a need for it. But I learned my lesson thanks to Ubuntu. If the prevailing wisdom says it should be...I will believe them before I believe my lyin' eyes.

 

It's not that I haven't "seen" a need for it, it is that there is no logical reason to do so. You don't even need to target IE7 because declaring a min-height has no consequence for modern browsers. Besides, I put all my IE code into IE specific stylesheets rather than use any form of selector hack.

 

If you know how browsers behave and the concepts behind the browser-differences then there are often several ways to solve the same problem.

[dbrimlow]

There is no difference in css implementation in FF/Win and FF/Linux.

 

Sorry, bro, but FF in Ubuntu was a whole different thing from FF Win/SuSe/Mac. It unequivocally handled floats and width percentage vs. font-size relativity differently than the others.

 

I had to uninstall it on that server because we needed a back-up exchange server in an emergency, but I am getting a new server to install it on and will upload screenshots ... the whole IT team of our office was amazed since we've used SuSe and RedHat for years with no appreciable difference from FF win and didn't think an OS could implement a browser any differently.

 

Besides, I put all my IE code into IE specific stylesheets rather than use any form of selector hack.

 

A practice everyone should do. Particularly with what we now know about the proposed IE8.

 

It's not that I haven't "seen" a need for it, it is that there is no logical reason to do so. You don't even need to target IE7 because declaring a min-height has no consequence for modern browsers.

 

Actually, think about it for a minute, N. (This is one of the few things that I took time to understand the whys and hows) The reason is because while IE7 fixed the 1% bug , AND properly ignores the * html selector, it still does NOT recognize the :after pseudo element.

 

So UNLIKE modern browsers, which use the clearfix method centered around the :after to auto-clear our floats, IE7 will NOT auto-clear based on the :after.

 

Apparently setting a min-height on the container in IE7 expands the container the way setting height in IE6 does. The :first-child + html is necessary for targeting only IE7. So in my IE only css file I can use them both ...

 

hmmm, unless this is what you mean by you don't have to "target it" which you would if it was in the general css. Is it because it is in the IEonly css that simply applying * + html {min-height:1px} works?