Absolute positioned elements not showing in ie

**dreadster** · Sep 12, 2007 01:28

Hi People

I am working on a site that I have used absolute positioning on the #nav.

I have used this within an #outer-wrapper that is postioned relative to hold the nav in.

The problem Im having is that its fine in FF but in IE6 and IE7 its not showing at all???

Link to page: http://domain727620.sites.fasthosts.com/hcp%2Donline/

Link to css:
http://domain727620.sites.fasthosts....hcp_styles.css

Thanks in advance for any help.

**Paul O'B** · Sep 12, 2007 02:23

Hi,

This is an old bug and the problem is that IE doesn't like it when absolutely positioned elements are positioned from within static content and likes the absolute elements to be last in the context so that they will overlay correctly.

The easiest solution is to move the nav outside of the outer wrapper and give it a new wrapper like this.

Code:

#outer-wrapper,.navfix {
    width: 760px;
    margin: 0 auto;
    position: relative;
}

Code:

</head>
<body id="home">
<p class="hide" id="skip"><a href="#main-content">Skip to content</a></p>
<div class="navfix">
    <h4 class="hide">Main navigation</h4>
    <div id="nav">
        <ul>
            <li class="link-one"><a href="#">nav link 1</a></li>
            <li class="link-two"><a href="#">nav link 2</a></li>
            <li class="link-three"><a href="#">nav link 3</a></li>
            <li class="link-four"><a href="#">nav link 4</a></li>
            <li class="link-five"><a href="#">nav link 5</a></li>
            <li class="link-six"><a href="#">nav link 6</a></li>
        </ul>
    </div>
</div>
<div id="outer-wrapper">

Also note that your closing form tag is in the wrong place and must be moved to a correctly nested position.

**dreadster** · Sep 12, 2007 03:43

Thanks for that Paul, worked fine.

The hover on the nav in ie doesnt seem to be playing ball though like in FF, although the 'a' is display block ie rollovers arent working correctly - tried height 1% etc.

ps - I have validated the html but i usually wait as when the asp developer has fininshed the html is a mess anyway!

**Paul O'B** · Sep 12, 2007 04:17

Hi,

You need to manipulate the z-index to bring it on top.

e.g.

Code:

#outer-wrapper, .navfix {
    width: 760px;
    margin: 0 auto;
    position: relative;
    z-index:1;
}
.navfix{z-index:999}

I notice in your IE styles that you have included all the nav styles yet the only difference is the top position. Only put the differences in the IE file otherwise maintenance becomes a nightmare.

e.g.

Code:

#nav {top: 372px;}

Thats all you need in the IE file as all the other styles from the main stylesheet are correct. I dare say that you could probably get rid of that one as well if you went through the code and found out why there was a difference.

It looks like a margin copllapse is giving the difference and you could use the ie top position if you used this instead.

Code:

h1 {
    text-indent: -5000px;
    background: url(http://domain727620.sites.fasthosts.com/hcp&#37;2Donline/images/hcp-logo.gif) no-repeat 0 15px;    
    padding: 30px 0;
    margin: 0;
    margin-bottom: 10px;
    padding-top: 48px;
}

There's is still an odd pixel difference but it depends if you can live with it or instead live without the hack.

**dreadster** · Sep 12, 2007 04:39

I completely forget about the z index!

I think thats a result of putting in 16 hour days on 4 diffrerent projects!

Thanks again Paul.

User Tag List

Thread: Absolute positioned elements not showing in ie

Thread Tools

Display

Hybrid View

Absolute positioned elements not showing in ie

Bookmarks

Bookmarks

Posting Permissions