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…
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?
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)
#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
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]
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
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…