Menu
I can't get IE padding around my <a> tags to work correctly. This only works in Firefox, Safari, Chrome, but not IE - please help!
My simplified HTML code looks like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<div id="mydiv">
<table>
<tr>
<td>
<a style="padding: 20px; background: red;" href="#">Some link</a>
</td>
</tr>
</table>
</div>
</html>
Firefox Result (which is what I want):
Internet Explorer (7) Result (incorrect padding):
(broken image)
How can I fix this to work in IE? Many thanks in advance!
593
For elements which are naturally inline, IE requires that the element have the display: inline-block; css property before it will apply properties like padding. So just add display: inline-block to your anchor element.
<a style="display: inline-block; padding: 20px; background: red;" href="#">Some link</a>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
