SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast
    Join Date
    Mar 2004
    Location
    Farmington
    Posts
    80
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    background-image position different in IE7 vs IE8

    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. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,475
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    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.

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

  3. #3
    SitePoint Enthusiast
    Join Date
    Mar 2004
    Location
    Farmington
    Posts
    80
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,475
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    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.
    Code:
    <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. #5
    SitePoint Enthusiast
    Join Date
    Mar 2004
    Location
    Farmington
    Posts
    80
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank You. That was the issue.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •