SitePoint Sponsor

User Tag List

Results 1 to 5 of 5

Hybrid View

  1. #1
    SitePoint Enthusiast
    Join Date
    Nov 2006
    Location
    England, UK
    Posts
    34
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Absolute positioned elements not showing in ie

    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.
    one day there will be a link to my homepage here...

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

  3. #3
    SitePoint Enthusiast
    Join Date
    Nov 2006
    Location
    England, UK
    Posts
    34
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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!
    one day there will be a link to my homepage here...

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

  5. #5
    SitePoint Enthusiast
    Join Date
    Nov 2006
    Location
    England, UK
    Posts
    34
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    one day there will be a link to my homepage here...


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
  •