...

View Full Version : IE6 width 100% mystery



bunsco
05-12-2008, 05:46 PM
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.



<!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!!

BabyJack
05-12-2008, 08:55 PM
How about a link? Or a screenshot?

bunsco
05-12-2008, 10:46 PM
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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum