CODEWITHSUNDEEP
css
Joern Akkermann
Joern Akkermann

Reputation: 3622

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

Upvotes: 7

Views: 12051

Answers (3)

thirtydot
thirtydot

Reputation: 228302

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

Upvotes: 5

Jamie Dixon
Jamie Dixon

Reputation: 54021

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.

Upvotes: 1

Jared
Jared

Reputation: 12524

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.

Upvotes: 17

Related Questions