IE vs. FF Bullet layout issue

[SystemLogic]

Here's a screenshot of the issues I'm seeing between IE and FF (looks correct in FF):



So there are two issues:

1) The bullets are not lining up correctly in IE, but they are in FF.
2) There should be no bullet on the "more services" link, which there isn't in FF but there is in IE.

Here's the CSS:

#what {
    width: 245px;
    height: 225px;
    background-color: #ededed;
    border: 2px solid #d3d3d3;
    float: right;
}

#what ul {
    list-style: disc url('../i/arrowbullet.gif') inside;
    margin: 0;
    margin-top: 2px;
    padding: 0 10px 0 10px;;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: .8em;
}

#what li {
    padding: 2px;
    padding-left: 8px;
    border: 1px solid #d3d3d3;
}

#what .b {                       /* Alternate rows */
    background-color: #FFF;
    border-top: 0px;
    border-bottom: 0px;
}

#what a {
    font-weight: bold;
    margin-right: 8px;
    color: #058ee4;
    text-decoration: none;
}

#what a:hover {
    font-weight: bold;
    margin-right: 8px;
    color: #058ee4;
    text-decoration: underline;
    background-color: #FFF;
}

Here's the HTML:

    <div id="what">
        <h2>What we do.</h2>
        <ul>
            <li>pc/laptop repair</li>
            <li class="b">hardware/software upgrades</li>
            <li>virus/adware removal</li>
            <li class="b">network design &amp; installation</li>
            <li>wireless installation</li>
            <li class="b">new pc setup</li>
            <li>web design/hosting</li>
            <li class="b">data backup/recovery</li>
            <li>maintenance agreements</li>
            <li class="b">formatting services</li>
            <li style="text-align: right; border: 0px; border-top: 1px solid #d3d3d3; list-style: none;"><a href="services">more services &gt;&gt;</a></li>
        </ul>
    </div>

[marbly]

bullets in lists are a quirky thing - unreliable browser behavior, its not used very often because of that, especially when using images

common solution is to use background images with some padding to simulate bulleted lists appearance (so image-bullet would appear where intended)

try this:

#what ul {
	list-style:none;
    margin: 0;
    margin-top: 2px;
    padding: 0 10px 0 10px;;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: .8em;
}

#what li {
    background: transparent url('../i/arrowbullet.gif') no-repeat 2px 50%;
    padding: 2px;
    padding-left: 20px;
    border: 1px solid #d3d3d3;
}
#what .more {
	text-align: right; 
	border: 0px; 
	border-top: 1px solid #d3d3d3; 
	background-image:none;
	}

    <div id="what">
        <h2>What we do.</h2>
        <ul>
            <li>pc/laptop repair</li>
            <li class="b">hardware/software upgrades</li>
            <li>virus/adware removal</li>
            <li class="b">network design &amp; installation</li>
            <li>wireless installation</li>
            <li class="b">new pc setup</li>
            <li>web design/hosting</li>
            <li class="b">data backup/recovery</li>
            <li>maintenance agreements</li>
            <li class="b">formatting services</li>
            <li class="more"><a href="services">more services &gt;&gt;</a></li>
        </ul>
    </div>

***sorry didnt notice the header

[SystemLogic]

bullets in lists are a quirky thing - unreliable browser behavior, its not used very often because of that, especially when using images

common solution is to use background images with some padding to simulate bulleted lists appearance (so image-bullet would appear where intended)

try this:

#what ul {
    list-style:none;
    margin: 0;
    margin-top: 2px;
    padding: 0 10px 0 10px;;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: .8em;
}
 
#what li {
    background: transparent url('../i/arrowbullet.gif') no-repeat 2px 50%;
    padding: 2px;
    padding-left: 20px;
    border: 1px solid #d3d3d3;
}
#what .more {
    text-align: right; 
    border: 0px; 
    border-top: 1px solid #d3d3d3; 
    background-image:none;
    }

    <div id="what">
        <h2>What we do.</h2>
        <ul>
            <li>pc/laptop repair</li>
            <li class="b">hardware/software upgrades</li>
            <li>virus/adware removal</li>
            <li class="b">network design &amp; installation</li>
            <li>wireless installation</li>
            <li class="b">new pc setup</li>
            <li>web design/hosting</li>
            <li class="b">data backup/recovery</li>
            <li>maintenance agreements</li>
            <li class="b">formatting services</li>
            <li class="more"><a href="services">more services &gt;&gt;</a></li>
        </ul>
    </div>

***sorry didnt notice the header

Ok that seems to work out ok....so if I wanted the bullet to be in a different place (for example padded left 20px), would I then need to actually change the image to have 20px of transparent space? Because right now it's not lined up correctly...

[marbly]

no, dont change the image, you can position it using css

look in the rules for #what li:

background: transparent url('../i/arrowbullet.gif') no-repeat 2px 50%;

-the 2px from above move the bg image 2px in horizontal direction
-the 50% centers the bg image vertically

if you need to push the image to the right horizontally just change 2px into something greater, i think in your case it will be 7px or 8px

background: transparent url('../i/arrowbullet.gif') no-repeat 7px 50%;

so in the end youd have

#what li {
    background: transparent url('../i/arrowbullet.gif') no-repeat 7px 50%;
    padding: 2px;
    padding-left: 20px;
    border: 1px solid #d3d3d3;
}

this will only move the bg image to the right, but it wont move text. If you also need to adjust the text change left-padding in #what li

padding-left: 30px;

[SystemLogic]

no, dont change the image, you can position it using css

look in the rules for #what li:

background: transparent url('../i/arrowbullet.gif') no-repeat 2px 50%;

-the 2px from above move the bg image 2px in horizontal direction
-the 50% centers the bg image vertically

if you need to push the image to the right horizontally just change 2px into something greater, i think in your case it will be 7px or 8px

background: transparent url('../i/arrowbullet.gif') no-repeat 7px 50%;

so in the end youd have

#what li {
    background: transparent url('../i/arrowbullet.gif') no-repeat 7px 50%;
    padding: 2px;
    padding-left: 20px;
    border: 1px solid #d3d3d3;
}

this will only move the bg image to the right, but it wont move text. If you also need to adjust the text change left-padding in #what li

padding-left: 30px;

Great, that worked perfect, thanks! Now I have just one more issue on the site which I'll post a new thread about shortly and I think everything should be good