Forum Moderators: not2easy
I have a horizontal navigation bar made up of a list with inline <li> elements, i'm sure you knwo what type I mean. Anyway I am trying to make sure that the bar remains all on one line in the screen. To do this I have made use of the white-space:nowrap property, however in IE while the bar does not wrap, it does reposition itself within it's div, slightly down and to the right. This does not happen with Opera.
I can see that the amount right is the amount of pading I have on the <a> elemnts inside the <li> and the amoutn down is the height of the text (1em).
Is there a better way of doing this that will not have this effect?
(p.s. I want to avoid fixed width as far as possible.
can you post the code for this and any elements you have before and after the list... I tried to recreate it but couldn't..
Suzy
<html>
<head>
<title>Ynysybwl Regeneration Partnership</title>
<style>
#navbar_misc {
background : rgb(0,119,0);
text-align : left;
white-space : nowrap;
}
#navbar_misc ul {
list-style-type : none;
margin : 0;
padding : 0.2em 0 0.2em 0;
}
#navbar_misc ul li {
display:inline;
}
#navbar_misc ul li a {
padding : 0.2em 1em 0.2em 1em;
color : rgb(255,255,255);
border-right : 1px solid rgb(255,255,255);
}
#navbar_misc ul li a:hover {
background : rgb(102,102,255);
}
</style>
</head>
<body>
<div id="navbar_misc">
<ul><li>
<a href="contact.html" title="Contact Y.R.P.">News</a></li><li>
<a href="contact.html" title="Contact Y.R.P.">About Y.R.P.</a></li><li>
<a href="contact.html" title="Contact Y.R.P.">Ynysybwl</a></li><li>
<a href="contact.html" title="Contact Y.R.P.">Diary</a></li><li>
<a href="contact.html" title="Contact Y.R.P.">Partners</a></li><li>
<a href="contact.html" title="Contact Y.R.P.">Projects</a></li><li>
<a href="contact.html" title="Contact Y.R.P.">Links</a></li></ul>
</div>
</body>
</html>
there are various little cross browser differences. so I'll just post code with comments.. ;)
here's the new CSS
#navbar_misc {
/* background : rgb(0,119,0); */ /* add to link this div doesn't stretch in moz/opera */
text-align : left;
white-space : nowrap;
padding: 0; margin: 0;
}#navbar_misc ul {
list-style-type : none;
margin : 0;
padding : 0; /* changed from - 0 0.2em and added this to a padding */
}#navbar_misc ul li {
display: inline;
margin: 0; padding: 0;
}#navbar_misc ul li a {
padding : 0.5em 1em; /* top added from ul padding */
color : rgb(255,255,255);
background : rgb(0,119,0); /* added here for moz as it doesn't stretch the container */
border-right : 1px solid rgb(255,255,255);
line-height: 2em; /* added */
}#navbar_misc ul li a:hover {
background : rgb(102,102,255);
}
also then moz has the "whitespace" thing going on between the list items so change your HTML format from:
<li><a href="/">About Y.R.P.</a></li><li>
<a href="/">Ynysybwl</a></li><li>... etc
to:
<li><a href="/">About Y.R.P.</a></li><li
><a href="/">Ynysybwl</a></li><li
>... etc
actually "breaking" the <li> element corrects this.. I think there's another way but I can't remember it off hand..
The background color (green) was moved because although the li elements do stay on the line and cause a horizontal scroll the actual div container doesn't stretch so it became white on white.. over 100% wide ;)
Suzy
I can see exactly what Ie is doing, although i'm not sure I can explain it very well but I will try.
Every <a> element has an amount of horizontal padding both left and right. When the screen width in less than the width of the total list, it is breaking the flow of the list immediately before the first text. This means that it is shifting the entire list down one line, except for the padding-left of the first <a> element which it is displaying on the original line.
In effect I should have the following layout :
¦-padding-¦-text-¦-padding-¦-border-¦-padding-¦-text-¦-padding-¦-border-¦
but instead I am getting :
¦-padding-¦
¦-text-¦-padding-¦-border-¦-padding-¦-text-¦-padding-¦-border-¦
If I reduce that padding-left to be 0, the problem goes away as there is no padding-left to break after and hence everything stays as it should be.
To me this seems a problem with the way IE applies the white-space property as it only seems to apply after the point where text is first displayed and not to any other elements/padding/margins before that point (although it does apply to them after.
I'm not seeing that then.. I was with the first lot of code you posted.. but not now?
.....Hang on I tested with
html, body {margin: 0; padding: 0;}
in place...
does adding that help.. does the nav divs parent have padding or margin on it?
Suzy
Here is the code as I have it at the moment. All margins/padding od the div are as you see here, this div is also a first level thing in the main page but the behaviour is exactly the same anyway.
I'm beginning to think I might have to live with this collapsing padding thing becasue other than giving the list items a fixed width i'm not sure what more I can try.
<html>
<head>
<title>Ynysybwl Regeneration Partnership</title>
<style>
html, body {margin: 0; padding: 0;}
#navbar_misc {
background : rgb(0,119,0);
text-align : left;
}
#navbar_misc ul {
list-style-type : none;
margin : 0;
padding : 0;
white-space : nowrap;
}
#navbar_misc ul li {
display : inline;
margin : 0;
padding : 0;
}
#navbar_misc ul li a {
padding : 0.4em 1em 0.4em 1em;
color : rgb(255,255,255);
border : 1px solid rgb(255,255,255);
background : rgb(0,119,0);
line-height : 1.95em;
}
#navbar_misc ul li a:hover {
background : rgb(102,102,255);
}
</style>
</head>
<body>
<div id="navbar_misc">
<ul><li><a href="contact.html" title="Contact Y.R.P.">News</a></li><li>
<a href="contact.html" title="Contact Y.R.P.">About Y.R.P.</a></li><li>
<a href="contact.html" title="Contact Y.R.P.">Ynysybwl</a></li><li>
<a href="contact.html" title="Contact Y.R.P.">Diary</a></li><li>
<a href="contact.html" title="Contact Y.R.P.">Partners</a></li><li>
<a href="contact.html" title="Contact Y.R.P.">Projects</a></li><li>
<a href="contact.html" title="Contact Y.R.P.">Links</a></li></ul>
</div>
</body>
</html>
aha that's the clue... we can hack in a width for IE ;)
add this:
* html #navbar_misc ul li a {width: 1%;}
IE only hack: it will stretch the link bigger than 1% but it seems to be enough for it to retain the padding
btw.. I would try not to use underscore in the class/ID names as there are some isues with them I think.. admittedly older browsers but just to be safe perhaps better with a hyphen
and also Moz and Opera are still displaying whitespace between list items.. breaking the code {<li>} like I mentioned above will remove that
Suzy
And second what exactly do you mean by breaking the <li>?
Yes I know... paste it exactly as shown with the * intact, as a seperate rule.. don't add it to the general rule
#navbar_misc ul li a {
padding : 0.4em 1em 0.4em 1em;
color : rgb(255,255,255);
border : 1px solid rgb(255,255,255);
background : rgb(0,119,0);
line-height : 1.95em;
}* html #navbar_misc ul li a {width: 1%;}
it's the star HTML hack only IE sees it
>>And second what exactly do you mean by breaking the <li>?
instead of breaking your HTML code the way you have
<li><a href="/"">News</a></li><li>[this is causing the whitespace]
<a href="/">About Y.R.P.</a></li><li>[this is causing the whitespace]
<a href="/" >Ynysybwl</a></li><li> ...etc
then either a put all the list items on one line within your HTML or if you want line breaks in the HTML then actually break the line by breaking the <li> tag
<li><a href="/"">News</a></li><li
><a href="/">About Y.R.P.</a></li><li
><a href="/" >Ynysybwl</a></li><li
> ...etc
Suzy
<added> sorry typed it before I saw your last post I'll leave it for reference</added>
<li> </li>
Adam
Adam I also discovered that a whitespace just before the closing </a> element will sort it too..
<li><a href="/">text link </a></li>
Suzy
