Strange spacing issues - IE8 works fine, IE6 and IE7 bite
Checkout http://new.reyniersaudio.com/index.php?task=browse&view=model&modelId=17 and if you notice that in IE8, Firefox, Chrome and Opera the right sidebar shows the correct spacing. In IE6 and IE7, it got too wild. What do I need in my css that does this.
source to share
I used the Internet Explorer developer toolbar in IE 6 to determine that the spacing issue started in <li class="subType subType##"
, surrounding each part (inside <ul class="partType partType##">
).
When I used the developer toolbar to change the style display: inline
, the extra vertical spacing went away in IE 6.
I changed cartSideBar.css and overridden:
#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 and 8, Firefox 2, 3 and 3.5, Opera 9.6 and 10, Safari for Windows 3 and 4, and Google Chrome. Everything seemed to be in order. You will want to do some deeper testing to make sure it doesn't negatively impact the other layout.
You can only highlight this change to the class subType
to make sure it doesn't affect other elements li
in #cartComputer
:
#cartComputer LI.subType {
display: inline;
}
source to share
I no longer have IE6 on any of my computers (thank goodness) but have to try:
Remove all spaces (spaces, tabs, newlines) between elements around your problem area. IE6 (and IE7 I think) loves to accept that whitespace - it should be nice to have 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>
IE6 version "fixed":
<div>I am now fine in IE</div><div>I am now fine in IE</div>
source to share
Not an answer, but try in IE 6 and / or 7. http://www.microsoft.com/downloadS/details.aspx?familyid=E59C3964-672D-4511-BB3E-2D5E1DB91038&displaylang=en
This can help you diagnose the problem. I am assuming that these IE versions do not pick up your changes to fields / paddings (styles "H6" and "#cartComputer H6" in "table.css" and "cartSideBar.css".)
And Quirksmode is a good resource for this type of problem if debugging is a pain.
source to share
brianreavis is on the right track. This is most likely a "hasLayout" issue that will keep you running in IE6. This is a great resource by mistake: 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 favorite is the addition of magnification. 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;
}
source to share