Lost padding! [Archive] - Dynamic Drive Forums

View Full Version : Lost padding!

Rain Lover

07-16-2011, 11:46 AM

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

coothead

07-17-2011, 07:48 AM

Hi there Rain Lover,

I have always used two divs for that kind of layout, as it appeared to be the more reliable. ;)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>

<base href="http://lh3.googleusercontent.com/-hUXeHq5OxEo/Thc7hFFv3gI/AAAAAAAAABQ/Yh7omR8iwzI/s800/">

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english">
<meta http-equiv="Content-Style-Type" content="text/css">

<title>untitled document</title>

<style type="text/css">
#container {
width:300px;
background-color:#0ff;
overflow:auto;
}
#container div {
padding:10px 7px;
width:516px;
overflow:hidden;
}
#container img {
float:left;
margin:0 3px;
}
</style>
</head>

<body>

<div id="container">
<div>
<img src="thumb1.jpg" alt="">
<img src="thumb1.jpg" alt="">
<img src="thumb1.jpg" alt="">
<img src="thumb1.jpg" alt="">
<img src="thumb1.jpg" alt="">
<img src="thumb1.jpg" alt="">
</div>
</div>

</body>
</html>

But knowing you, I guess that you will come back and say that using a fixed width is unacceptable
as the number of thumbnails will always remain undetermined. :D

So if my assumption is correct, try this little modification to your code...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>

<base href="http://lh3.googleusercontent.com/-hUXeHq5OxEo/Thc7hFFv3gI/AAAAAAAAABQ/Yh7omR8iwzI/s800/">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english">
<meta http-equiv="Content-Style-Type" content="text/css">

<title>untitled document</title>

<style type="text/css">
div {
width:300px;
height:82px;
padding-left:20px;
overflow:auto;
white-space:nowrap;
background-color:#0ff;
}
#last-image {
padding-right:20px;
}
</style>

</head>
<body>

<div>
<img src="thumb1.jpg" alt="">
<img src="thumb1.jpg" alt="">
<img src="thumb1.jpg" alt="">
<img src="thumb1.jpg" alt="">
<img src="thumb1.jpg" alt="">
<img id="last-image" src="thumb1.jpg" alt="">
</div>

</body>
</html>

coothead

Rain Lover

07-17-2011, 02:09 PM

Hi there Rain Lover,

But knowing you, I guess that you will come back and say that using a fixed width is unacceptable
as the number of thumbnails will always remain undetermined. :D

So if my assumption is correct, try this little modification to your code...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>

<base href="http://lh3.googleusercontent.com/-hUXeHq5OxEo/Thc7hFFv3gI/AAAAAAAAABQ/Yh7omR8iwzI/s800/">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english">
<meta http-equiv="Content-Style-Type" content="text/css">

<title>untitled document</title>

<style type="text/css">
div {
width:300px;
height:82px;
padding-left:20px;
overflow:auto;
white-space:nowrap;
background-color:#0ff;
}
#last-image {
padding-right:20px;
}
</style>

</head>
<body>

<div>
<img src="thumb1.jpg" alt="">
<img src="thumb1.jpg" alt="">
<img src="thumb1.jpg" alt="">
<img src="thumb1.jpg" alt="">
<img src="thumb1.jpg" alt="">
<img id="last-image" src="thumb1.jpg" alt="">
</div>

</body>
</html>

coothead

You're so sweet and know me too well! LOL! :D
Your solution is simple and reliable although I'd prefer the image tags to have the same attributes.

Thanks so much anyway! :)

coothead

07-17-2011, 02:28 PM

Hi there Rain Lover,

If you are only concerned with modern browser rendering, then use this...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>

<base href="http://lh3.googleusercontent.com/-hUXeHq5OxEo/Thc7hFFv3gI/AAAAAAAAABQ/Yh7omR8iwzI/s800/">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english">
<meta http-equiv="Content-Style-Type" content="text/css">

<title>untitled document</title>

<style type="text/css">
div {
width:300px;
height:82px;
padding-left:20px;
overflow:auto;
white-space:nowrap;
background-color:#0ff;
}
div img:last-of-type {
padding-right:20px;
}
</style>

</head>
<body>

<div>
<img src="thumb1.jpg" alt="">
<img src="thumb1.jpg" alt="">
<img src="thumb1.jpg" alt="">
<img src="thumb1.jpg" alt="">
<img src="thumb1.jpg" alt="">
<img src="thumb1.jpg" alt="">
</div>

</body>
</html>

coothead

Rain Lover

07-17-2011, 02:49 PM

Dear coothead,

Can I add the style or last-image id to the last image tag using JavaScript?

coothead

07-17-2011, 03:07 PM

Hi there Rain Lover,

personally, I would advise against it.

Many users have javascript disabled.

But, if you are still interested, here is the code for it...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>

<base href="http://lh3.googleusercontent.com/-hUXeHq5OxEo/Thc7hFFv3gI/AAAAAAAAABQ/Yh7omR8iwzI/s800/">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english">
<meta http-equiv="Content-Style-Type" content="text/css">

<title>untitled document</title>

<style type="text/css">
div {
width:300px;
height:82px;
padding-left:20px;
overflow:auto;
white-space:nowrap;
background-color:#0ff;
}
.last {
padding-right:20px;
}
</style>

<script type="text/javascript">
function init(){
var i=document.getElementById('thumb-container').getElementsByTagName('img');
i[i.length-1].className='last';
}
window.addEventListener?
window.addEventListener('load',init,false):
window.attachEvent('onload',init);
</script>

</head>
<body>

<div id="thumb-container">
<img src="thumb1.jpg" alt="">
<img src="thumb1.jpg" alt="">
<img src="thumb1.jpg" alt="">
<img src="thumb1.jpg" alt="">
<img src="thumb1.jpg" alt="">
<img src="thumb1.jpg" alt="">
</div>

</body>
</html>

coothead

Rain Lover

07-19-2011, 01:31 PM

Dear coothead,

I finally decided to use a CSS approach, i.e. your first post, with a little change:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>

<base href="http://lh3.googleusercontent.com/-hUXeHq5OxEo/Thc7hFFv3gI/AAAAAAAAABQ/Yh7omR8iwzI/s800/">

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english">
<meta http-equiv="Content-Style-Type" content="text/css">

<title>untitled document</title>

<style type="text/css">
#container {
width:300px;
height:97px;
background-color:#0ff;
overflow-x:auto;
overflow-y:hidden;
}
#container div {
padding:10px 7px;
float:left;
margin-right:-9999em;
}
#container img {
float:left;
margin:0 3px;
}
</style>
</head>

<body>

<div id="container">
<div>
<img src="thumb1.jpg" alt="">
<img src="thumb1.jpg" alt="">
<img src="thumb1.jpg" alt="">
<img src="thumb1.jpg" alt="">
<img src="thumb1.jpg" alt="">
<img src="thumb1.jpg" alt="">
</div>
</div>

</body>
</html>

griffinwebnet

07-21-2011, 06:47 PM

Personally i prefer not to use shorthand property for padding:

padding: 0px 0px 0px 0px;

just because for some reason, IE always seems to screw it up somehow. It IS a pain in the rear, but i always use :

padding-top: 0px;
padding-right: 0px
padding-bottom: 0px;
padding-left: 0px;

-JL Griffin

coothead

07-21-2011, 07:33 PM

Hi there griffinwebnet,

I am not sure what your post has to do with this thread. :confused:

Nevertheless if your preference is for real shorthand, then don't add units to zero values. ;)

This means that this...

padding: 0px 0px 0px 0px;

...could become this...

padding:0;

coothead