I completed my site and thought I had done cross browser checks but my boss's computer ran Internet Explorer 6 and the layout was messed up on her computer.

http://bevgannonrestaurants.com/haliimaile/test.html

If you view the test page on Firefox, Safari or IE 7 you'll see that page as it should be. If you view it on IE 6, the primary image drops below the horizontal line of the nav menu. You'll note that I had to hack the rest of the site, making the images 6 px less wide. But it takes away from the snugness of the look.

Any ideas how to fix this so I can make all the images full width (529 px) without messing up the layout on IE6?

(I did research and found out about hasLayout, but I couldn't get that to fix anything.)
Attached image is a screenshot on IE6.

THANKS,
G

Gabe, without looking too in depth I'm still fairly certain the issue is in the way IE6 handles the box model. It's probably adding an extra few px somewhere causing the image not to fit where you want.

The best way to deal with the problem is to use conditional comments. You can use conditional comments to write some IE6 specific css where you reduce the width of one of your page elements while keeping everything as is for all other browsers and versions of IE.

IE HACKS

In a nutshell we use them to ensure objects are the same size and positioned the same in IE as they are in other "CSS complient" browsers. There probably are other reasons, but this is by and far the biggest difference between IE and other browsers.

Having said that I see many members posting the CSS they're using in here when asking for help with IE hacks that look like this:

div.classname {width:700px; border:2px solid Black; background:White; padding:4px; z-index:2;} html*div.classname {width:700px;}

This^^ will do nothing for you.

Browsers like Fire Fox and Navigator add borders and padding to the size of your objects; Internet Explorer doesn't. So what I'm saying is the above code will give you a div that is 712px wide in FF and 700px wide in IE.

If you want a div that is 700px wide in FF and IE you have to code it as such:

div.classname {width:688px; border:2px solid Black; background:White; padding:4px; z-index:2;} html*div.classname {width:700px;}

Since there is 2px worth of border + 4px worth of padding on each side of the div you have to add them and multiply by 2. Subtract this number from the width you want the div to be and that is the number you plug in for FF. So:

2px + 4px = 6px
6px x 2 = 12px
700px - 12px = 688px

All these same principles apply to the height of an abject. So if you define the height of an object there's even more math:

div.classname {width:188px; height:288px; border:2px solid Black; background:White; padding:4px; z-index:2;} html*div.classname {width:200px; height:300px;}

And if say your padding-top: or border-top: is different than the rest there's even more math:

div.classname {width:188px; height:290px; border:2px solid Black; border-top:0; background:White; padding:4px; z-index:2;} html*div.classname {width:200px; height:300px;}



And if that isn't all anoying enough, consider positioning. For some goofy reason, even though your div is only 688px [according to FF], if you have 2px worth of border and 4px of padding you have to add this to your positioning.

In other words FF considers your div 688px when it comes to sizing, but considers it 700px wide (after adding padding and borders) when it comes to positioning. So, if you want your div centered in FF you need to code it like this:

div.classname {width:188px; height:288px; position:absolute; top:200px; left:50%; margin-left:-350px; border:2px solid Black; background:White; padding:4px; z-index:2;}

But there is some good news. Because of this little fluke you don't need to "hack" the positioning for IE:

div.classname {width:188px; height:288px; position:absolute; top:200px; left:50%; margin-left:-350px; border:2px solid Black; background:White; padding:4px; z-index:2;} html*div.classname {width:200px; height:300px;}

So, the above^^ div will be 200px wide, 300px tall, 200px from the top, and perfectly centered in both IE and FF (and probably any other goofy little browser you may be using).


The other big difference is colors, but that could take up an entire website to explain. (In fact there are several websites dedicated to just that.) There are supposedly 256 websafe hexadecimal (ie: ffffff) colors that will work in any current version of any browser. The truth is there are probably only 214 after you consider every browser and OS.

The solution: use colors identified by name only, or use RGB (red, green, blue).

Examples:
body {background:Green;}
or
body {background:rgb (12, 00, 23);}



K, that's enough for now.

So how many of you still love FF?

Btw, that's not actually the RGB for green there^^ :P

FF gets it right, IE6 invariably gets it wrong because of it's broken box model and other numerous bugs.

What you're getting in IE 6 is float drop because the total widths are too wide for the container, so IE drops them to where there is ample space.

Hacks are not good, especially not inline. If you must hack, use conditional comments and put the 'hacks' in a separate css file.

Get rid of all the position: absolute and learn to use the normal document flow and floats. IE also has some nasty bugs with absolute positioning.

Thank you Vangogh, coolkbk585 and LadyNRed for your responses.

coolkbk585-- I appreciate the thorough explanation and understand conceptually what you explained about IE6 and FF. However I am confused about the line of code. In particular "html*div.classname" within the following line:

div.classname {width:688px; border:2px solid Black; background:White; padding:4px; z-index:2;} html*div.classname {width:700px;}

Does that somehow force IE to read only the 700 px width?

And to your comments LadyNRed, much appreciated, I would love to get away from positioning and go with the flow and float (and of course not revert to tables). Any good sample websites you love that do great layout (columns and such) without positioning nor tables?

Thanks,
G

You bet...
www.divorcemediationusa.com - 2 columns, floats, no tables, no positioning except for the relative on the container (which I almost always do).

z-index only works if you're using position:absolute or position:relative, and you may run afoul of IE's very bad z-index bug.

If you want to feed IE a different width, then use conditional comments and a separate CSS file that contains ONLY the CSS needed for IE.
http://msdn2.microsoft.com/en-us/library/ms537512.aspx

Just wanted to add a site that has some good css layout templates.
http://www.ssi-developer.net/main/templates/
This is NOT my site. But I do use these templates all the time. Hopefully they will help you to start laying things out without tables or absolute positioning.

gabemott - That line of code is just another way to "hack". I have never used it, it's just another way to do it. It shouldn't ever require that.