ultranerds — 2012-02-29T08:53:21-05:00 — #1
I've got a bit of an annoying CSS bug in IE;
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
stomme_poes — 2012-02-29T09:03:03-05:00 — #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
- 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)
- 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?
ultranerds — 2012-02-29T09:09:33-05:00 — #3
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
stomme_poes — 2012-02-29T09:17:47-05:00 — #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.
ultranerds — 2012-02-29T09:26:13-05:00 — #5
Yeah, just forgot to add one =)