CSS: link width does not change by setting width attribute

Question

I have this construct:

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

Image size - 445 pixels (but it was 620 pixels). All other links like this are 620px in size.

In IE, everything works fine, and the link is 445 pixels in size. But in Firefox and Chrome, the connection still has a width of 620 pixels. The size of the div is 445px.

What to do? The <a> tag must be 445px in size.

Interestingly, the link really freezes up to 445 pixels, but is available for clicks up to 620 pixels.

Your joern.

Answer 1

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

Answer 2

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

 .media_link { display: inline-block } 

---

Your use of class="media_link" twice and #media_link confusing. Using <br /> not required - you can replace it 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"); } 

Answer 3

Your HTML is currently invalid and you must anchor the <a> inside the <div> and not vice versa.

Once you get your HTML code back on track, you can set the binding to display:block and size as needed.