Welcome to WebmasterWorld Guest from 107.22.126.144

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!
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members