CSS Looks Good in IE7 and FF, Not so in IE6

Do not have IE6 installed... Can someone help?

[Eric_Lander]

My site uses CSS to position the right hand menu, and it loads up fine in IE7 and FireFox... But not in IE6. Since I don't have IE6 installed (tried to reinstall it per the instructions on WebmasterWorld -- but could not) -- I'm hoping someone can help.

A visitor of my site was gracious enough to send me a screenshot that shows the issue -- but I cannot accurately test any changes.

Thanks!

[edited by: SuzyUK at 3:49 am (utc) on Jan. 4, 2007]

[SuzyUK]

Hi Eric

I edited your post slightly as the versions were confused (there is no IE8?) let me know if it's not accurate.

We cannot have links to sites even profile ones - they get fixed and no-one knows what we're chatting about anymore! So anyway I pinched the relevant bits of CSS to post here

.main {
background-color: #FFFFFF;
width: 920px;
margin-right: auto;
margin-left: auto;
margin-top: 0px;
margin-bottom: 0px;
overflow: hidden;
padding: 0px;
}
.content {
text-align: left;
width: 650px;
padding-top: 20px;
padding-right: 15px;
padding-left: 20px;
float: left;
line-height: 16px;
background: #cfc;
}

.post {
text-align: justify;
width: 650px;
padding-top: 20px;
padding-right: 35px;
padding-left: 20px;
background: #abc;
float: left;
}

.side1 {
float: right;
width: 190px;
}

.side1 ul ul li {
padding: 0;
background-position: 17px;
height: 21px;
text-indent: 10px;
width: 190px;
border-right: 1px solid #115A1E;
}
.side1 ul ul li a {
display: block;
margin: 0px;
padding: 4px 0px 0px;
width: 190px;
font-family: Verdana;
font-size: 11px;
font-weight: normal;
color: #115A1E;
text-decoration: none;
border-right: 1px solid #115A1E;
}

pseudo HTML

<div class="main">
<div class="content">
<div class="post">
...
</div></div>

<div class="side1">..</div>
</div>

the above is not it all, but is enough to show why IE (versions lt7) will fail.

IE versions less that 7 will incorrectly stretch boxes that are not big enough to contain their child elements both horizontally and vertically, your code is causing this to happen on both sides so there is no room for the sidebar to sit beside the content and it is dropping below.

First the sidebar should be 190px wide, but then inside it there are at least 2 elements forcing it to 191px actual element width = width + padding + border

but mainly the composition of the content and post divs are causing the biggest stretch.
the outer div, the content div should be 685px wide = 650+15+20
this div if overflowed by a wider child should not stretch it should overflow (add background colors to both post and content to see it happen properly in IE7 and FF) but IE less than seven will stretch it

the content div contains the post div which is 705px wide = 650+20+35 so this stretches the content div to 705px which still has it's padding too = 705+15+20 = 740

and in IE6 and below it's trying to fit 740 + 191 = 931 into the main div of 920px and it doesn't go! the other browsers are overflowing the left/right containers (encroaching on the padded area between the two columns) which is why they're fitting.

Your design is such that pixel perfection does not matter which is good you just have to make sure the two main columns .content and .side1 have a bit of leeway between each other to allow for 1px borders etc.. but find some other way of padding that left content, or rework the maths

HTH
Suzy

[edited by: SuzyUK at 4:27 am (utc) on Jan. 4, 2007]

[Eric_Lander]

Thanks so much Suzy, I really appreciate your help with this matter. I've got it all fixed up -- and the lesson I really needed to learn was that margins alter the space outside of an element, whereas padding alters the space inside.

Once I had that down, it was just a matter of changing the numbers.

Thanks again!

[alfaguru]

As for installing IE 6, have you tried Tredosoft's multiple IEs? (search for "Tredosoft multiple ies"). It gives you a whole bunch of old IE versions to play with (though some of the really aged ones don't work on my PC).