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:

Code:

<!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.

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">
#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.

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

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

Originally Posted by coothead

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.

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

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!

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...

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;
 }
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...

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 {
    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:

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">
#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:

Code:

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 :

Code:

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.

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

This means that this...

Code:


    padding: 0px 0px 0px 0px;

...could become this...

Code:


    padding:0;

coothead

Thread: Lost padding!

Thread Tools

Search Thread

Lost padding!

The Following User Says Thank You to coothead For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions