IE 6 doesn't respect padding

[mgm_03]

Hi all,

I've created an image gallery with a 1px border and 5px padding around each thumbnail. Works fine in Safari but IE6 doesn't see the padding:5px; style. So, the border is right up against the image.

I've tried using an external style sheet and inline styles:

<img style="padding:5px;border:1px solid #cccccc;" src="'.$thumb_path.$row->thumb.'">

...doesn't work? Any ideas are appreciated! TIA

[fish_eye]

Boring I know but try { padding-left: 5px; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; }

[mgm_03]

Thanks for trying to help....but it didn't work.

I really am surprised this CSS style doesn't work properly. This is one of those instances when I realize that I'll never be a CSS zealot when it comes to abandoning tables.

It works fine in IE5 on the Mac.

[fish_eye]

Try putting a div around it with the style:
<div style="padding:5px;border:1px solid #cccccc;"><img src="'.$thumb_path.$row->thumb.'"></div>

Also you could try hspace and vspace? but I've not tried combining these with css.

Warning - I am no CSS guru either :)

By the way - In most cases CSS works fine - it's IE that doesn't.

[Span]

Padding is used for elements to make a space between the border and the contents. Doesn't work for images.

Use margins.

[mgm_03]

thanks for the feedback....it works correctly now using a <div>.

this is one of those instances where I realize I probably won't become a CSS zealot because of the inconsistency from one browser (and version) to the next. In this case, Safari and IE5 on Mac were too "forgiving" by allowing me to do something I should be able to do.

[photon]

<img> is an inline tag, so margins and padding only apply to the left and the right. Only block elements have top and bottom as well.

An alternative to using a <div> around the image would be to make the image itself a block element with

img {display:block;}

.

[DrDoc]

And... use a full doctype ;)

[fish_eye]

mgm_03. You (and I both) might want to check out this current WebmasterWorld thread on CSS [webmasterworld.com].