CODEWITHSUNDEEP
cssbackgroundhyperlink
dcp3450
dcp3450

Reputation: 11187

CSS Background Image link

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?

Upvotes: 1

Views: 2450

Answers (3)

pixeltocode
pixeltocode

Reputation: 5308

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; }

Upvotes: 0

Gabe
Gabe

Reputation: 50493

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>

Upvotes: 1

Pekka
Pekka

Reputation: 449395

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.

Upvotes: 4

Related Questions