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 3 of 3
  1. #1
    New Coder
    Join Date
    Jan 2006
    Posts
    34
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Angry IE6 width 100% mystery

    Hi all.

    This is my first posting here - and im after somebody who can stop my endless tears of fustration.

    The problem is that i cant get my sub navigation of my horizontal list to span 100% of the browser window in IE6.

    It appears to work fine in Firefox and IE7 but not in IE6

    The containing div and both ul's have width:100% attributes, but the sub navigation (which is positioned absolutely) only spans around 90% of the window!

    The only way i've been able to get the sub navigation to span the whole width is to give it an explicit value (eg 1024px) - but thats not a good solution for the scrollbar it would produce amonst other things.

    I have tried things like zoom:1 and height:1% incase it was an hasLayout problem (may still be!) but no joy.

    I cant see the value of using Conditional statements as it doesn't seem to be a problem of actually getting it to work in IE6 and it having an adverse effect in in IE7/Firefox and vise-versa.

    I have included a stripped down version of my problem below with background block colours to illustrate the problem - as i just cannot figure it out.

    the yellow areas are to accomodate tabs aka 'sliding doors' technique

    a thousand thanks for any help given as im running out of hair to pull out.


    please copy and paste code below into a new document to view the differences between IE6 and the others.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Untitled</title>
    
    <style type="text/css">
    
    * {
    margin:0;
    paddingh:0;
    }
    
    /*=NAVIGATION 
    ===================================================*/
    
    #navigation {
    width:100%;
    border-bottom:1px solid #424242;
    }
    
    #primary-navigation
    {
    float:left;
    height:4em;
    margin:0;
    background-color: #232323;
    position:relative;
    white-space:nowrap;
    width:100%;
    }
    
    #primary-navigation li
    {
    float: left;
    display:inline;
    margin: 0 0 0 2px;
    list-style-type: none;
    list-style-image:none;
    list-style-position:outside;
    background:yellow;
    }
    
    #primary-navigation li a
    {
    position: relative;
    width: auto;
    display: block;
    margin-left:5px;
    padding: 0 1em;
    line-height: 2;
    text-align: center;
    text-decoration: none;
    float:left;
    }
    
    #primary-navigation li a:hover
    {
    color: #00c;
    text-decoration: underline;
    }
    
    #primary-navigation li.active a:hover { 
    color: #fff;
    }
    
    #primary-navigation ul.sub-nav
    {
    position: absolute;
    left: 0;
    top: 2em;
    margin:0;
    background:#424242 none;
    display:inline;
    width:100%;
    border-bottom:1px solid #000;
    margin-bottom:1px;
    }
    
    #primary-navigation ul.sub-nav li
    {
    width: auto;
    margin: 0;
    border: 0;
    
    background: none;
    }
    
    li.first-tab {
    margin-left: 15px;
    }
    
    #primary-navigation ul.sub-nav li a
    {
    width: auto;
    border: 0;
    margin: 0;
    color: #fff;
    background: transparent;
    }
    
    #primary-navigation ul.sub-nav li a.subactive
    {
    background: #3D545A;
    }
    
    </style>
    
    </head>
    
    <body class="projects">
    <div class="branding">
     <h1><a href="#">Title</a></h1>
     <div class="utilities"> <a href="#">Help</a> <a href="#">Sign out</a> </div>
    </div>
    
    <!--HORIZONTAL NAVIGATION-->
    <div id="navigation">
     <ul id="primary-navigation">
     <li class="generic first-tab"><a href="#">Home</a></li>
     <li class="project"><a href="#">Projects</a>
      <ul class="sub-nav">
      <li><a class="subactive" href="#">Create</a></li>
      <li><a href="#">Current</a></li>
      <li><a href="#">Shared</a></li>
      <li><a href="#">Teacher manager</a></li>
      </ul>
     </li>
     <li class="student"><a href="#">Student manager</a></li>
     <li class="teacher"><a href="#">Teacher manager</a></li>
     </ul>
    </div>
    <!--END HORIZONTAL NAVIGATION-->
    <div class="wrapper">
     <!--CONTENT-->
     <div class="content">
     <p>Section head</p>
     </div>
     <!--END CONTENT-->
     <!--SITE FOOTER-->
     <div class="footer">
     <ul class="footer-navigation">
      <li><a href="#">First item</a></li>
      <li><a href="#">Second item</a></li>
      <li><a href="#">Third item</a></li>
     </ul>
     </div>
     <!--END SITE FOOTER-->
    </div>
    </body>
    </html>


    UPDATE:

    omitting the float property in #primary-navigation li gets the sub navigation ul to stretch 100% across, but that in turn makes it impossible to style the top-level list items into 'tabs' - rounded corner ones using the 'sliding doors' technique - which is imperative!!
    Last edited by bunsco; 05-13-2008 at 01:10 AM.

  • #2
    Regular Coder BabyJack's Avatar
    Join Date
    Apr 2008
    Location
    Somewhere.
    Posts
    602
    Thanks
    43
    Thanked 6 Times in 6 Posts
    How about a link? Or a screenshot?
    Enlightenment in Coding
    Validate before Posting | Google is your friend for PC Problems | Make sure you have a doctype

  • #3
    New Coder
    Join Date
    Jan 2006
    Posts
    34
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by BabyJack View Post
    How about a link? Or a screenshot?
    Thanks for responding Bud.

    The example is in the post - just copy and paste the code into a new document and view in a browser
    Last edited by bunsco; 05-12-2008 at 11:07 PM.


  •  

    Posting Permissions

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