CSS Padding on an image works in Firefox but not IE

[dcaspian]

Good morning,

I am attempting to create a 'border' around images in my site by applying a background image and padding.

Here is the CSS code:

{ background:url(../images/homePattern.gif) repeat top left; padding: 10px; }

In Firefox, it displays properly: Each image in the site has a background image that extends 10px (the padding)on each side, as intended.

In Internet Explorer, the padding doesn't work.

Is there an available workaround?

Thanks in advance,
D

[BlobFisk]

Hi dcaspian,

This may be due to the different box models that IE and FF use - there's plenty of great articles on this available at the end of a search!

Try using margin rather than padding.

HTH

[swa66]

I'm not sure just how IE messes up, but a quick and dirty solution is to add a wrapping div to your html. Anyway that's what I use to create borders around content images as IE did indeed do funny things with most other efforts I did years ago. I never dug deeper what's exactly wrong with IE, so others might have better solutions!