CSS: width of a link doesn't change by setting the width attribute

I have this construction:

<a onclick="toggle_media_box(); return false;" href="#" class="media_link">
  <div id="media_link" class="media_link"></div>
</a><br />

#media_link {
  background-image: url("/images/media.png");
}

.media_link {
  width: 445px;
  height: 200px;
}

Size of the picture is 445px (but was 620px). All other links like this have the size 620px.

In the IE e开发者_高级运维verything works fine and the link is 445px of size. But in Firefox and Chrome the link is still 620px wide. The div has the right size of 445px.

What to do? The <a> tag must have the size of 445px.

Interesting thing is, the link does hover up to the size of 445px, but is clickable up to the size of 620px.

Yours Joern.

Then <a> tag is an inline element. Therefore it's width is determined by the length of the text within the tag. To fix this you can add display:block; to your .media_link class and it will perform as expected.

You need float: left or display: block or (ideally) display: inline-block on the a:

.media_link {
    display: inline-block
}

Your usage of class="media_link" twice and #media_link is confusing. Using a <br /> is not required - you can replace that with display: block.

I recommend changing to this: http://jsfiddle.net/Yg4YN/2/

<a onclick="toggle_media_box(); return false;" href="#" class="media_link">
    <span class="media_span"></span>
</a>

.media_link, .media_span {
    display: block;
    width: 445px;
    height: 200px;
}
.media_span {
    background-image: url("/images/media.png");
}

Your HTML code is currently invalid and you should put the anchor <a> inside the <div> rather than the other way around.

Once you've got your HTML the right way round, you can set your anchor to display:block and size it as required.