Positioning differs in IE

[Bocaj]

The positioning for my Menu differs in IE, and i can't just seem to get it to be the same in both... i can improve it... but not make it exact... it's really bugging me.

Heres my css

Code: Select all

#topmenu {
    position: relative;
    height: 29px;
    width: 600px;
    padding: 15px;
    margin: -18px 0;
    overflow: hidden;
}
  
#topmenu ul {
    padding: 0px;
    margin: 0;
}

  
#topmenu ul li {
    float: left;
    list-style: none;
}

#topmenu ul li a {
    text-indent: -500em;
    z-index: 10;
    display: block;
    float: left;
    height: 30px;
    position: relative;
    overflow: hidden;
}

#home a {
    width: 54px;
    padding: 0px 15px 0px 15px;
    background: url('images/nav-links_03.png') no-repeat center !important;
    background: url('images/nav-links-ie_03.gif') no-repeat center;
}
  
#portfolio a {
    padding: 0px 15px 0px 15px;
    width: 84px;
    background: url('images/nav-links_05.png') no-repeat center !important;
    background: url('images/nav-links-ie_05.gif') no-repeat center;
}

#services a {
    padding: 0px 15px 0px 15px;
    width: 83px;
    background: url('images/nav-links_09.png') no-repeat center !important;
    background: url('images/nav-links-ie_09.gif') no-repeat center;
}

#about a {
    padding: 0px 15px 0px 15px;
    width: 57px;
    background: url('images/nav-links_07.png') no-repeat center !important;
    background: url('images/nav-links-ie_07.gif') no-repeat center;
}

#contact a {
    padding: 0px 15px 0px 15px;
    width: 76px;
    background: url('images/nav-links_11.png') no-repeat center !important;
    background: url('images/nav-links-ie_11.gif') no-repeat center;
}


#topmenu li.background {
    background: url('images/buttonmain_04.png') no-repeat top right !important;
    background: url('images/buttonmain_04.png') no-repeat top right;
    z-index: 8;
    position: absolute;
    visibility: hidden;
}

#topmenu .background .left {
    background: url('images/buttonmain_03.png') no-repeat top left !important;
    background: url('images/buttonmain_03.png') no-repeat top left;
    height: 24px;
    margin-right: 13px; 
}

Can anyone shed any light?

And i can't offer a live example atm sorry

[aso186]

The HTML to go with it would help

[Bocaj]

It's just an unordered list...

Code: Select all

 <div id="topmenu">
         <ul>
            <li class="current" id="home"><a href="#">Home</a></li>
            <li id="portfolio"><a href="#">Portfolio</a></li>
            <li id="services"><a href="#">Services</a></li>
            <li id="about"><a href="#">About</a></li>
            <li id="contact"><a href="#">Contact</a></li>
            <li class="background"><div class="left">&nbsp;</div></li>
        </ul>
    </div>

I'll try and get some screenshots...

It's about 13px higher in IE, if i lower it then it's too low in firefox.. i've tried to add extra padding in both the parent and the child anchors.... but to no avae... so i'm stumped...

[Bocaj]

i've managed to narrow it down to about a 3px difference =/

I think this is multiple contributing factors to the different placement in both browsers.

I removed the padding and the margin in #topmenu

Edit:

It's now down to about 1px with some adjustments to the div it was nested within.

[shalom_m]

This is the source of your problem:
http://www.456bereastreet.com/archiv...css_box_model/

http://www.ilovejackdaniels.com/css/box-model/



Either avoid it or use the fix

[spinal007]

I always use CSS hacks, but instead of w\idth, I use the * html selector hack.

[Bocaj]

Lol... umm k...

I will rethink this... i managed a quick fix using the <comment></comment> tags... obviously they don't validate though ¬.¬

Conditional commenting doesn't seem to work but the comment tags do... strange... one questions... does the IE tab in firefox differ from IE itself?

It uses the IE engine buuut does it have any alterations or inherit anything from the firefox application?

Thanks for the reading material... i've never really grasped how to sort these problems...

More help would be greatly appreciated