Welcome to WebmasterWorld Guest from 54.196.214.35

Forum Moderators: not2easy

Message Too Old, No Replies

CSS Padding on an image works in Firefox but not IE

     
6:29 pm on May 21, 2008 (gmt 0)

New User

5+ Year Member

joined:Jan 30, 2008
posts: 16
votes: 0


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

9:19 am on May 22, 2008 (gmt 0)

Senior Member

WebmasterWorld Senior Member blobfisk is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Feb 25, 2002
posts:3185
votes: 0


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

8:07 pm on May 22, 2008 (gmt 0)

Senior Member

WebmasterWorld Senior Member swa66 is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Aug 7, 2003
posts:4783
votes: 0


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!