moonbiter - 5:52 am on Nov 7, 2002 (gmt 0)

Doesn't display: block insert a line break between elements?

It does, but you can get around that.

There are a couple of ways to do what you want. One is to make the a elements display as a block and then float them. So you have css like this:

div#menu {
background: #ccc;
border: 1px solid #999;
}
div#menu a {
border: 1px solid #FFF;
display: block;
float: left;
background; #CCC;
padding: 3px;
}
div#menu a:link, div#menu a:visited {
background: #CCC;
}
div#menu a:hover, div#menu a:active {
background: #FFF;
}

and html like this:

<div id="menu">
<a href="linkone.htm">Link one</a>
<a href="linktwo.htm">Link two</a>
<a href="linkthree.htm">Link three</a>
<div style="clear: both;"></div>
</div>

The one ugly thing about this is the spacer div required to give the menu some content. Also, somewhat weirdly, if you take the border off of the div#menu it doesn't seem to work right (at least in Mozilla or IE).

Another method is simpler. Replace the relevant CSS selectors above with :

div#menu {
background: #ccc;
padding: 3px 0;
}
div#menu a {
border: 1px solid #FFF;
background; #CCC;
padding: 3px;
}

And take out the spacer div. With this method no float or display is needed. You do need to put top and bottom padding on your div#menu to contain the padding you put on the a elements, though. With this method it is best to eliminate the border on the div#menu, because Mozilla and IE (5.5 and 6 in quirks mode) handle box-sizing differently.