How to get rid of border for an Iframe in IE8

Question

I am creating a dialog with an iframe inside, the problem is that the border keeps showing in IE8, this works perfectly in any other browser.

This is what I have tried, I also tried border:none

$(d.dialog).find('#MyCoolDialogInner').html('<iframe src="/apex/EscalationForm?id={!Case.Id}" height="495" width="380" marginheight="0" marginwidth="0" frameborder="0"/>'); 

Thanks in advance

Answer 1

Add the frameBorder attribute (note the capital ‘B’).

So it would look like:

<iframe frameBorder="0">Browser not compatible.</iframe>

Answer 2

Have you tried setting it via CSS?

iframe {
    border:0px none transparent !important;
}

Also, these seem to work too - marginheight="0" marginwidth="0" frameborder="0". Taken from this post on the same IE issue.

Answer 3

Try this:

<iframe frameborder="no" />

Answer 4

I realize IE8 is a nuisance when it comes to iFRAMES. "Frameborder" is deprecated in HTML5 so while it's the easiest option for IE8, this is not a long term solution.

I have successfully hidden borders and scrollbars by placing the iFRAME inside of a container. The iFRAME container itself is placed inside of a div for overall positioning on the web page. The iFRAME itself is absolute positioned and negative margins applied to both top and left in order to hide the top and left borders. Width and height of the absolutely positioned iFRAME should be coded at over 100% so it exceeds the parent size to the point that the right and bottom borders are not visible (also the scrollbars are not visible). This technique also makes the iFrame responsive because the iFRAME container uses percentages as well as the div that holds the container. Of course the iFRAME parent div must be set to overflow:hidden.

Here is an example code:

    /*THE PARENT DIV FOR THE iFRAME CONTAINER*/
    .calcontainer
        {
        width:100%;  /*adjust iFrame shrinking here - if floating use percentage until no white space around image.*/   
        max-width:200px;     
        margin:auto;     
        }


    /*THE RELATIVE POSITIONED CONTAINER FOR THE iFRAME*/

    .calinside  /*container for iFRAME - contents will size huge if the container is not contained and sized*/
        {   
        position:relative; /*causes this to be the parent for the absolute iFRAME*/
        padding-bottom: 100%; /* This is the aspect ratio width to height ratio*/
        height: 0;
        overflow:hidden; /*hides the parts of the iFRAME that overflow due to negative margins and over 100% sizing*/     
        }


/*THE ABSOLUTE POSITIONED iFRAME contents WITH NEGATIVE MARGINS AND OVER 100% SIZE IS CODED HERE.  SEE THE NORMAL SETTINGS VERSUS THE IE8 SETTINGS AS MARKED.  A SEPARATE CSS FILE IS NEEDED FOR IE8 WITH A CONDITIONAL STATEMENT IN THE HEAD OF YOUR HTML DOCUMENT/WEB PAGE*/

    .calinside iframe
        {
        position: absolute;
        top: 0;
        left: 0;
        width: 100% !important;/*must expand to hide white space to the right and below.  Hidden overflow by parent above*/
        height: 103% !important; /*must expand to hide white space to the right and below.  Hidden overflow by parent above*/
        /*IE8*/top: -2%;
        /*IE8*/left: -2%;   
        /*IE8*/width: 114% !important;/*For IE8 hides right border and scroll bar area that is white*/  
        /*IE8*/height: 105% !important; /*hide white space and border below.  Hidden overflow by parent above*/          
        }