homepage Welcome to WebmasterWorld Guest from 54.197.130.16
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
IE Ignores Bottom Padding with overflow:auto;
tidalwav1




msg:4284276
 6:54 pm on Mar 19, 2011 (gmt 0)

IE 8 and 9 (haven't tried earlier) seem to omit rendering bottom padding inside a div with overflow:auto, while the latest Firefox and Chrome work as expected. Try the following example:



<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="language" content="en" />
<title>IE Padding Test</title>
</head>
<body>
<div style="width:400px; height:400px; overflow:auto; padding:40px;">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<br /><br />
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<br /><br />
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<br /><br />
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<br /><br />
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<br /><br />
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</body>
</html>


Looking around the web, I found a possible solution here:

[mdj.us...]

That site essentially says to add this code to your affected page:


<!--[if IE]>
<style type="text/css">#yourdiv {padding-bottom:40px;overflow:visible;overflow-x:auto;overflow-y:hidden}</style>
<![endif]-->


The problem with this approach is that it causes padding to be incorrectly rendered below the overflow scrollbar, instead of inside it (as expected) like other browsers do.

Any thoughts or solutions around this?

 

SuzyUK




msg:4284329
 9:54 pm on Mar 19, 2011 (gmt 0)

Quick look around says it's one of those x-browser differences that occur because the specs aren't clear, it is only IE8 (and you say 9 too), 7 is "ok" though previously I think Safari 3 also treated it like IE8 as did a Gecko, there may be others.

I found a complex solution involving an absolutely positioned div.. but I think to keep it simple and stable and working in all browsers regardless of their mood, lol, is to simply nest a div in the scrolling one and put the padding on the nested div, not too bad a solution as the height/width can then be more accurately controlled on the scrolling div. Apparently, though I haven't measured this, the bottom padding (and right padding can be affected too actually) that does get rendered on an overflowing div is not always the same amount x-browser or versions either so this way is likely a good fallback for a while.. that's my thoughts anyway

a summary:


HTML:
<div id="scroll"><div>
.. loads of content..
</div></div>

CSS:
#scroll {
width: 400px;
height: 600px;
overflow:auto;
}

#scroll > div {
padding: 100px 40px;
}

tidalwav1




msg:4284448
 4:33 am on Mar 20, 2011 (gmt 0)

Thanks for your insights, this worked well.

Only other solution I had thought of was adding a div with a specific class at the bottom of the page, then styling that class with a fixed height inside an "if IE" conditional comment.

Your solution is much more elegant - thank you!

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved