Misha Moroshko Misha Moroshko - 6 months ago 14
HTML Question

Why there is no bottom padding in Internet Explorer 8?

Why in the following code there is no bottom padding in Internet Explorer 8 ?

HTML:

<div id="wrapper">
<div class="a">Hello</div>
<div class="a">Stack</div>
<div class="a">Overflow</div>
</div>


CSS:

#wrapper {
border: 1px solid red;
padding: 10px;
height: 30px;
overflow: auto;
}
.a {
border: 1px solid black;
}


Any workarounds for browser compatibility ?

Answer

browser interpretation of the specs?

A value of 'scroll' would tell UAs that support a visible scrolling mechanism to display one so that users could access the clipped content.

Taken literally that means they, the browsers, can please themselves and they only have to provide access to the content not the padding or borders ;)

a compatible workaround:

#scroller {
    border: 1px solid red;
    height: 50px;
    overflow: auto;
}

.wrap {padding: 10px;}

.a {
    border: 1px solid black;
}

HTML:

<div id="scroller">
  <div class="wrap">
    <div class="a">Hello</div>
    <div class="a">Stack</div>
    <div class="a">Overflow</div>
  </div>
</div>
Comments