html – Iframe css doesnt work with external css but works with inline css?-ThrowExceptions

Exception or error:

I dont understand the unusual behaviour of iframe css that why the below 1st works and the second doesnt.

 <html>

<body>

<iframe 
  style="display:none" >
</iframe> //inlineCss
  </body>
  </html>

But if the below css is linked externally not
in the same html

file.css

iframe {
  display: none;
  /* external css doesnt work */
  }

sample.html

   <! DOCTYPE HTML>
   <html>
   <head>
    <link rel="stylesheet" href="file.css">


  </head>
    <body>
    <iframe src="" />

   </body>

   </html>

This is not the complete code css though but to clear the query in short ive posted a sample

How to solve:

Here is some code proving that something else than what you claim must be wrong with your code. Save the snippets locally and run. In the mean time post your relevant code as requested.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">

 <title>Example</title>
 <link rel="stylesheet" href="./file.css">

</head>

<body>
  <button onclick="toggleIframe('myIframe')">toggle iframe</button>
  <iframe id="myIframe" src="./loremipsum.html" cross-origin="anonymous"></iframe>

<script>
function toggleIframe(s) {
    var i = document.getElementById(s);
    // BEWARE: will change <iframe> inline style, not the above CSS
    //         proving, however, both options work as expected....
    i.style.display = (i.style.display != 'block') ? 'block' : 'none';
}
</script>
</body>

</html>

And the loremipsum.html used as <iframe> content:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">

    <title>Latin Lipsum - Courtesy generator.lorem-ipsum.info</title>
</head>
<body>
    <h2>Lorem Ipsum</h2>
    <p>Lorem ipsum dolor sit amet, exerci dolorem est ad. Sumo rebum prompta vim ad. Legendos expetendis id sed. Ex ius quem accusamus, pri et
        deleniti copiosae.</p>
    <p>Cu vel debet nobis, repudiare deseruisse reprehendunt usu ad. Ex elit idque nam. Omnis munere detraxit mei te, eu labore appareat verterem
        est. Mel ex oporteat consectetuer.</p>
    <p>Pro ea nonumy integre, mel at solum corpora. Id viris audiam repudiare cum, pri dolore appareat ex, per propriae detracto tacimates ex.
        Elitr sapientem quo et, usu suas porro tibique cu. Iusto causae eos et, tota principes interesset et eos. Similique intellegam cum ei, unum
        qualisque mel et, regione verterem delicatissimi qui ut. Aliquam incorrupte ea pro, vel veritus consequat id.</p>
    <p>Pri te amet electram. Tation commodo minimum cu pri, utamur minimum id pri. No legimus atomorum vim. Vix id putent iuvaret salutandi, mel
        phaedrum conceptam ut.</p>
    <p>Nam id utinam referrentur, similique intellegebat ad mel, eu nobis aeterno qui. Ad quodsi cetero sed, deserunt disputando nam an, veri
        viderer consetetur vel an. Zril vivendo pro no, oratio scripta quo eu, aeque elaboraret duo et. Ea nonumy essent sed, enim cetero pri an. An
        zril facete ius.</p>
    <p>Id delectus fabellas praesent duo, ei vim consequat democritum. An mei tamquam iuvaret philosophia, amet vitae usu at. Errem equidem eam
        eu, per sumo audire vocibus an, ridens laoreet duo ut. Pro te velit efficiendi, an ius tation noster. Inimicus argumentum eu quo, no invenire
        mandamus philosophia nam. Simul placerat efficiendi eu eum.</p>
    <p>Sed ex quas mazim intellegam. Ad harum dicant sanctus vis, etiam assum complectitur his ex, solum noster instructior id mei. His brute
        facilis adversarium eu, vix officiis persecuti incorrupte te. Te odio mundi sanctus has. Cetero blandit pertinax te cum, cum solet
        theophrastus ex.</p>
    <p>Erant iudico ei nam, no nihil malorum vituperatoribus mel. Graeci pericula eos cu, ad oratio partem abhorreant quo. No aeterno fastidii
        legendos vel, pro vide dissentiet an. Possit epicurei definiebas eos no, eum no diam augue. Sed ex tritani diceret tacimates, ea latine
        singulis interpretaris vis, vel quaestio definiebas at.</p>
    <p>Ei scripta imperdiet has. Wisi vivendo pri te, mel lorem quodsi sensibus ne, in cum eripuit platonem evertitur. Vis an quis possit
        voluptatibus. Eum fastidii appareat id. Augue elitr bonorum per at, nam ne veri possit scribentur.</p>
    <p>An probo etiam sit, ut agam epicuri similique eum. Dicam iuvaret in mel, no has consul causae vocibus, ad veniam aperiam voluptatibus sed.
        Posse inimicus necessitatibus pri an, no sed invidunt laboramus. Nostrum sadipscing ex sea, ad pro idque suscipiantur.</p>
</body>
</html>

UPDATE

Added “file.css” as requested by OP.

iframe { display: none }

OP needs to change <link type="stylesheet"... to <link rel="stylesheet"... in his document.

Leave a Reply

Your email address will not be published. Required fields are marked *