Geek Answers Handbook

How can I get around this CSS anomaly?

I have what I think is pretty simple css and it behaves differently in FF4 and IE8.

This CSS request is as follows:

div.showme { border: 1px dotted blue; position: absolute; top :10px; bottom :10px; left: 1%; right: 33%; overflow: auto; padding: 0.8em 1em 0.8em 1em; line-height:1.75em; } div.showme a { padding: 0em 5px 0em 5px; margin: 0; white-space: nowrap; color: #FF00FF; background-color:#E6E6FA; border: 1px solid grey; padding: 0em 4px 0em 4px; } div.showme a:link { color: blue; } div.showme a:visited { color: #1E90FF; } div.showme a:active { color: red; }

The relevant HTML is as follows:

 <div class='showme'> <a href='one'>one</a> <a href='two'>two</a> ... </div>

The problem is that the padding does not appear sequentially in IE8.

enter image description here

In Firefox, it works as I expected.

working example:
http://jsbin.com/ogosa4

Using the above working demo, if you resize the window, you will see the registration on the "leading" element in each line in the div, change from zero to nonzero.

How can i fix this?

+7
source share
2 answers

If you add display: inline-block; to your div.showme a {} , the addition will be applied in IE, but it has some effect on the line height, and you may need to specify an additional margin

+2
source

I also saw this behavior in Opera. Indent goes to the top line. Try display: inline-block and white-space:nowrap if there are a few words in the link ...

You can safely use inline-block in IE7 with inline tags.

0
source

More articles:


All Articles