Welcome to WebmasterWorld Guest from 54.147.10.72

Forum Moderators: incrediBILL

Message Too Old, No Replies

White space around image in Internet Explorer

     

Ann_G

8:51 pm on Nov 9, 2011 (gmt 0)

10+ Year Member



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

9:59 pm on Nov 9, 2011 (gmt 0)

WebmasterWorld Senior Member 5+ Year Member Top Contributors Of The Month



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

11:30 pm on Nov 9, 2011 (gmt 0)

WebmasterWorld Senior Member penders is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month



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

11:35 pm on Nov 9, 2011 (gmt 0)

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time Top Contributors Of The Month



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

12:12 am on Nov 10, 2011 (gmt 0)

10+ Year Member



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

9:29 am on Nov 10, 2011 (gmt 0)

WebmasterWorld Senior Member penders is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month



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

10:34 am on Nov 10, 2011 (gmt 0)

WebmasterWorld Senior Member 5+ Year Member Top Contributors Of The Month



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

11:01 am on Nov 10, 2011 (gmt 0)

WebmasterWorld Senior Member 5+ Year Member Top Contributors Of The Month



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

5:25 pm on Nov 10, 2011 (gmt 0)

WebmasterWorld Senior Member penders is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month



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

5:41 pm on Nov 10, 2011 (gmt 0)

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month




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

6:31 pm on Nov 10, 2011 (gmt 0)

WebmasterWorld Senior Member 5+ Year Member Top Contributors Of The Month



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

8:21 pm on Nov 10, 2011 (gmt 0)

10+ Year Member



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

9:13 pm on Nov 10, 2011 (gmt 0)

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month



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

10:41 am on Nov 11, 2011 (gmt 0)

WebmasterWorld Senior Member penders is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month



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

5:08 pm on Nov 11, 2011 (gmt 0)

10+ Year Member



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.
 

Featured Threads

Hot Threads This Week

Hot Threads This Month