15 replies [Last post]
Bertje
Bertje's picture
Offline
Enthusiast
Last seen: 12 years 33 weeks ago
Timezone: GMT+2
Joined: 2004-07-02
Posts: 153
Points: 0

I have this line of code:

img {border:solid 1px #fff; padding:1px;} This gives my images a nice double border. One is the 1px white border and the second is the background color showing through the padding.

BUT ... this padding is non existent in IE 5.0 / 5.5 WIN! Is this correct? Is this a known bug? Is there a fix?

Thanks!

Bertje
Bertje's picture
Offline
Enthusiast
Last seen: 12 years 33 weeks ago
Timezone: GMT+2
Joined: 2004-07-02
Posts: 153
Points: 0

padding on IMG does not work in IE 5.5 WIN?

nobody knows???????

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 31 weeks 16 hours ago
Joined: 2004-06-30
Posts: 9668
Points: 801

padding on IMG does not work in IE 5.5 WIN?

Can you show us the rest of the code? That's really not much to go on . . .

Verschwindende wrote:
  • CSS doesn't make pies

Bertje
Bertje's picture
Offline
Enthusiast
Last seen: 12 years 33 weeks ago
Timezone: GMT+2
Joined: 2004-07-02
Posts: 153
Points: 0

padding on IMG does not work in IE 5.5 WIN?

for more info and the code at work check:
http://www.fabriekopzijnfrans.nl/css/imagepadding.html

The entire code below:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>
<head>
	<title>No Border in IE 5.0/5.5</title>
	<style>
	body {background:#333; padding:0; margin:20px;}
	p {font-family:arial,sans-serif; font-size:12px; color:#fff; line-height:15px; width:500px;}
	img {border:solid 1px #fff; padding:10px}
	pre {font-family:courier,sans-serif; font-size:10px; color:#ddd; line-height:15px;}
	</style>
	
</head>

<body>
	
	<img src="images/testpic.jpg" width="139" height="139" alt="testpic - &copy; Christa Renee - http://www.christarenee.com">
	
	<p>The picture above is 139 x 139 px. I've added a border and some padding. See the code below.</p>
	
	<pre>...
img {border:solid 1px #fff; 
     padding:10px}
...</pre>

	<p>Somehow this does not seem to work in IE 5.0/5.5. Is this due to the incorrect rendering of the box in older versions of IE?</p>
	
	<p>
	The image is copyright bij Christa Renee and only used for explainatory purposes.<br />
	To see more of her fantastic work check: http://www.christarenee.com
	</p>		
	
</body>
</html>

Thanks for your time.

P.S. I know this page will not validade because of the inline style and no charset declaration. But that is beside the point here.

Bertje
Bertje's picture
Offline
Enthusiast
Last seen: 12 years 33 weeks ago
Timezone: GMT+2
Joined: 2004-07-02
Posts: 153
Points: 0

padding on IMG does not work in IE 5.5 WIN?

Still nobody?

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 8 years 4 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

padding on IMG does not work in IE 5.5 WIN?

Yes, you are correct. I suspect it may be a side-effect of the box-model used by IE5. Padding is included in the width, and the width is determined by the intrinsic image dimensions or if the dimensions are set specifically the image is stretched/compressed to match those dimensions. Either way, there is no space left for padding.

For a cross browser solution, wrap your image in another element and place the padding on that element.

ABCruz
ABCruz's picture
Offline
Enthusiast
Pilipinas
Last seen: 6 years 25 weeks ago
Pilipinas
Timezone: GMT+8
Joined: 2005-06-16
Posts: 279
Points: 0

padding on IMG does not work in IE 5.5 WIN?

Try doing this:

border : 1px rgb(0,0,0) solid ;     //   in this particular order
padding : 1px

I think, IE is a bit particular on the order of definitions in sort hand. I hope it works-- anyway, it's guaranteed to work in Mozilla and Opera. :oops:

I am a Man of Truth.
I am a Free Human Person.
I am a Peacemaker.

http://www.abcruz.com

Bertje
Bertje's picture
Offline
Enthusiast
Last seen: 12 years 33 weeks ago
Timezone: GMT+2
Joined: 2004-07-02
Posts: 153
Points: 0

padding on IMG does not work in IE 5.5 WIN?

Sorry but that does not seem to work. I guess it is just the difference in rendering the box model (darn).

I also tried not specifying the image width and height, trying to avoid the boxmodel problem, but that does not work either.

So I'm not entirely sure it's the box model or that IE 5 just does not want paddings around it's images. Evil

I'm still open for suggestions though.

DCElliott
DCElliott's picture
Offline
Leader
Halifax, Canada
Last seen: 3 years 24 weeks ago
Halifax, Canada
Timezone: GMT-3
Joined: 2004-03-22
Posts: 828
Points: 0

padding on IMG does not work in IE 5.5 WIN?

<img> elements are normally inline despite being blocks. if you are not using any inline images, it would be safe to add display:block; to the img properties, that may clear up you problem.

DE

David Elliott

Before you ask
LearnXHTML|CSS
ValidateHTML|CSS

Bertje
Bertje's picture
Offline
Enthusiast
Last seen: 12 years 33 weeks ago
Timezone: GMT+2
Joined: 2004-07-02
Posts: 153
Points: 0

padding on IMG does not work in IE 5.5 WIN?

I'm sorry DE. That doesn't seem to work. I guess padding on images is not possible in IE 5/5.5.

Anonymous
Anonymous's picture
Guru

padding on IMG does not work in IE 5.5 WIN?

Bertje wrote:
I know this page will not validade because of the inline style and no charset declaration. But that is beside the point here.
First of all, inline style validates just fine. Second, there is no inline styling in your code anyway. Third, validation is NEVER beside the point.

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 8 years 4 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

padding on IMG does not work in IE 5.5 WIN?

Bertje wrote:
I guess padding on images is not possible in IE 5/5.5.

:?

Isn't that what I said 3 weeks ago.

Bertje
Bertje's picture
Offline
Enthusiast
Last seen: 12 years 33 weeks ago
Timezone: GMT+2
Joined: 2004-07-02
Posts: 153
Points: 0

padding on IMG does not work in IE 5.5 WIN?

yep you did, and I have worked with the solution you suggested. It works just fine but it seems like an needles extra div again in the code. When you have something like a photoalbum with say 20 images you'll need 20 extra div's. Seems like a waste of div's to me. So I was still wondering.

But still I'm not fully satisfied ... Everybody seems to say I guess so and I think it's because of ...

If anyone can say: No not possible because ... see here ...

But I guess this will have to do. *sigh* Sad

DCElliott
DCElliott's picture
Offline
Leader
Halifax, Canada
Last seen: 3 years 24 weeks ago
Halifax, Canada
Timezone: GMT-3
Joined: 2004-03-22
Posts: 828
Points: 0

padding on IMG does not work in IE 5.5 WIN?

<div style="border:solid 1px #fff; 
background: url('http://www.fabriekopzijnfrans.nl/css/images/testpic.jpg') no-repeat 50% 50%;
height:159px;width:159px;" 
title="testpic - &copy; Christa Renee - http://www.christarenee.com"></div>

I guess I learned something new today. IE6 won't render image padding if it is in quirks mode, IE5.5 and previous won't add it at all regardless of doctype. The above is a workaround that works in all browsers I have tried (IE back to 4.01). Whether it is practical for you depends on the number and dimensioning of your images. If they are all the same size then you could set up a .img class with all but the background-image property that is then inlined in the <div>. Incidently, it doesn't have to be a div - it could be an <a> which would be even better since it would provide an automatic link from the thumbnail and allow you to show the alt text as a title. Try the following to see what I mean.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xml:lang="en"
      xmlns="http://www.w3.org/1999/xhtml"
      lang="en">
<head>
	<title>No Border in IE 5.0/5.5</title>
	<style>
	body {background:#333; padding:0; margin:20px;}
	p {font-family:arial,sans-serif; font-size:12px; color:#fff; line-height:15px; width:500px;}
	a.img {display:block;
	height:159px;
	width:159px;
	border:solid 1px #fff;  
	background-repeat:no-repeat; 
	background-position:50% 50%;
	text-decoration:none;}
	pre {font-family:courier,sans-serif; font-size:10px; color:#ddd; line-height:15px;}
	</style>
	
</head>

<body>
	
	<a href="#" class="img" style="background-image: url('http://www.fabriekopzijnfrans.nl/css/images/testpic.jpg')" 
	title="testpic - &copy; Christa Renee - http://www.christarenee.com"></a>
	
	<p>The picture above is 139 x 139 px. It is actually a link and will work in all browsers.</p>
	
	<p>
	The image is copyright bij Christa Renee and only used for explainatory purposes.<br />
	To see more of her fantastic work check: http://www.christarenee.com
	</p>		
	
</body>
</html>

DE

David Elliott

Before you ask
LearnXHTML|CSS
ValidateHTML|CSS

Bertje
Bertje's picture
Offline
Enthusiast
Last seen: 12 years 33 weeks ago
Timezone: GMT+2
Joined: 2004-07-02
Posts: 153
Points: 0

padding on IMG does not work in IE 5.5 WIN?

@ DE, you genius, I could use the <a> ofcourse. And I guess it is final now. No padding on images in IE unless in standard mode.

Thanks a lot you guys! All of you.

DCElliott
DCElliott's picture
Offline
Leader
Halifax, Canada
Last seen: 3 years 24 weeks ago
Halifax, Canada
Timezone: GMT-3
Joined: 2004-03-22
Posts: 828
Points: 0

More fun with *beep* and Jane

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
    <title>Thumbnail example</title>
    <style type="text/css">
    /*<![CDATA[*/
    body {padding:0; margin:20px;
         font:85% verdana, tahoma, helvetica,arial, san-serif;
         background:#333; 
         color:#fff;}
    p { font-size:1em; color:#fff; }
    a.thumb {
         display:block;
         position:relative;
         float:left;
         width:180px;
         margin:10px;
         padding:10px;
         border:solid 1px #fff; 
    text-decoration:none;
         color:#fff;
         text-align:center;}
         * html a.thumb {
         width:200px;/*IE5.x*/
         w\idth:180px;/*IE6*/}
         a.thumb img {
         display:block;
         border:0 ;
         margin:0 auto 10px;
         -moz-opacity:0.8;
    filter:alpha(opacity=80)}
         a.thumb:hover img {
         -moz-opacity:1;
    filter:alpha(opacity=100)}
    a.thumb span {
         font-size:.8em;}
    /*]]>*/
    </style>
</head>

<body>
    <a href="#" class="thumb">
        <img src="http://www.fabriekopzijnfrans.nl/css/images/testpic.jpg" 
         alt="testpic - &copy; Christa Renee - http://www.christarenee.com"
         title="testpic - &copy; Christa Renee - http://www.christarenee.com" />
     <span>This is a picture caption</span><br />
    <br />
     <span>The image is copyright bij Christa Renee and only used
    for explainatory purposes. To see more of her fantastic work
    check: http://www.christarenee.com</span>
    </a> 
    <a href="#" class="thumb">
        <img src="http://www.fabriekopzijnfrans.nl/css/images/testpic.jpg" width="100%"
         alt="testpic - &copy; Christa Renee - http://www.christarenee.com"
         title="testpic - &copy; Christa Renee - http://www.christarenee.com" />
     <span>This is a picture caption</span><br />
    <br />
     <span>Notice the effect of using width="100%" on the image.</span>
    </a>
</body>
</html>

Just to show there is no limit to the tricks you can do with CSS for thumbnails.

DE

David Elliott

Before you ask
LearnXHTML|CSS
ValidateHTML|CSS