How can I workaround this CSS anomaly? -
i have think pretty basic css, , behaves differently in ff4 , ie8.
the css in question this:
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 { 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 looks this:
<div class='showme'> <a href='one'>one</a> <a href='two'>two</a> ... </div>
the problem is, padding not consistently displayed, in ie8.
in firefox, works expect.
working example:
http://jsbin.com/ogosa4
using above working demonstration, if resize window see padding on "leading" element on each line within div, change 0 non-zero.
how can fix this?
if add display: inline-block;
div.showme {}
padding applied in ie also, has impact line height , may need specify additional margin's
Comments
Post a Comment