pageoneresults - 1:51 am on May 19, 2003 (gmt 0)

CSS Beveled Button Effect - Horizontal Format

Okay, I think I figured this one out. I've tested in IE and Opera and it appears to be working as intended...

#menu{
position:absolute;
left:1px;
top:31px;
width:100%;
padding:5px 0px;
white-space:nowrap;
}
#menu a{
display:inline;
border-top:1px solid #ccc;
border-left:1px solid #ccc;
border-right:1px solid #808080;
border-bottom:1px solid #000;
font-size:11px;
color:#ccc;
background:#68849c;
text-decoration:none;
padding:3px 2px 3px 4px;
text-align:center;
}
#menu a:hover{
border-top:1px solid #000;
border-left:1px solid #666;
border-right:1px solid #ccc;
border-bottom:1px solid #ccc;
color:#fff;
background:#47748e url('/images/tile-blu-blu-grn.jpg') fixed;
}
#menu a:active{
color:#fff;
background:#47748e;
}

Note that I have my menu absolutely positioned from the top at 31px. This is because I have a <div> sitting above the navigation that runs 100% the width of the window and is 30px in height with a 1px top/bottom border. The code looks like this...

div.top{
position:absolute;
top:0px;
left:0px;
padding:0px;
margin:0px;
width:100%;
height:30px;
text-align:right;
white-space:nowrap;
color:#000;
background:#47748e;
border-top:1px solid;
border-bottom:1px solid;
z-index:1;
}

I've positioned the #menu exactly 1px below the top div (31px). This creates a nice shadow effect when merged with the border of the #menu a elements. I think it is the white-space:no-wrap; that may solve the problem discussed earlier.

Note: <a href's> must be on one line in your code...

<a href></a><a href></a><a href></a>

P.S. Tell me why I get a space when putting the <a href> on a line by itself in the code. No, there are no <br /> tags either.

<a href></a>
<a href></a>
<a href></a>