Css – Weird spacing issues – IE8 works great, IE6 and IE7 bite

cssinternet explorer

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.

Best Answer

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;
}
Related Topic