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.

enter image description here

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

Popular posts from this blog

c# - how to write client side events functions for the combobox items -

exception - Python, pyPdf OCR error: pyPdf.utils.PdfReadError: EOF marker not found -