Question

http://www.guygar.com/test/android/index.html

if you click “all the things i wanna say” it loads some text through AJAX.

the div being:

#androidDiv
{
    background-color:#C93;
    color:#FFF;
    width:260px;
    height:321px;
    padding:5px;
    margin-right:10px;
    float:left;
    font-family:Arial, Helvetica, sans-serif;
    font-size:10px;
    border:1px solid black;
    overflow:auto;
    overflow-y: scroll;
    overflow-x: hide;
    text-align:justify;
}

i have tested it FF, Chrome, Safari and they all display correctly. but in IE9 for some reason there is no padding at the bottom of the text!

any ideas as to why this is?

FYI: this is a IE9 bug. in certain screen resolutions IE introduces the wrong border to divs.

Answer 1

Wrap the text inside the div in a <p> and do the padding (& margin if applicable) on that

#androidDiv p {
padding: 0 0 5px 0;
}