Navigation bar 100%

Joey · 2008-03-17 13:28:32

I have the following XHTML code:

<body>
<div id="wrapper">
<ul id="nav">...</ul>
</div>
</body>

with the following CSS:

html, body {
	margin: 0;
	padding: 0;
}
body {
	position: relative;
	background-color: #fff;
	padding: 130px 10px 10px 140px;
	min-width: 690px;
}
#wrapper {
	width: 690px;
}
#nav {
	position: absolute;
	top: 0;
	left: 0;
	color: #fff;
	background: #eb2a2e;
	width: 100%;
	padding: 0;
	margin: 0;
	font-size: 95%;
}

I want the navbar to be 100%. In IE7, Firefox and Safari everything is good. However, in IE6 the wrapper causes the navbar not to be 100%. Also, when I pull out the nav ul from the wrapper (what I actually don’t want, because I want the nav under the h1), IE6 also doesn’t display the navbar 100%, probably because of the padding of the body and other elements.

How can I make the navbar independent of the other elements and get the 100% working.

Also, how can I achieve that the navbar doesn’t break (new line) when it is overflowed? So when I resize test, it should overflow further to the right, and not on a new line (because then it interferes with other absolute positioned elements)?

Thanks for your help!

jm · 2008-03-17 15:20:55

How can I make the navbar independent of the other elements and get the 100% working.

Remove position: relative from body. You might as well move #nav out of #wrapper too. Unless you really need the min-width on the body, remove it and set the navbar as a statically positioned element.

Also, how can I achieve that the navbar doesn’t break (new line) when it is overflowed?

You can’t prevent text from expanding, but height: Xpx; overflow: hidden will prevent #nav from vertically overflowing. However, it sounds like you have too much going on in your template – multiple absolutely positioned elements shouldn’t interfere with each other. You might want to rethink the rest of your CSS in terms of static positioning.

Joey · 2008-03-17 18:32:02

I tried the things you said, but I can’t get it to work on IE6.

Actually, the only problem with the width of the navbar is that IE6 calculates a width: 100%; relative to the body width. But my body also has a padding-left: 140px;, which causes the navbar to not fill the full width.

Zanza · 2008-03-17 20:43:54

Why not move the body paddings to #wrapper margins, instead? Should do the same.

Z-

Gocom · 2008-03-17 21:06:09

Why not move the body paddings to #wrapper margins, instead? Should do the same.

Or to html or to margin to body. But i don’t know if it is the padding – there could be some other issues too, when that code should work as it is. Well, but yeah.

Bloke · 2008-03-17 21:42:50

Normally, removing position: relative will still cause IE to cry because it’ll just make the absolutely positioned bar relative to <body> or <html> (or ‘*’) instead of the viewport; and it won’t tell you which. Ruddy browser…

I went through this pain yesterday trying to fix my stupid 2-year-old 3-column layout that relied on horrible hacks and negative margins to achieve something that today’s CSS can do in 10 lines. Of course, “today’s CSS” doesn’t include IE6. My absolutely positioned nav bar disappeared off the page in IE6 when it was a child of #wrapper. Moving the bar ‘outside’ the wrapper fixed it but caused other issues so in the end I pretty much rewrote the CSS. Humbug.

In this case I’d be tempted to agree with Zanza/Gocom and clear out as much stuff from the immediate parent of #nav as you can. Clearly something is hurting the bar in IE6. Is it some random sypmtom of the 3-px bug causing the 100% to really be 100%+3px = automatic wrap/misalignment?

jm · 2008-03-17 21:46:52

Joey, can you provide screenshots? I don’t have access to IE6.

Joey · 2008-03-17 22:08:53

I now moved the navbar outside the wrapper and moved the padding of the body to the wrapper. That seems to do the trick. However, it is still not ideal. Especially for the “overflow problem” I talk about in my 1st post isn’t solved.

I also don’t have access to IE6 only on another computer, so I will try to post some screenshots. But I’m probably going to rewrite some CSS. Maybe I will try a liquid layout.

Zanza · 2008-03-17 22:35:53

If you’re doing a pixel-based layout on the width, you’d better use pixel also for the nav (there’s no reason not to do it, and it’s more reliable). The overflow problem can’t be solved AFAIK. If you use pixel you should fix the width to the LI and then set overflow:hidden for the LIs. That will hide some text if resized over the available space, but not cause the line break. It all depends on LI and text size.

Anyway, using position absolute for the nav is not ideal for text resizing. In times I’ve came to use position:absolute very rarely and only for marginal elements. You could try a layout based on float:left, instead. But a screenshot or a url would actually help, we’re just guessing, here… :)

Oh: and liquid layout is far more problematic in general, so my advice is not to use it, if you can… :) Not to solve this problem anyway.

Z-

Textpattern CMS

Textpattern CMS support forum

#1 2008-03-17 13:28:32

Navigation bar 100%

#2 2008-03-17 15:20:55

Re: Navigation bar 100%

#3 2008-03-17 18:32:02

Re: Navigation bar 100%

#4 2008-03-17 20:43:54

Re: Navigation bar 100%

#5 2008-03-17 21:06:09

Re: Navigation bar 100%

#6 2008-03-17 21:42:50

Re: Navigation bar 100%

#7 2008-03-17 21:46:52

Re: Navigation bar 100%

#8 2008-03-17 22:08:53

Re: Navigation bar 100%

#9 2008-03-17 22:35:53

Re: Navigation bar 100%

Board footer