homepage Welcome to WebmasterWorld Guest from 54.237.99.131
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / HTML
Forum Library, Charter, Moderators: incrediBILL

HTML Forum

    
White space around image in Internet Explorer
Ann_G

10+ Year Member



 
Msg#: 4385356 posted 8:51 pm on Nov 9, 2011 (gmt 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.

 

robzilla

WebmasterWorld Senior Member 5+ Year Member



 
Msg#: 4385356 posted 9:59 pm on Nov 9, 2011 (gmt 0)

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

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



 
Msg#: 4385356 posted 11:30 pm on Nov 9, 2011 (gmt 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?

lucy24

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



 
Msg#: 4385356 posted 11:35 pm on Nov 9, 2011 (gmt 0)

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

10+ Year Member



 
Msg#: 4385356 posted 12:12 am on Nov 10, 2011 (gmt 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.

penders

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



 
Msg#: 4385356 posted 9:29 am on Nov 10, 2011 (gmt 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.
robzilla

WebmasterWorld Senior Member 5+ Year Member



 
Msg#: 4385356 posted 10:34 am on Nov 10, 2011 (gmt 0)

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

WebmasterWorld Senior Member 5+ Year Member



 
Msg#: 4385356 posted 11:01 am on Nov 10, 2011 (gmt 0)

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

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



 
Msg#: 4385356 posted 5:25 pm on Nov 10, 2011 (gmt 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!?)

Fotiman

WebmasterWorld Senior Member fotiman us a WebmasterWorld Top Contributor of All Time 5+ Year Member



 
Msg#: 4385356 posted 5:41 pm on Nov 10, 2011 (gmt 0)


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

WebmasterWorld Senior Member 5+ Year Member



 
Msg#: 4385356 posted 6:31 pm on Nov 10, 2011 (gmt 0)

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

10+ Year Member



 
Msg#: 4385356 posted 8:21 pm on Nov 10, 2011 (gmt 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.

Fotiman

WebmasterWorld Senior Member fotiman us a WebmasterWorld Top Contributor of All Time 5+ Year Member



 
Msg#: 4385356 posted 9:13 pm on Nov 10, 2011 (gmt 0)

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

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



 
Msg#: 4385356 posted 10:41 am on Nov 11, 2011 (gmt 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.

Ann_G

10+ Year Member



 
Msg#: 4385356 posted 5:08 pm on Nov 11, 2011 (gmt 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.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / HTML
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved