IE8 shows a black line around transparent GIFs

[tonynoriega]

just noticed this today...

i have some transparent gifs that looked fine a week ago.

now they have what seems to be a 1px black border around them...

ususally it looked white, which i have always noticed... that white 1px extra line around transparent gifs...

now its black?

anyone notice this or have it happen to them?

[incrediBILL]

Do you have the border set to zero?

A simple style change will fix it.

[rocknbil]

Well, I am *presuming* you're using an XHTML doctype. This is probably the wrong reference [w3.org], but you can see there is no border attribute for the img element in XHTML, it is deprecated [w3.org]. I it find peculiar that the name attribute is not deprecated there, but we've been told for years to save these for form objects and use ID instead . . . but I digress . . .

So if you're using XHTML without the border="0" attribute and you've done something to trigger Quirks mode - an invalid doctype, or something else that causes validation to fail - the border will likely automagically appear uninvited.

Solutions are to (illegally? lol) add the border attribute, alter the doctype to an HTML 4.01 that does support border, (and get rid of all the funny />'s) or validate the document so it renders in Standards Compliance Mode.

Alternatively and untested, you might be able to just add

img { border:none: }

to your styles; don't know that this will work because if you're in Quirks mode it may fail.

[swa66]

Can't say I've ever seen a white or black border that I didn't specify to be there.

As rocknbill said: make fully sure it validates (but I'd say: don't worry about xhtml, but that's a discussion on it's own).

Also make sure to hide all legacy IE fixes, hacks and workarounds from IE8, it will not need them (conditional comments rule)

[incrediBILL]

rocknbil, I meant border:none, not the deprecated border="0", but none=0, just described it in the old manner is all ;)

[edited by: incrediBILL at 8:04 pm (utc) on June 2, 2009]

[swa66]

in CSS "border: 0;" will turn borders off just as well as "border: none;"

[rocknbil]

I only mentioned XHTML because in many 4.01 doctypes border="0" is not deprecated. I don't hate XHTML. Really, I don't. I just discourage it's abuse. :-)