CSS ul / Link Problem

[dezinerite]

I'm relatively new to CSS...

I'm trying to create a sidebar menu using <ul id="menu"> instead of <div id="menu"> and even if the images do show up on both FF & IE, the <a href="link"> for each button won't work (like if I move my cursor over the buttons, nothing happens). Can someone help me identify the problem? Thanks.

The HTML part looks a bit like this (I'm just replacing the id names):

<ul id="menu">
<li id="home"><a href="home.html"></a></li>
<li id="about"><a href="about.html"></a></li>
<li id="contact"><a href="contact.html"></a></li>
</ul>

The CSS part looks a bit like this:

#home, #home a {
		margin: 0 auto;
		padding: 0px;
		border: none;
		text-indent: -10000px;
		background-image: url(images/home.png);
		background-repeat: no-repeat;
		height: 50px;
		width: 300px;
}

#home a:hover {
		background-image: url(images/home_on.png);
}

 

[Kate]

There's nothing within your <a> tags. Perhaps you could try putting some whitespace.

 

[Epic]

Add "display: block;" to your CSS for #home a.

Maybe...

 

[shockie]

as kate said, you'll need something between your <a> tags. you should probably put an image there (home.png maybe?). if you go through the thought process, what you want to link is the image home.png itself, unless you plan to put text on top of the image. otherwise, the image isn't really a background; it's the foreground!

 

[dezinerite]

Add "display: block;" to your CSS for #home a.

Maybe...

It worked. :D Thanks so much!!! :sold: