hi,
this one has me stumped…
http://mayacove.com/dev/css/nav_test.html
IE7 & 6 don’t like the <br>'s inside the li’s… how do I solve this please… (I might have to do this one with images… )
I can’t set widths for these li’s, because the content on all of them is different amount of copy, as you can see (but not sure setting widths would solve the problem); is there a way to solve this problem for IE7 & IE6 please… thank you very much…
If he is going to break that rule to begin with he should switch up the HTML to begin with 
Just because you give the <span> a display:block it doesn’t change the fact it is still an inline element. It is block level but not an actual block element. Don’t confuse it :). If you’re going to use display:block on an inline element to begin with, why not just start it out as a block?
yes yes, Paul O’B, your works indeed… thank you very much!!
http://mayacove.com/dev/css/nav_test.html
and like noonnope suggested I did text with text-transform:uppercase…
thank you very much (this inline/inline-block stuff can be tricky sometimes…
No problems 
Code is for sharing
or with spans and text transformation:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<style type="text/css">
body {
margin:100px 0 0 0;
font: normal 12px/18px arial, helvetica, sans-serif;
color: #666;
}
#wrapper {
margin:0 auto;
width:900px;
position:relative;
}
a, a:visited {
color: #666;
}
#nav {
width:900px;
margin:0 auto;
border:solid 1px red;
}
#nav ul {
list-style:none;
margin:0;
padding:0;
}
#nav ul li {
text-align:center;
display:inline-block;
padding:0;
margin-left:10px;
border:1px solid blue;
}
* html #nav ul li {
display:inline;
}/* ie6*/
*+html #nav ul li {
display:inline;
}/* ie7**/
#nav ul li a {
text-decoration:none;
text-transform:uppercase;
}
#nav ul li a span {
display:block;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="nav">
<ul>
<li><a href="">Home</a></li>
<li><a href=""><span>About</span>
our store</a></li>
<li><a href=""><span>Order samples</span>
for your customers</a></li>
<li><a href=""><span>Order more samples</span>
for your other customers</a></li>
<li><a href=""><span>Order supplies</span>
and materials</a></li>
</ul>
</div>
</div>
</body>
</html>
tested even in ie5.5 thanks to ie collection and looks ok.
one thought: you should check how this one looks without the css style applied and how your uppercase <br /> looks like without the css style applied.
and sorry Paul O’B for “stealing” your code
yes but the spans don’t split the lines:
http://mayacove.com/dev/css/nav_test.html
thank you all for your help…
I’ve given you the answer and the explanation and as far as I can see its working exactly as you requested
Where do you see it going wrong?
When you set display:inline-block on a block element such as the list item then it imparts haslayout on that element.
Then in a separate rule you apply display:inline which does not remove haslayout but makes it an inline element that is in haslayout mode which makes it act exactly as inline-block.
The display:inline rule needs to be in a separate rule or the element never gets a change to obtain haslayout. The display:inline would over-ride the inline-bock rule (which is simply a haslayout trigger in ie7 and under).
Using the code I mentioned above does exactly what you aked for in all browers as far as I can see.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<style type="text/css">
body {
margin:100px 0 0 0;
font: normal 12px/18px arial, helvetica, sans-serif;
color: #666;
}
#wrapper {
margin:0 auto;
width:900px;
position:relative;
}
a, a:visited {
color: #666;
}
#nav {
width:900px;
margin:0 auto;
border:solid 1px red;
}
#nav ul {
list-style:none;
margin:0;
padding:0;
}
#nav ul li {
text-align:center;
display:inline-block;
padding:0;
margin-left:10px;
border:1px solid blue;
}
* html #nav ul li {
display:inline;
}/* ie6*/
*+html #nav ul li {
display:inline;
}/* ie7**/
#nav ul li a {
text-decoration:none;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="nav">
<ul>
<li><a href="">HOME</a></li>
<li><a href="">ABOUT<br />
OUR STORE</a></li>
<li><a href="">ORDER SAMPLES<br />
FOR YOUR CUSTOMERS</a></li>
<li><a href="">ORDER MORE SAMPLES<br />
FOR YOUR OTHER CUSTOMERS</a></li>
<li><a href="">ORDER SUPPLIES<br />
AND MATERIALS</a></li>
</ul>
</div>
</div>
</body>
</html>
Looks exactly the same in IE6 - Ie8. (You can find the method documented more full here in an old article of mine)
Or did you mean you wanted a different behaviour?
#nav ul li a span { display:block; } will make the lines split when css.
when no css… the span variant actually looks better
about that: you should use text-transform to make your text uppercase in css also, not written directly so in html markup (<span>Order samples</span>for your customers). try it
yes that’s how I had it before…
so look what happens in IE7 (& 6) when I remove *display:inline for the li’s:
http://mayacove.com/dev/css/nav_test.html
I think it reads display:inline-block as just display:block…
you could split the text in spans:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<style type="text/css">
body { margin:100px 0 0 0 ; font: normal 12px/18px arial, helvetica, sans-serif; color: #666;}
#wrapper {margin:0 auto; width:900px; position:relative; }
a, a:visited {color: #666; }
#nav {width:900px; margin:0 auto; border:solid 1px red; }
#nav ul {list-style:none; margin:0; padding:0; }
#nav ul li { text-align:center; display:inline-block; padding:0; margin-left:10px; border:1px solid blue; *display:inline; }
#nav ul li a { text-decoration:none; }
#nav ul li a span { display:block; }
</style>
</head>
<body>
<div id="wrapper">
<div id="nav">
<ul>
<li><a href="">HOME</a></li>
<li><a href=""><span>ABOUT</span>OUR STORE</a></li>
<li><a href=""><span>ORDER SAMPLES</span>FOR YOUR CUSTOMERS</a></li>
<li><a href=""><span>ORDER MORE SAMPLES</span>FOR YOUR OTHER CUSTOMERS</a></li>
<li><a href=""><span>ORDER SUPPLIES</span>AND MATERIALS</a></li>
</ul>
</div>
</div>
</body>
</html>
… and add you ie6 & ie7 hacks
Hi,
The display:inline must be removed from the same block as the display:inline-block or the element never gets a chance to obtain haslayout. (See my section on display here.)
using valid code would be like this:
#nav ul li {
text-align:center;
display:inline-block;
padding:0;
margin-left:10px;
border:1px solid blue;
}
[B]* html #nav ul li{display:inline;}/* ie6*/
*+html #nav ul li{display:inline;}/* ie7*/[/B]
I hate those invalid hacks (e.g.“*display”)
It’s bad practice to change the display type of elements to begin with (and by changing display types, I mean switching inline to block and vice versa)
As I said earlier, if you need the capabilities of a block element, make it a block to begin with (unless you can’t, aka an anchor)
would you use display: block on an already block element? you only use display: block when you can’t have a block element, but you need the feature… isn’t it?
so, i’m a little confused about what you’re trying to suggest 
If you’re going to use display:block on an inline element to begin with, why not just start it out as a block?
probably because:
“1. a block element put inside an inline element = big no-no!”
a block element put inside an inline element = big no-no!
display:block on an inline element = inline element
oh, I see… what happens when you take out css… of course they look better in one line… so I did with spans…
http://mayacove.com/dev/css/nav_test_spans.html
so the spans are display:block now, I’ve had problems in the past putting ‘block’ elements inside ‘inline’ elements… (sometimes ‘block’ elements inside ‘inline’ elements remain ‘inline’…) this inline/block stuff can be confusing sometimes… I had a simliar problem a few weeks ago, only here the <li>'s were stacked, prob was spacing in IE6 (spacing beneath and above <a>'s…)
Paul O’B, will definitely check your article you mention… thank you very much to all for your help…
you should put “Home” not “home” and so on for the cases where the page is viewed w/o author style
and i still think you should use <span> for the first line of text for the same reason