Welcome to WebmasterWorld Guest from 54.161.241.199

Forum Moderators: incrediBILL

Message Too Old, No Replies

White space around image in Internet Explorer

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

Junior Member

10+ Year Member

joined:Sept 14, 2004
posts: 80
votes: 0


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.
9:59 pm on Nov 9, 2011 (gmt 0)

Senior Member

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

joined:Sept 25, 2005
posts:1223
votes: 124


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.
11:30 pm on Nov 9, 2011 (gmt 0)

Senior Member

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

joined:July 3, 2006
posts: 3123
votes: 0


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?
11:35 pm on Nov 9, 2011 (gmt 0)

Senior Member from US 

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

joined:Apr 9, 2011
posts:13268
votes: 363


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.
12:12 am on Nov 10, 2011 (gmt 0)

Junior Member

10+ Year Member

joined:Sept 14, 2004
posts: 80
votes: 0


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.
9:29 am on Nov 10, 2011 (gmt 0)

Senior Member

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

joined:July 3, 2006
posts: 3123
votes: 0


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.
10:34 am on Nov 10, 2011 (gmt 0)

Senior Member

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

joined:Sept 25, 2005
posts:1223
votes: 124


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;"
.
11:01 am on Nov 10, 2011 (gmt 0)

Senior Member

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

joined:Sept 25, 2005
posts:1223
votes: 124


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"
.
5:25 pm on Nov 10, 2011 (gmt 0)

Senior Member

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

joined:July 3, 2006
posts: 3123
votes: 0


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!?)
5:41 pm on Nov 10, 2011 (gmt 0)

Senior Member from US 

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

joined:Oct 17, 2005
posts: 4988
votes: 12



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
6:31 pm on Nov 10, 2011 (gmt 0)

Senior Member

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

joined:Sept 25, 2005
posts:1223
votes: 124


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!
8:21 pm on Nov 10, 2011 (gmt 0)

Junior Member

10+ Year Member

joined:Sept 14, 2004
posts: 80
votes: 0


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.
9:13 pm on Nov 10, 2011 (gmt 0)

Senior Member from US 

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

joined:Oct 17, 2005
posts: 4988
votes: 12


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.
10:41 am on Nov 11, 2011 (gmt 0)

Senior Member

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

joined:July 3, 2006
posts: 3123
votes: 0


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.
5:08 pm on Nov 11, 2011 (gmt 0)

Junior Member

10+ Year Member

joined:Sept 14, 2004
posts: 80
votes: 0


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.
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members