Can't figure out why this won't work

[capella07]

I'm trying to put together a set of navigation tabs using divs & css.

I'm doing this off an example at: http://www.webcredible.co.uk/user-friendly-resources/css/css-round-corners.shtml.

The html for the page with the tabs looks like this:
<div id="navigation"><a href="#">Home</a></div>

And the css (currently in a style tag on the page with the tabs) looks like this:
#navigation a
{
color: #000;
background: #ffa20c url(images/lefttabcorner.gif) left top no-repeat;
text-decoration: none
}

The image, however won't show up when referencing it in the css. My site's file structure is set up like:
(root folder)
home.html
images(folder)
lefttabcorner.gif

In the css I've also tried "../images/lefttabcorner.gif" and "/images/lefttabcorner.gif" but none of them will result in showing the image next to the div.

I tried just referencing the image to make sure I could access it at all with: <img src="images/lefttabcorner.gif" /> and that showed the image just fine.

Any help/suggestions will be greatly appreciated!

Thanks in advance.

[Centauri]

What does the image look like? - is it a transparent image?

[capella07]

It's a small rounded image that's the same color as the colored background of the text next to the gif.

If you go to the site (http://www.webcredible.co.uk/user-friendly-resources/css/css-round-corners.shtml), in the third section "Adding the left menu tab corner" you'll see the left tab image. I simply used right-click/save as... to get the right and left tab corners from there.

[Centauri]

Unless there is an a:link rule elsewhere in the page over-riding this, it should work, especially as you have proven access to the image.

[eloquentBohemia]

Just wondering:
Do you have the entire code they posted?
This:
#navigation a
{
color: #000;
background: #ffa20c url(left-tab.gif) left top no-repeat;
text-decoration: none;
padding-left: 10px
}

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

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

/* Hide from IE5-Mac \*/
#navigation a, #navigation a span
{
float: none
}
/* End hide */

#navigation a:hover
{
color: #fff;
background: #781351 url(left-tab-hover.gif) left top no-repeat;
padding-left: 10px
}

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

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

#navigation li
{
float: left;
margin: 0;
}
An anchor is not a block level element. It is the display: block; which turns it into this and allows images to appear in an anchor.

[capella07]

eloquentBohemia
Okay, but if I take "display: block;" out all that happens is I get white space between each of the tabs. The image still isn't showing up

[eloquentBohemia]

Sorry, perhaps I wasn't clear.
All I asked is if you had all the code because you posted only some of it at first.
The display:block; must remain.
Did you check to see if all the selctor:values ended with ";"?
I am just noticing now that the code I copy/pasted from the site link you gave have several entries which are not closed properly.
Again, sorry for the misunderstanding.

[Centauri]

Block display is not needed to display a background image - it is only needed if you want to explicitly size the element. If you follow the linked article, block display is not used until the menu is converted to a list, and the background images show up fine before that in the article.

Would be helpful if the page being worked on can be uploaded to some temporary site so we can see what is happening - or zip the whole thing and attach it here.