Background-image position different in IE7 vs IE8

HTML & CSS
1

I have the following CSS code and the position of the background-image defined in bulletLevel1 is different in IE7 vs IE8. In IE7, I see extra padding on the left side (around 40px). How to fix the CSS so that it looks the same in both ?

.maacmenu{
position: absolute;
display: none;
left: 0;
top: 0;
background: #333333;
border: 1px solid #D4EEFF;
border-width: 5px 3px;
padding: 10px;
font: normal 12px Verdana;
z-index: 100;
}

.maacmenu .column{
float: left;
width: 200px;
margin-right: 5px;
}

.maacmenu .column ul{
margin-top: 10px;
margin-bottom: 0px;
padding: 0;
list-style-type: none;
}

.maacmenu .column ul li{
padding-bottom: 5px;
}

.bulletLevel1 {
background-image: url(/images/menu-item-default.gif);
border: 0px;
padding-left: 10px;
padding-right: 0px;
background-repeat: no-repeat;
background-position: left 50%;
vertical-align: top;
margin-left: 6px;
}

My HTML code is as follows.

<div class=“maacmenu”>
<div class=“column”>
<ul>
<li><a href=“https://mysite.com” class=“bulletLevel1”>My Site</a></li>
</ul>
</div>
</div>

2

You haven’t addressed the default left margin that ie7 applies. Some browsers use left padding for the default bullet space and some use margin.


.maacmenu .column ul {
    margin-left:0;
}
3

Thanks a lot. It worked.

I noticed another issue on the same page. I have the following code which works fine in IE8 but not in IE7. In IE7, info.gif is rolling over into the next li element instead of appearing next to the menu-item-default.gif.

.bulletLevel3 {
background-image: url(/images/menu-item-default.gif);
border: 0px;
padding-left: 10px;
padding-right: 0px;
background-repeat: no-repeat;
background-position: left 50%;
vertical-align: top;
margin-left: 25px;
}

<li class=“bulletLevel3”>
<a href= ‘login.jsp’ target=‘_parent’ >Technical Training</a>
<span style=“float:left;”><img src=“/images/info.gif” title=“Technical Training info here”/></span>
</li>

4

Floats must come first in IE7 and under when next to inline content on the same line (note floats must always come first when next to block).

Move the span/image to the front of the line if that was your intention.


<li class="bulletLevel3"> <span style="float:left;"><img src="/images/info.gif" title="Technical Training info here"/></span> <a href= 'login.jsp' target='_parent' >Technical Training</a> </li>

If that’s not the issue I’d need to see the page to debug further.

5

Thank You. That was the issue.