CSS Background Image link

Question

Linking a background image with CSS is giving me so me issues. They seem pretty simple but I can't quite get around them:

I have list items for my main menu:

<div id="menuContainer">
 <ul id="menu">
 <a href="#"><li id="home" title="Home" alt="Home">Home</li></a>
 <a href="#"><li id="current" title="Current Students" alt="Current Students">Current Students</li></a>
 <a href="#"><li id="prospective" title="Prospective Students" alt="Prospective Students">Prospective Students</li></a>
 <a href="#"><li id="facultyStaff" title="Faculty & Staff" alt="Faculty & Staff">Faculty & Staff</li></a>
 <a href="#"><li id="visitors" title="Visitors" alt="Visitors">Visitors</li></a>
 </ul>

my css sets the li to inline-block and gives defines the id's with a size and background image accordingly. I had to use zoom: 1; and *display: inline; for IE to work and everything shows up fine in IE for that now.

When I use text-indent: -9999px; to remove the text and leave the image, Chrome and Firefox works fine with this. However, in IE the whole li shifts the number of pixels listed.

Finally, In Chrome the entire image is the link, in IE and Firefox only the text is the link so with no text the menu has no function.

Any ideas?

Answer 1

You are using syntactically incorrect HTML. You can't wrap an <a> around a <li>. While fixing this may not necessarily make your problem go away, it will probably ensure that every browser behaves the same way.

You're not very clear about what you want to achieve, and what your menu looks like. If you want the whole area of the <li> to become clickable, you're probably best off giving the <a> a display: inline-block and fixed dimensions.

If you need more detailed answers, you may want to give us an online example.

Answer 2

First well form the html, then try your css again.

<ul id="menu">
   <li id="home" title="Home" alt="Home"><a href="#">Home</a></li>
   <li id="current" title="Current Students" alt="Current Students"> <a href="#">Current Students</a></li>
   <li id="prospective" title="Prospective Students" alt="Prospective Students"><a href="#">Prospective Students</a></li>
   <li id="facultyStaff" title="Faculty & Staff" alt="Faculty & Staff"><a href="#">Faculty & Staff</a></li>
   <li id="visitors" title="Visitors" alt="Visitors"> <a href="#">Visitors</a></li>
</ul>

Answer 3

it's better to use line-height instead of text-indent. you need to use image replacement technique. like this

<ul id="menu">
  <li><a href="#" title=""><span>Home</span></a></li>
</ul>

and CSS

ul#menu li a { width: 100px; height: 20px; background: url(../images/myimage.gif) no-repeat 0 0; }
ul#menu li span { line-height: 200px; display: block; }