Stupid IE bug with padding on an image

HTML & CSS
1

Hi,

I’ve got a bit of an annoying CSS bug in IE;

http://designerstaticfiles.com.nmsrv.com/test.html

The “corner” is just a basic image, and it shows up perfectly in FF… but in IE there is a few pixels padding to the left. Anyone got any suggestions on how to remove it? I’ve tried “margin” and “padding”, yet neither seem to work

TIA

Andy

2

Why an img? A background image would make more sense.

But if it has to remain an image, I wonder if this has to do with

  • the lack of a doctype
    OR
  • browser default stylesheets adding padding and/or margin to the created-by-the-browser html and body tags (try setting both of these to 0 for both elements in your <style> tag)
    OR
  • IE has some known issue with uneven pixel numbers, but I don’t remember the details. If the image is even-numbered width, does the problem go away? I think it was called odd-numbered pixel shift.

Actually I’d do all three of these, unless again you can switch a foreground image to a CSS background image, which arguably makes way more sense since this looks presentational. Or does it open up at some point?

3

Hi,

Thanks for the reply. test.html is just a basic example I was working with (the whole page is far more complex … but I wanted to narrow things down a bit). Using a background image worked a charm - thanks!

background: #990000 url(http://www.chambresdhotes.org/triangle1.gif) top left no-repeat;

Wish I had thought of that before :wink:

Cheers

Andy

4

Yeah testing’s cool, but you’ll still always want a doctype on your test esp if you’re testing how things look, because you know IE is IE… other browsers also have a “almost-standards mode” without a doctype, so you know… just not as drastically different visually as IE can be.

5

Yeah, just forgot to add one =)