Background image in an <a> element keeping the link from working?

HTML & CSS
1

I’m so confused!

I do this all the time: create a display:block link in my header with fixed height and width, the company’s logo as a background image, and the text-version of the logo displayed off-page with a negative margin. And, it always works until now! It’s as if the background image is messing with the link!

Here’s the url: Bar Beverage Control | Liquor Inventory, Auditing and Management System. | Bar Beverage Control | The Bar Management and Inventory Solution

You’ll see I added a background:gray to the element so you can see that when you mouseover the logo’s padding the link works, but when you mouseover the logo itself there is no link. Why?

Here’s the code:

body.custom div#header div#top.header-link-text a {
    background: url("custom/images/header.gif") no-repeat scroll left top gray;
    display: block;
    float: left;
    height: 64px;
    padding: 0 0 5px;
    text-indent: -9000px;
    width: 394px;
}

And here’s an image so we’re on the same page:

Any ideas?

2

You used negative margin-top to pull this ⇓ up and over your link:

body.custom.header-fluid div#navigation-container {
    background: none repeat scroll 0 0 transparent;
    display: block;
    float: left;
    margin: -60px auto 0;
    }

I haven’t tested, but I think you should put this bit ahead of the link, and float it right.

cheers,

gary

3

You should be able to adjust the z-index if you don’t want to change the html around.

Something like:


body.custom.header-fluid div#navigation-container {
  background: none;
  display: block;
  float: left;
  margin: -60px auto 0;
[B]  position: relative;
  z-index: 1;[/B]
}

div#header {
  clear: both;
  margin: 0 auto;
  [B]position: relative;[/B]
  width: 960px;
  [B]z-index: 2;
[/B]}

Only tested in Firebug so check IE is ok with this.

4

You guys rule! Paul, I went your route and problem solved!