Not signed in (Sign In)
SkillShare - A place to discuss Web Standards and Web Design topics
Categories
Vanilla 1.1.4 is a product of Lussumo. More Information: Documentation, Community Support.
CSS & HTML: Absolutely positioned width:100% Horizontal nav IE6 mystery!!
Bottom of Page1 to 10 of 10
-
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 within a relatively positioned parent) 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 like expanding beyond 1024px.
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.
[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;
padding: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>
[/code] -
I'll give it a try tonight if I get a chance - gotta work right now, but I'd like to help!Thankful People: bunsco
-
-
CommentAuthorkari.patila
- CommentTimeMay 12th 2008
There's a typo at the beginning, but that's not your problem.
* {
margin:0;
paddingh:0;
}
The markup is valid and there's nothing wrong with that. What you need to know, however, is how IE6 interprets a value of 100% when dealing with absolutely positioned elements.
You have a floated LI element and inside it is the secondary navigation. Now, when an absolutely positioned element is inside a float, the 100% does not refer to the total width of the viewport, but rather to the width of the viewport minus the floated parent element. So there's your problem.
If you take out float:left from #primary-navigation li, you should be able to see almost everything working out like you had planned. And by "almost" I mean that coloring the primary navigation yellow doesn't work anymore. But, at least that's a much more pleasant problem to work with. -
-
Oh so close - thanx so much for that - yeah that ALMOST worked, but unfortunately that makes styling the list the way i planned impossible as the primary nav items are supposed to be tabbed (using the 'sliding doors' technique) which in this senerio is non-negotiable.
Oh but so close -
Alright, not sure why this works but it does for me - in IE6, IE7 and Firefox (on Windows). I had to use an IE6 hack, but it looks like it works fine. Here's the applicable css - it's even more bare-bones than you stripped it down to.
#primary-navigation {
margin: 0px;
padding: 0px;
list-style: none;
width: 100%;
background: #000;
height: 30px;
line-height: 30px;
margin-bottom: 30px;
}
#primary-navigation li {
float: left;
padding-left: 1px;
padding-right: 1px;
}
#primary-navigation li a {
display: block;
background: #FFCC00;
padding-left: 10px;
padding-right: 10px;
}
.sub-nav {
margin: 0px;
padding: 0px;
position: absolute;
list-style: none;
left: 0px;
width: 100%;
-padding-right: 61px;
background: #666;
}
Hope this helps! Let me know if you have questions. -
Well, hmm... that works for that one example, but if the sub-nav moves under any of the other top level items, it doesn't work. It has something to do with the top level item's width, but I don't have time right now to figure out what. I think a hack would be to add appropriate padding to the sub nav depending on which top level it's under... but I'm not sure that that's the best way.
-
-
CommentAuthorkari.patila
- CommentTimeMay 13th 2008 edited
The best way would be to just accept that IE just doesn't work the way you'd like it to.
The reason why you need something like -padding-right: 61px; is due to what I've already pointed out: the 100% width of the element in question is the width of the viewport minus the width of the floated parent element.
Perhaps a single background image for the navigation would do the trick? That way you wouldn't need to use any of those ugly hacks.
UPDATE: yes, using an image for the background works. Just remove the background colors from the primary and secondary navigation and use an image like this on the primary nav instead:
A live example can be found here: http://pixeldickens.com/test.html, and you can use the IE NetRenderer to check out how it works on various versions of the Internet Explorer. -
-
Yeah, I was thinking about an image too, but he mentioned effects, and I didn't think the image would go along with that well.
-
-
CommentAuthorkari.patila
- CommentTimeMay 13th 2008
If by effects you mean the sliding doors technique, there's nothing that would interfere with that. -
-
Okay, just looked up what the sliding doors technique was... yeah, nothing there to interfere. :-)
1 to 10 of 10