can't get image tabs to appear with css.

[sachi]

this is my site. i can't get my image navigational tabs to appear at all on the site. I need for it to appear below the logo and above the red masthead. this is my first time trying to experiment with image based tabs rather than text so I really don't know what I"m doing here. Any help would appreciated.

	<div id="navmenu">
		<ul id="navmenu">
			<li class="home"><a href="#"></a></li>
			<li class="ec"><a href="#"></a></li>
			<li class="shipping"><a href="#"></a></li>
			<li class="other"><a href="/#"></a></li>
			<li class="boxes"><a href="#"></a></li>
			<li class="contact"><a href="#"></a></li>
		</ul>
	</div>

#navmenu {
	float: left;
	position: relative;
	height: 50px;
	z-index: 3;
	clear: both;
}

	
#navmenu ul {
	float: left;
	list-style-type: none;
	display: inline;
	position: absolute;
	top: 43px;
	left: 60px;
	}
	
#navmenu ul li {
	float: left;
	padding: 0;
	margin: 0;
	display: inline;
	}
	
#navmenu ul li a {
	display: block;
	height: 30px;
	}
	
#navmenu ul li a.home {
	background: transparent url(test/drop2/images/tabs/static/home.jpg) no-repeat scroll left top;
	height: 27px;
	
	}
	
#navmenu ul li a.ec {
	background: transparent url(test/drop2/images/tabs/static/ec.jpg) no-repeat scroll left top;
	height: 27px;
	width: 66px;
	}

[Tomassi]

You should use: background-image:url(your image); etc.

and I don't think the path to the image is correct

[sachi]

I am using background-image. I just happened to lump them all into one line of code rather than seperate it. The path is definitely correct.

[Costin Trifan]

	<div id="navmenu">
		<ul id="navmenu">
			<li class="home"><a href="#"></a></li>
			<li class="ec"><a href="#"></a></li>
			<li class="shipping"><a href="#"></a></li>
			<li class="other"><a href="/#"></a></li>
			<li class="boxes"><a href="#"></a></li>
			<li class="contact"><a href="#"></a></li>
		</ul>
	</div>

I see your links are empty, have you tried to add some content to your links? something like:

...
<li class="home"><a href="#">Menu Item 1</a></li>
...

[sachi]

Unfortunately, it doesn't do much but help you show where my text is. I put it up anyway.

Originally Posted by Costin Trifan

	<div id="navmenu">
		<ul id="navmenu">
			<li class="home"><a href="#"></a></li>
			<li class="ec"><a href="#"></a></li>
			<li class="shipping"><a href="#"></a></li>
			<li class="other"><a href="/#"></a></li>
			<li class="boxes"><a href="#"></a></li>
			<li class="contact"><a href="#"></a></li>
		</ul>
	</div>

I see your links are empty, have you tried to add some content to your links? something like:

...
<li class="home"><a href="#">Menu Item 1</a></li>
...

[Costin Trifan]

I can see them, but they're displayed as block.
Try to remove the float attribute from the UL and LI and add(or leave) only the "display: inline" attribute set on the LI.

btw, you have set the same ID for the DIV and UL -> navmenu.
that's not a good practice...

oh, and set the width to 100% to the navmenu DIV, and also the margin: 0; padding: 0;

[sachi]

nope- none of that works either.

[Costin Trifan]

Then I suggest you to verify your page structure and your stylesheet file again, because there you'll find your problem.

[Boogle]

You have position:relative and position:absolute used for elements next/within each other... I don't think that's good... try to remove the positioning attributes?

[Tomassi]

http://apatalk.com/test/drop2/homepa...tatic/home.jpg

I'm not 100% positive but I think thats the path you give to your background image..