homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

CSS Padding on an image works in Firefox but not IE

 6:29 pm on May 21, 2008 (gmt 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,



 9:19 am on May 22, 2008 (gmt 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.



 8:07 pm on May 22, 2008 (gmt 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!

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved