CODEWITHSUNDEEP
cssinternet-explorer
soundfreak82
soundfreak82

Reputation: 188

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

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.

Upvotes: 2

Views: 2212

Answers (5)

Brian Behrend
Brian Behrend

Reputation: 198

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

Upvotes: 0

Grant Wagner
Grant Wagner

Reputation: 25931

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

Upvotes: 2

brianreavis
brianreavis

Reputation: 11546

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>

Upvotes: 1

Elitmiar
Elitmiar

Reputation: 36839

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

Upvotes: 0

Glenn
Glenn

Reputation: 5342

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.

Upvotes: 0

Related Questions