Date: 01/23/06 (WebDesign)    Keywords: browser, css, html

Hello all. I come to you with yet another question on CSS. I recently read this article about creating tabbed menus with CSS. I'm trying it out, and everything seems to work ok except for the actual tab part. It says in the article/tutorial to use an image for the rounded corners of the tab. I created the images, placed them in the CSS exactly as shown in the article, but they're not showing up on my browser. The link to the layout is here.


This is the CSS used for the tab menu:

#navigation a
{
color: #000;
background: #FB7509 url("images/left-tab.gif") left top no-repeat;
text-decoration: none;
padding-left: 10px
}

#navigation a span
{
background: url("images/right-tab.gif") right top no-repeat;
padding-right: 10px
}

#navigation a, #navigation a span
{
display: block;
float: left
}

/* Commented backslash hack hides rule from IE5-Mac \*/
#navigation a, #navigation a span
{
float: none
}
/* End IE5-Mac hack */

#navigation a:hover
{
color: #fff;
background: #184A82 url("images/left_tab_hover.gif") left top no-repeat;
text-decoration: none;
padding-left: 10px
}

#navigation a:hover span
{
background: url("images/right_tab_hover.gif") right top no-repeat;
padding-right: 10px
}

#navigation
{
list-style: none;
padding: 0;
margin: 0
}

#navigation li
{
float: left;
display: block;
margin: 0;
padding: 0
}

This is the HTML (without the spaces of course):

< ul id="navigation" >
< li >< a href="index.html" >< span >Home< /span >< /a >< /li >
< li >< a href="/" >< span >Services< /span >< /a >< /li >
< li >< a href="/" >< span >Take a tour< /span >< /a >< /li >
< li >< a href="/" >< span >About us< /span >< /a >< /li >
< li >< a href="/" >< span >Contact us< /span >< /a >< /li >
< /ul >


It's just a dummy layout I'm using to test this out. Would someone mind taking a look? I'm kind of stumped here. Thanks to anyone who feels like helping me out!

Source: http://community.livejournal.com/webdesign/1048821.html