Forum Moderators: not2easy
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 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.
a thousand thanks for any help given as im running out of hair to pull out.
<!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>
When you deal with Internet Explorer you're just going to encounter situations that you just can't use standards compliant code that IE will render correctly.
In which case you'll want to utilize Internet Explorer's conditional comments [msdn.microsoft.com].
Essentially you'll be using different values for IE by overriding them with a second stylesheet that only IE will be able to see even if the useragent is being spoofed.
<head>
<style type="text/css">
/* my standards compliant CSS here */
</style><!--[if IE]>
<style type="text/css">
/* fix IE's lameness here */
</style>
<![endif]--></head>
You can do additional reading on Microsoft's MSDN website about conditional comments.
In general I link full style sheets via a link element though you could use the style element to quickly test what you can change.
So for example if the width does not equal 100% when you specify 100% you could simply change just the width in the conditional comments with your selector to 110% in example.
Some things to keep in mind...
If you're running stand alones conditional comments will always match the system IE version. So if Windows is running IE6 but you're in a standalone IE7 you conditional comments if specified for IE6 will still trigger in IE7.
IE 5.0, 5.5, and 6.0 in general have the same behavior and it is exceptionally rare for even the very experienced to notice differences in these versions. So essentially you can copy and paste the same CSS files and test each one of these individual versions of IE.
IE7 fixed lots but not everything...
IE8B1 is targeted to be completely CSS 2.1 compliant.
Good luck! :)
- John
Though i the code ive provided here was for forum use - the ACTUAL code is linked to a few stylesheets.
I thought of using conditionals, but I dont think that actually addresses the problem par se.
I think its a case of removing one thing to make the second nav stretch to 100% of the browser window ( the float property in #primary-navigation li ) - But ending up losing all possibility of styling the list items with tabs (aka 'sliding doors' technique) which is an imperative.
what a yukky first question though ;) I know IE6 has it's positioning troubles but I don't think I ever noticed this quite so obvious flaw in width counting
It will get worse as you position the sub nav to a later primary nav item too, the difference in the width is the same as the width of the items in the primary nav preceding the parent of the one you're positioning to! i.e. in IE6 it's counting the width from the left of the parent <li> to the right of the viewport :o
anyway the thing to do is NOT float the <li> elements, instead just have them display:inline; then put all the decoration margins, colors etc.. onto the <a> items, this achieves the same effect but means IE6 uses full width
CSS:
* {
margin:0;
paddingh:0;
}#navigation {
width:100%;
border-bottom:1px solid #424242;
}/** addded this rule to cover both lists inside nav div **/
#navigation ul {
list-style: none;
}#primary-navigation {
float:left;
height:4em;
margin:0;
background-color: #232323;
position:relative;
white-space:nowrap;
width:100%;
}#primary-navigation li {
/*float: left;*/ /* don't float */
display:inline;
/*margin: 0 0 0 2px;*/ /* move margin onto anchors */
/* 3 x rules below not required if you add in smaller rule above to cover both lists
list-style-type: none;
list-style-image:none;
list-style-position: outside;
*/
/* background:yellow; */ /* move background color onto anchors */
}#primary-navigation li a {
/* position: relative;
width: auto;
display: block; */ /* not required *//*margin-left:5px;*/ /* change margin to suit below */
padding: 0 1em;
line-height: 2;
text-align: center;
text-decoration: none;
float:left;
/* items below added from li */
background: yellow;
margin-left: 2px;
}#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;*/
background: blue; /* added different color to show width */
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;*/ /* removed temporarily to show width of ul is now correct */
}
have left everything in but just commented out the unnecessary bits and the moved bits
-Suzy
