My list is not aligning correctly in IE - help:

http://www.outer-edge.com.au/develop...e/gearbox.html

-- HTML --

<div id="gearbox">
<div id="gearbox_content">

<ul>
<li>4WD</li>
<li>mountain biking</li>
<li>fishing</li>
<li>family camping</li>
<li>overnight</li>
</ul>

</div>
</div>

-- Styles --

#gearbox li {
list-style-image: url(images/arrow.gif);
list-style-position: outside;
font-weight: bold;
font-size: 18px;
}

#gearbox {
background: url(images/white_bg_top.jpg);
background-repeat: no-repeat;
background-color: #FFFFFF;
height: auto;
width: 800px;
padding-top: 100px;
}

#gearbox_content {
height: auto;
font-size: 12px;
padding-left: 90px;
padding-right: 40px;
padding-bottom: 20px;
background-color: #FFFFFF;
text-align: justify;
}

Try:

#gearbox ul {
margin-left: 0
padding-left: 0
}

That should get the list aligned the same in both Firefox and IE. You'll probably need to add back a little to either the margin or the padding (one or the other, but not both) to have things align where you want.

I've tried that, and then Firefox is out too far to the left, but IE is closer to the right spot but still not accurate.

i need the list bullets to line up to the arrow from the page heading img.

any ideas?

Are you trying to align the small arrow with the big arrow? If so, add some left margin to the list element.

#gearbox li {
    list-style-image: url(images/arrow.gif);
    list-style-position: outside;
    font-weight: bold;
    font-size: 18px;
    margin-left:20px;
}

Not sure if that's what you wanted to do or not.

geez how obvious was that.

thanks heaps!

Because of the differences in the way the browsers handle list bullets (well MOSTLY IE), it would probably be easier to set your orange arrow as BACKGROUND on the <li> or <a>, then you can use padding to push the text over. Just set the background to no-repeat and it'll stay over to the left.