| Lost padding!
|
Rain_Lover
msg:4340296 | 11:57 am on Jul 16, 2011 (gmt 0) |
Hi,
I tried the following in IE8 and the latest versions of Firefox and Opera:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<style type="text/css">
div
{
background-color:#00FFFF;
width:300px;
height:82px;
overflow:auto;
white-space:nowrap;
padding:0 20px;
}
</style>
</head>
<body>
<div>
<img src="http://lh3.googleusercontent.com/-hUXeHq5OxEo/Thc7hFFv3gI/AAAAAAAAABQ/Yh7omR8iwzI/s800/thumb1.jpg" alt="">
<img src="http://lh3.googleusercontent.com/-hUXeHq5OxEo/Thc7hFFv3gI/AAAAAAAAABQ/Yh7omR8iwzI/s800/thumb1.jpg" alt="">
<img src="http://lh3.googleusercontent.com/-hUXeHq5OxEo/Thc7hFFv3gI/AAAAAAAAABQ/Yh7omR8iwzI/s800/thumb1.jpg" alt="">
<img src="http://lh3.googleusercontent.com/-hUXeHq5OxEo/Thc7hFFv3gI/AAAAAAAAABQ/Yh7omR8iwzI/s800/thumb1.jpg" alt="">
<img src="http://lh3.googleusercontent.com/-hUXeHq5OxEo/Thc7hFFv3gI/AAAAAAAAABQ/Yh7omR8iwzI/s800/thumb1.jpg" alt="">
<img src="http://lh3.googleusercontent.com/-hUXeHq5OxEo/Thc7hFFv3gI/AAAAAAAAABQ/Yh7omR8iwzI/s800/thumb1.jpg" alt="">
</div>
</body>
</html>
There's no padding on the right. What am I missing?
Many thanks in advance!
Mike
|
Paul_o_b
msg:4340309 | 1:26 pm on Jul 16, 2011 (gmt 0) |
The inner content overflows the box and sits on top of the padding. The scrollbar will only move the content until it fits in the box. It will not scroll it past its own padding.
If you applied the right padding (or margin) to the image itself then it would scroll further into view to account for the inner content.
It's easier explained with a demo.
set the width to zero and add 200px right padding. the width of the scroll box is now only 200px and the inner contents overflows the padding in the box so a scrollbar is a added but will only scroll the inner content until it fits into the box.
div {
background-color:#00FFFF;
width:0;/* no width */
height:82px;
overflow:auto;
white-space:nowrap;
padding:0 200px 0 0;/* 200px right padding */
}
The implementation of overflow according to the specs is UA dependent so there may be difference between browser implementations.
|
|
|
