Weird spacing issues - IE8 works great, IE6 and IE7 bite

Question

Checkout http://new.reyniersaudio.com/index.php?task=browse&view=model&modelId=17 and if you notice on IE8, Firefox, Chrome and Opera, the right sidebar shows proper spacing. In IE6 and IE7 it's way too spaced out. What do I have in my css that makes that happen.

Answer 1

Not the answer, but give this a try in your IE 6 and/or 7. http://www.microsoft.com/downloadS/details.aspx?familyid=E59C3964-672D-4511-BB3E-2D5E1DB91038&displaylang=en

It might be able to help you diagnose the problem. I'm guessing those versions of IE are not picking up your changes to the margin/padding ("H6" and "#cartComputer H6" styles in "table.css" and "cartSideBar.css".)

And Quirksmode is a good resource for this type of problem if debugging is a pain.

Answer 2

I'm not sure if this will help, but make sure all your open html tags have a closing tag.

Answer 3

I don't have IE6 on any of my computers anymore (thank god), but one thing to try is:

Remove all whitespace (spaces, tabs, newlines) between elements around your problem area. IE6 (and IE7 I believe) loves to take that whitespace---that should be fine to have in there---and blow the layout all to hell with it.

<div>I should be fine, but I'm not in IE</div>
<div>I should be fine, but I'm not in IE</div>

The "fixed" IE6 version:

<div>I am now fine in IE</div><div>I am now fine in IE</div>

Answer 4

I used the Internet Explorer Developer Toolbar in IE 6 to determine that the spacing issue started on the <li class="subType subType##" surrounding each part (inside <ul class="partType partType##">).

When I used the Developer Toolbar to change the style to be display: inline the extra vertical spacing went away in IE 6.

I modified cartSideBar.css and redefined:

#cartComputer LI {
    PADDING-RIGHT: 0px;
    PADDING-LEFT: 0px;
    PADDING-BOTTOM: 0px;
    MARGIN: 0px;
    PADDING-TOP: 0px;
    LIST-STYLE-TYPE: none;
}

as:

#cartComputer LI {
    PADDING-RIGHT: 0px;
    PADDING-LEFT: 0px;
    PADDING-BOTTOM: 0px;
    MARGIN: 0px;
    PADDING-TOP: 0px;
    LIST-STYLE-TYPE: none;
    DISPLAY: inline;
}

I tested the result in IE 6, 7 & 8, Firefox 2, 3 & 3.5, Opera 9.6 & 10, Safari for Windows 3 & 4 and Google Chrome. It seemed to be okay in all of them. You'll want to perform more in-depth testing to make sure it doesn't negatively affect other layout.

You may want to isolate the change to just the subType class just to make sure it doesn't affect other li elements under #cartComputer:

#cartComputer LI.subType {
    display: inline;
}

Answer 5

brianreavis is on the right track. This is most likely a "hasLayout" issue, one you'll run into constantly in IE6. This is great resource on the bug: http://www.satzansatz.de/cssd/onhavinglayout.html

If you can't or don't want to put all your code on one line, there are several possible CSS fixes. My current favorite is to add zoom. Add it to your CSS here...

#cartComputer li {
list-style-image:none;
list-style-position:outside;
list-style-type:none;
margin:0;
padding:0;
zoom: 1;
}