IE7 Layout issues - CSS Detective required

[leveretdreaming]

Hello

First of all I hope I am posting in the right area, please redirect me if not.

I'm fairly new to writing websites and I'm having some cross-browser issues: my listings website www.swingoutlondon.co.uk renders correctly in Firefox Chrome and Safari, but not on IE7 for Windows XP - The two floated columns don't sit next to each other, and the elements in the left-hand column ('Learn!') don't sit within their enclosing <li> elements.

The XHTML and CSS validated last time I checked, so I suspect this may be a bug in IE which I need to account for, but I can't fathom what's going wrong.

Any thoughts to get me started (and critique/abuse about the site itself) would be greatfully received.

Thanks

Leveret

[Paul O'B]

HI,

Welcome to Sitepoint

The main issue is that your columns are 3px too big and therefore won't fit side by side.

Reduce the width by 3px and then just shift one border on top of the other.

e.g.

#classes {
    width:418px;
    float: left;
    position:relative;
    left:3px;
} 
#socials{
    width:422px;
    margin-left:418px;
}

The other issue is "haslayout" (see faq) and can be fixed like this:

ul.daylist,ul.daylist li{min-height:0}
* html ul.daylist,* html ul.daylist li{height:1%;overflow:visible}

[leveretdreaming]

Very many thanks, that works like a charm.

I have used the first line of your haslayout fix, which fixes the issue on ie7 but I don't understand the second line - is that the fix for ie6? I have no doubt that it works, but could you please explain it (it is only through understanding that we actually learn):

Surely it goes without saying that ul.daylist is within the "html" element - likewise with the universal selector (*). Also, the "height:1&#37;;overflow:visible;" seems particularly arcane: what does it imply and what is it Actually doing? I can't quite get my head round it.

Finally, why does the first bug occur? I've been reading up on the IE box model bug, but that doesn't seem to account for it: apart from anything else, my doctype is XHTML strict... It almost sounds as though Firefox and chrome are incorrect in allowing the borders to overlap in my original code.

Many thanks again

Leveret

[Paul O'B]

Very many thanks, that works like a charm.

I have used the first line of your haslayout fix, which fixes the issue on ie7 but I don't understand the second line - is that the fix for ie6? I have no doubt that it works, but could you please explain it (it is only through understanding that we actually learn):

Surely it goes without saying that ul.daylist is within the "html" element - likewise with the universal selector (*). Also, the "height:1&#37;;overflow:visible;" seems particularly arcane: what does it imply and what is it Actually doing? I can't quite get my head round it.

Yes the second line is the haslayout fix for ie6 only.

The star selector hack is a rule that IE6 parses because it thinks that the html has a parent but html doesn't have a parent as we all know and the rule should fail (although it is a valid construct but it just matches nothing).

IE6 treats * html as though you had just said html and parses it without problem. It is a 100% safe hack as it passes values to only ie6 and under and no others browsers take note of it. (It's been the mainstay of us IE6 hackers for years

The height:1% is nothing more than a haslayout trigger as dimensions are haslayout triggers. It applies haslayout without affecting the element in any way because IE6 treats height as a minimum and will always expand an element if the content demands it. The overflow visible is a safety net in case you were using overflow:hidden to clear floats and then you would hide any content over 1% high (should the height be available from a parent with a height).

Instead of height:1% we could have used the proprietary zoom property to force haslayout instead but zoom does not validate although it is safe to use.

Finally, why does the first bug occur? I've been reading up on the IE box model bug, but that doesn't seem to account for it: apart from anything else, my doctype is XHTML strict... It almost sounds as though Firefox and chrome are incorrect in allowing the borders to overlap in my original code.

Many thanks again

Leveret

I can't remember what the result was in Firefox/Chrome but in those browsers when an element is too big for its container it simply overflows. If you tell an inner element to be 10px bigger than its parent they will still lace the element but the 10px overlap will just spill out of the container and be ignored.

IE6 on the other hand always tries to expand a container to accept its content. It will stretch the parent if it finds no room anywhere else or in the case of floats will drop them down to find more room.

The long and short of it is that in all browsers you must make sure that things fit or results will be unreliable or at least different. Usually doing things right results in things working better

[leveretdreaming]

Thankyou so much for explaining this all in such detail - I really appreciate you taking the time to help me learn how to code better CSS.

Have a good day!