PDA

View Full Version : content dropping down in IE 6



ncriptide
02 Jan 2008, 09:50 AM
My flash and middle content is dropping down below my left side bar in IE 6. Looks okay on a Mac running Safari and Firefox, and looks okay in IE 7.

Could someone please take a look at the site: http://www.harvestchapelclt.org and give me an idea of what might be going on? Newbie at CSS so I'm sure I've done something stupid. . . thanks!

Wickham
02 Jan 2008, 11:48 AM
One method to cure IE6 is to delete the width in #main and let it use the remaining width in #wrapper which has width: 800px. Your #leftsidebar width: 200px plus 2*5px margins and float: left is effectively floating left in the margin-left: 215px of #main with 5px spare.
#main {
/*width:585px;*/
margin: 10px 0 0 215px;
padding: 0;
}

It will also work if you change the width to 577px leaving the margin-left of 215px (see explanation below).
----------------------
Another, probably more correct method, is to use two floated divs side by side.
#leftsidebar is already float: left.
#main {
width:575px; float:right;
margin: 10px 0 0 5px;/*was 10px 0 0 215px;*/
padding: 0;
}

will work in IE6. #wrapper is 800px, less #leftsidebar 200 + 2*5 margins (210px) leaves 590px for #main which should be your original 585px plus a margin-left of 5px but this didn't work in IE6 which only accepted 575px plus 5px with this method (577px with the other). It means either the #leftsidebar or #main are actually expanding beyond their specified widths by 10px because of one of the inner divs although I don't know which one. It might be something in the javascript which is adding padding or margin.

IE6 works in mysterious ways.