IE CSS list formatting help

[hatbocs]

I need some help with getting IE to display my lists right.

Here's the code I have for them:

Formatting

.postbody ul {
    margin: 8px;
    background-color: #444;
    list-style-position: inside;
    }
    
.postbody ul li {
    padding: 1px;
    margin: 0px;
    }
    
.postbody ol {
    margin: 8px;
    background-color: #444;
    list-style-position: inside;
    }
    
.postbody ol li {
    padding: 1px;
    margin: 0px;
    }

Text formatting

.postbody ul li {
    color: #fff;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    line-height: 1.5em;
    list-style: url(images/bullet.gif);
    }

.postbody ul li a {
    color: #faa92e;
    text-decoration: none;
    border-bottom: dotted #aaa 1px;
    }
    
.postbody ul li a:hover {
    color: #fff;
    text-decoration: none;
    border-bottom: dotted #faa92e 1px;
    }

.postbody ol li {
    color: #ccc;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    line-height: 1.5em;    
    }
    
.postbody ol li a {
    color: #faa92e;
    text-decoration: none;
    border-bottom: dotted #aaa 1px;
    }
    
.postbody ol li a:hover {
    color: #fff;
    text-decoration: none;
    border-bottom: dotted #faa92e 1px;
    }

Here is IE (bad):


Here is Firefox (good):

 

[altrock182182]

Try margin-left instead of list-style-position. IE is notorious for messing up code with lists. It may not be semantically correct, but hey, if it works!

.postbody ul {
    margin: 8px;
    background-color: #444;
    margin-left:1em;
    }
    
.postbody ul li {
    padding: 1px;
    margin: 0px;
    }
    
.postbody ol {
    margin: 8px;
    background-color: #444;
    margin-left:1em;
    }
    
.postbody ol li {
    padding: 1px;
    margin: 0px;
    }

 

[hatbocs]

That kind of helps. Turns out that it works better by changing the margin inside the li part.

.postbody ul li {
padding: 1px;
margin-left: 2em;
}

That puts it perfect in IE but now Firefox is 2em further to the right.

Should I just make a separate list (loaded with a conditional) for my lists or is there a hack I can do in my single stylesheet?

This is for a wordpress theme, too.

 

[altrock182182]

.postbody ul li {
padding: 1px;
margin:0px;
margin-left: 2em;
}

.postbody ul li {
padding: 1px;
margin:0px;
padding-left: 2em;
}

Try these. If not, I might think of something in the meantime, or you could try a seperate .css for ie (with the IF IE comment conditionals)

 

[hatbocs]

I did a little searching for css filters and found http://www.communis.co.uk/dithered/css_filters/css_only/index.html

So, it's probably not the prettiest method to use. But I prefer it over using the conditionals for IE.

/* IE Hack */
*html .postbody ul {
    margin: 8px;
    background-color: #444;
    }
    
*html .postbody ul li {
	padding: 1px;
	margin:0px;
	margin-left: 2em;
	}
    
*html .postbody ol {
    margin: 8px;
    background-color: #444;
    }
    
*html .postbody ol li {
    padding: 1px;
    margin: 0px;
	margin-left: 2em;
    }
/*End IE Hack*/
/*Normal*/
.postbody ul, [dummy="dummy"] {
	margin: 8px;
	background-color: #444;
	list-style-position: inside;
	}
	
.postbody ul li, [dummy="dummy"] {
	padding: 1px;
	margin: 0px;
	}
	
.postbody ol, [dummy="dummy"] {
	margin: 8px;
	background-color: #444;
	list-style-position: inside;
	}
	
.postbody ol li, [dummy="dummy"] {
	padding: 1px;
	margin: 0px;
	}
/*End Normal*/

Edit: The original normal part was blocking Opera too, didn't want that.

I don't know if it works with IE7 (I don't have it and would really prefer not to download it) but it seems to work the way I want it to.