Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    Regular Coder
    Join Date
    Jun 2007
    Location
    N. Ireland
    Posts
    351
    Thanks
    16
    Thanked 4 Times in 4 Posts

    Problem using Z-Index in IE7

    Edwin Brown is looking and acting fine in FF3.

    I opened it IE7 and have lost my navigation.

    CSS:
    Code:
    div#navigation {
     width: 800px;
     background-color: #000;
     position: absolute;
     top: 0px;
     left: 0px;
     width: 100%;
     height: 224px;
     background: #fff url(/images/nav_bg.jpg) repeat-x;
     z-index: 1;
    }
    
    div#site_wrapper {
     width: 800px;
     min-height: 321px;
     margin: 0 auto 0;
     color: #fff;
     overflow: auto;
     margin-top: 61px;
     padding: 0;
     background: #000 url(/images/site_bg.jpg);
     z-index: 5;
     position: relative;
    }
    Any help appreciated.

    D.
    Daemonkin.
    If this was helpful, please add to my reputation
    Thousand Sons - Freelance Web Developer - ninetyonedegrees.com

  • #2
    Regular Coder
    Join Date
    Jun 2007
    Location
    N. Ireland
    Posts
    351
    Thanks
    16
    Thanked 4 Times in 4 Posts
    Hacked at it and it seems to work now in IE7.

    Had to put in ie7.css stylesheet and ie6.css stylesheet:

    Code:
    div#content {
     background: url(/images/content_bg.jpg) no-repeat;
     width: 800px;
     min-height: 300px;
     padding: 0 10px 0;
     overflow: auto;
     w\idth: 780px;
     margin-top: 61px;
    }
    to be able to see my navigation bar. If anyone else can figure out a better solution please post.

    D.
    Daemonkin.
    If this was helpful, please add to my reputation
    Thousand Sons - Freelance Web Developer - ninetyonedegrees.com

  • #3
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,957
    Thanks
    9
    Thanked 727 Times in 721 Posts
    I haven't looked through the code in detail, but I think it might be the absolute positioning on your navigation div that's causing the problem.

    SB

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,747
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Hello daemonkin,
    It does seem absolute positioning usually causes more trouble than it cures. I stay away from it untill it's absolutely needed.
    There is no reason for your menu not to work cross-browser. I hate browser specific CSS as much as AP.

    Try this instead, quoted only the CSS I changed -
    Code:
    body {
     background: #9a7737 url(/images/site_bg.jpg) repeat;
     font: 70% verdana, serif;
     color: #000;
    }
    * {
    margin: 0;
    padding: 0;
    border: none;
    }
    #site_wrapper {
     width: 800px;
     margin: 61px auto 0;
     color: #fff;
     overflow: auto;
     z-index: 150;
     position: relative;
    }
    #navigation {
     background: #000;
     height: 61px;
     background: #fff url(/images/nav_bg.jpg) repeat-x;
    }
    ul#nav {
    width: 900px;
     list-style: none;
    margin: 0 auto;
    }
    #home, #bio, #news, #events,
    #media, #blog, #download {
     display: inline;
     float: left;
    }
    ul#nav li#home{width:297px;}
    ul#nav li#bio{width: 57px;}
    ul#nav li#news{width: 114px;}
    ul#nav li#events{width: 94px;}
    ul#nav li#media{width: 77px;}
    ul#nav li#blog{width: 80px;}
    ul#nav li#download{width: 99px;}
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  

    Posting Permissions

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