Padding around <a> tags not working in Internet Explorer
css, internet-explorer
Solution
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>
Problem
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!