LI margins in IE

liunx

Guest
hey everyone, if you check out <!-- w --><a class="postlink" href="http://www.alabu.com/ibc/">www.alabu.com/ibc/</a><!-- w --> everything shows up fine in mozilla. But in IE there is rediculous margins on each of the LI's on the left hand side, i cant figure out what it is. Anyone have any ideas? the css file is at <!-- w --><a class="postlink" href="http://www.alabu.com/ibc/css/ibc_main.css">www.alabu.com/ibc/css/ibc_main.css</a><!-- w --> thanks!"Everything that is is the case." (Also Wittgenstein, if I remember correctly. My copy of Tractatus Logico-Philosophicus seems to have gone missing again.)

And in this case it is the case that some browsers indent list items with margins, some with padding. To achieve certainty, set both to 0.i think i have them both set to 0 (unless i missed it somewhere) :-/It should be set in the <ul> tag, I think.

I haven't touched web development in a while :( Damn java!thanks for your replies guys... umm i already have

.leftcolumn ul {
list-style: none;
margin: 0;
padding: 0;
}

is there something else i need to be doing?
thanks!

~HalTry this:

.leftcolumn ul {
list-style: none;
margin: 0;
padding: 0;
}
.leftcolumn li {
list-style: none;
margin: 0;
padding: 0;
}that didnt work either... this is the code i have for .leftcolumn i got this CSS setup from a template i'm not sure why there are so many .leftcolumns, but this is what i have.

.leftcolumn
{
float: left;
left: 0px;
width: 125px;
margin: 0px;
margin-top: -11px;
padding: 0px;
color: #000000;
background-color: #EEEEEE;
border-right: 1px solid #cccccc;
border-bottom: 1px solid #cccccc;
}

.leftcolumn ul a:link,
.leftcolumn ul a:visited {
border-bottom: 1px solid #EEEEEE;
background-color: #EEEEEE;
display: block;
border-top: 1px solid #cccccc;
padding: 2px 1px 1px 2px;
margin: 0px;
}
.leftcolumn ul {
list-style: none;
margin: 0;
padding: 0;
}
.leftcolumn li {
list-style: none;
margin: 0;
padding: 0;
}

/* hack to fix IE/Win's broken rendering of block-level anchors in lists */
.leftcolumn li a{
border-bottom: 1px solid #EEEEEE;
background-color: #EEEEEE;
padding: 2px 1px 1px 2px;
margin: 0;
}

.leftcolumn li a:hover{
border-bottom: 1px solid #EEEEEE;
background-color: #8CA6C6;
display: block;
border-top: 1px solid #cccccc;
margin: 0px;
padding: 2px 1px 1px 2px;
}

/* fix for browsers that don't need the hack */
html>body .leftcolumn li {
border-bottom: none;
background-color: #EEEEEE;
margin: 0;
padding: 0;
}


.leftcolumn
{
/*/*/
margin-top: 0px;
padding: 0;
/* */
}
 
Back
Top