Welcome to WebmasterWorld Guest from

Forum Moderators: not2easy

Message Too Old, No Replies

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

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

1:55 am on Jan 4, 2007 (gmt 0)

Preferred Member

10+ Year Member

joined:Mar 29, 2001
votes: 0

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.


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

4:25 am on Jan 4, 2007 (gmt 0)

Senior Member

WebmasterWorld Senior Member suzyuk is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Oct 1, 2002
votes: 0

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 class="side1">..</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


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

3:25 pm on Jan 4, 2007 (gmt 0)

Preferred Member

10+ Year Member

joined:Mar 29, 2001
votes: 0

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!

6:24 pm on Jan 4, 2007 (gmt 0)

Junior Member

5+ Year Member

joined:July 18, 2006
votes: 0

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).

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members