White space around image in Internet Explorer

[Ann_G]

Does anyone have suggestions on how to get rid of whitespace around an image in Internet Explorer? Our rotating widget on our web page [lincolnwoodlibrary.org...] looks good in Mozilla Firefox but adds white space in Internet Explorer. I tried different things already like display: inline; and setting negative margins but nothing has worked so far. I appreciate any ideas.

[robzilla]

It's standard behavior in IE to draw a border around an image that's also a link. To get rid of them all at once, add

img { border: 0; }

to your CSS rules. Alternatively, you can add

style="border: 0;"

or the deprecated attribute

border="0"

to each affected

<IMG>

element.

[penders]

Your 'rotating widget' appears to be a document (slideshow.html) in an iframe and it seems to be the (default) white background of this document that you are seeing in IE?

[lucy24]

In some browsers,

img {text-decoration: none;}

does the trick. It seems silly for images, since they don't have text, but makes sense in the context of links.

[Ann_G]

I tried { border: 0; } and img {text-decoration: none;}
without success.

And yes it's actually a slideshow in an iframe. But even if the background default of the frame is white, why doesn't it show in Firefox as white? I but the background color as blue in CSS but that doesn't help either.

Thank you all very much anyhow for your responses.

[penders]

And yes it's actually a slideshow in an iframe. But even if the background default of the frame is white, why doesn't it show in Firefox as white? I but the background color as blue in CSS but that doesn't help either.

Providing the background of the framed document is left as the default (white), other browsers appear to treat the iframe as transparent, showing the background of the parent container/document. To make IE do the same I believe you need to set

allowTransparency="true"

on the iframe itself. Although this is a non-standard attribute it appears to work cross browser.

[robzilla]

What version of IE are you using? I thought the NextReads button above "Helpful Websites" was the problem, since only that image sports a white border in IE9. The rotating widget to the left of it does not, it's just that some of the images in rotation, like widget-infotrac.gif and widget-teen.jpg, do not have transparent backgrounds.

Also,

display

and

text-decoration

are not valid attributes for the

iframe

element. You can only use these as such:

style="display: block; text-decoration: none;"

. Furthermore, attributes themselves cannot contain any spaces, so

background color="#54c6e1"

is invalid, and should be written as

style="background-color: #54c6e1;"

. Same goes for

text-decoration="none"}

in the

IMG

element within your iframe, this can only be written as

style="text-decoration: none;"

.

[robzilla]

One rather disturbing solution I came across is that for

frameborder

to work in IE, it has to be written with... a capital B. So that would be

frameBorder="0"

.

[penders]

robzilla: What version of IE are you using?

I believe the problem the OP is experiencing, if it is indeed the IFRAME issue, only affects IE8 and earlier. It is 'fixed' in IE9 as far as I can see.

One rather disturbing solution I came across is that for frameborder to work in IE, it has to be written with... a capital B. So that would be frameBorder="0".

Which version of IE?! IE7-9 appear to work OK for me with frameborder (all lowercase) - as expected. (IE6 under IETester doesn't appear to acknowledge the frameborder attribute at all - when I thought it should!? - no border is rendered on the iframe in IE6 by default as far as I can see!?)

[Fotiman]

One rather disturbing solution I came across is that for frameborder to work in IE, it has to be written with... a capital B. So that would be frameBorder="0".

HTML is case insensitive (assuming you're not using XHTML), so that makes no sense at all, and I've never seen that behavior.

frameborder = frameBorder = FrAmEbOrDeR

[robzilla]

It supposedly [stackoverflow.com] affected IE7, but since it would clearly have been a bug, it may have been fixed since. Thanks for the IETester tip!

[Ann_G]

Thank you! Sorry I haven't been able to reply sooner.
I tested the page in IE 7 and 8. I corrected my CSS mistakes according to your guidance but still not working. Also I'm using XHTML. Maybe I can solve the problem by not using iframe. Having the script in a separate file and using iframe just seemed like such a nice idea.
I'll also take a look at the images, I wasn't aware that some were framed by non-transparent areas.
I so appreciate your suggestions.

[Fotiman]

All you need to do is modify the inner page of your iframe (slideshow.html), and add the following to the head of that page:

<style type="text/css">
html,
body {
  background-color: #54C6E1;
  margin: 0;
  padding: 0;
}
</style>

This will give the document inside your frame the same color background as the outer page.

[penders]

Changing the background-color of the iframe'd document, as Fotiman suggests, to match its surroundings should work. However, I'm curious as to why my suggestion - to add

allowTransparency="true"

to the iframe element itself does not appear to work for you? The background of the iframe'd document must not be set in this case - which is how you appear to have it. I tried this on your live site using IE8's developer tools and this worked for me.

Aside: the allowTransparency method (although non-standard) does have the advantage of allowing the iframe to match any background set in the parent document, which would otherwise be very difficult if a patterned background had been used for instance.

Also I'm using XHTML.

You have an XHTML DOCTYPE but your pages are served as text/html, so this makes no difference.

Maybe I can solve the problem by not using iframe.

Well, an iframe is unnecessary IMO and I'm sure would solve the problem since it would seem to be directly related to the iframe. A non-iframe solution could in fact be more tidy and easier to implement.

[Ann_G]

I'm sure both allowTransparency="true" (sorry I forgot to try it)
and
<style type="text/css">html,body
{
background-color: #54C6E1;
margin: 0;
padding: 0;}
</style>

would have worked but it was faster to delete the iframe and put the code directly in the document. Now it's OK.
Thanks again! It's wonderful to know one can get help when stuck. You guys are awesome.