Welcome to WebmasterWorld Guest from 54.242.63.214

Forum Moderators: not2easy

Message Too Old, No Replies

CSS Padding on an image works in Firefox but not IE

     

dcaspian

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

5+ Year Member



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

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

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



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

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

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



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!
 

Featured Threads

Hot Threads This Week

Hot Threads This Month