How to get rid of this whitespace in internet explorer?


Tags: html,css,graphics,components

Problem :

I've got a Facebook like button that is bugging me in internet explorer 7/8 (this doesn't happen in Firefox or Google Chrome or IE9(+)) enter image description here

I want to get rid of the white area but how? The relevant HTML and CSS is

<div class="fbstuff">  
    <div style="margin-top:3px;margin-left:15px;float:right;">         
        <iframe src="http://www.facebook.com/plugins/like.phphref=http://www.bnano.eu&amp;layout=button_count&amp;locale=en_US" scrolling="no" frameborder="0" style="border:none; width:200px; height:80px"></iframe>
    </div>
</div>

I don't know why the white area appears and this seems to happen in =< IE8 only. What can I do to resolve this? Here's the live link. Thanks.



Solution :

you are setting the width and height in the html of your iframe here:

width:200px; height:80px

if you delete these values, your browser will render the default size for an iframe. Rather set these values to exaclty the dimensions of the button.

the reason why you see it in IE and not in firefox, is that firefox renders an iframe background as transparent and old IE renders it as white


    CSS Howto..

    How to create a 3 columns fluid fixed fluid layout?

    How to make a picture hover over others without moving the other pictures?

    ExtJS how to remove grid row underline when selected and over

    How to add a picture to the top of my webpage?

    How do I center my content inside the menu?

    css rules multi class, how to match two out of many

    how to open a menu with a button?in html

    how to make a left aligned navigation with dropdown elements

    css code how to remove space between div class

    How to define a CSS fontface?

    How to wrap text in table cell at hyphen?

    How do I override * asterisk for css?

    How do I pick an image from a set of images on my Ajax form?

    How can I be sure that a website is responsive by only looking the code?

    Wordpress: How to add a caption right-aligned to the edge of the image

    CSS how to make an element fade in and then fade out?

    How to Surround Links with Bounding Box Using CSS

    How to override a part of the style in the site.master page?

    How can I properly align two divs that fold atop each other when browser is shrinked?

    How to apply css to only one level of list items (not to child elements)

    I am wondering how js fiddle is handling their textareas concerning resizing and their layot

    How to create a mobile navigation toggle using pure CSS?

    How to select 3rd div which has specific css class

    How to remove the BG image on jQueryUI autocomplete combo (select)

    How to fit two divs side by side horizontally?

    How to draw a checkmark / tick using CSS?

    how to get image to show up to the left of panel (both in same row)

    How can I layout a sidebar or pullquote?

    How to make emails responsive?

    how to save the datas which are get from a newsletter? [closed]