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

Question

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 everything 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.

Answer 1

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.

Answer 2

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