✔ Iframe wird nicht richtig angezeigt + CSS-Problemchen

[Khyrsanth]

Hallo,

ich habe probiert News per IFrame einzubasteln.

Erst mit den <object>-Tags (in die Hose gegangen), includes habe ich überhaupt nicht kapiert bei SelfHTML was ich da machen muss (ist das nur für PHP?) und dann per Iframe versucht.
Das sieht soweit beim FF (offline) schon ganz ok aus (bis auf Schrift und Linkfarbe) aber beim IE sieht man zwar den Text aber auf einem weißen Kasten, Schrift, Farbe etc. natürlich total konfus.

Kann mir jemand sagen woran das liegen könnte?

Iframe in der index.htm:

 <!-- KASTEN 3-->
       <table id="kasten3" width="100%" border="0" cellspacing="0" cellpadding="0" valign="top">
  <tr>
    <td colspan="3"><h3 class="kastenheader">News</h3></td>
    <td>&nbsp;</td>
    </tr>
  <tr>
    <td width="104"><img src="bilder/blank.gif" width="104" height="1"></td>
    <td>&nbsp;</td>
    <td><iframe src="aktuelles/side-news.html" name="News" scrolling="no" frameborder="0" align="right" marginheight="0px" marginwidth="0px" width="120"></iframe></td>
    <td>&nbsp;</td>
  </tr>
</table>

Und irgendwie greift mein CSS scheinbar nicht richtig. Das hier ist der Code für den Newsteil, irgendwie wird der aber wohl nicht genommen

.kasten3{
font-size: 10px;line-height: 15px;
font-family: verdana, arial, helvetica, sans-serif;
padding:10px;
margin-top:0px;
margin-left:0px;
margin-right:0px;
margin-bottom:0px;
vertical-align:top;
color:#202020;}

Ich würde auch gerne noch die Linkgröße/Farbe etc. für diesen Kasten ändern, aber alles was ich bisher versucht habe schlägt irgendwie auf die gesamte Seite durch und nicht nur auf diesen Teil

Ich bin leider ein ziemlicher CSS-Newbie und es ist auch mein erster Versuch einen IFrame zu machen, daher bitte für DAUs erklären ;-)

Link zur Seite
CSS
News die rein sollen

 

[Maik]

Hi,

von welcher IE-Version sprichst du? Mittlerweile kursieren da mehrere Versionen im Netz: IE6, IE7, IE8 (die 5er-Baureihe laß ich hier mal außen vor).

Der IE stellt (in allen Versionen) "von-Hause-aus" einen iFrame nicht transparent dar, wie z.B. Firefox, Opera, Safari & Co.

Abhilfe schafft hier der Webmaster-FAQ-Artikel CSS Wie kann ich <iframe>'s transparent machen.

Der CSS-Regelblock für die Klasse .kasten3 lässt sich nicht aus dem Hauptdokument index.html heraus auf das Dokument side-news.html im iFrame anwenden (vererben), sondern müsste direkt auf dieses Dokument angewendet werden.

mfg Maik

 

[Khyrsanth]

Ich hab hier IE 7 momentan.

Achja, was muss ich denn machen damit der IFrame automatisch so hoch ist damit alles angezeigt wird und er nicht einfach irgendwo mitten im Text abschnibbelt

Danke für die Tips schonmal, das werde ich mal ausprobieren, melde mich dann (höchstwahrscheinlich) wieder hier

 

[Khyrsanth]

Ah super, das mit dem transparent schalten für IE hat geklappt ebenso das CSS einbauen in der News-Seite.

jetzt sieht es nur noch seltsam aus weil die Hälfte verschwindet, dabei hab ich doch gar keine Höhenangabe gemacht und gehofft dass es dann automatisch so hoch wird wie gebraucht...

 

[Maik]

Ohne Höhenangabe setzen die Browser die iFrame-Höhe eigenständig fest, und mit dem Attribut scrolling="no" unterbindest du das Scrollen im iFrame, weshalb die Hälfte des eingebundenen Dokuments nicht zugänglich ist.

Wenn sich die iFrame-Höhe am eingebundenen Inhalt orientieren soll, benötigst du Javascript - siehe http://www.doktormolle.de/temp/iframe_resize2/

Wo hast denn eigentlich den allowtransparency-Attributswert "000001" ausgegraben?

Zugelassen sind hier: "false" oder "true".

mfg Maik

 

[Khyrsanth]

Hihi joah was so bei raus kommt wenn man keine Ahnung hat ne? Hab's mal geändert auf "true"

Hmm das mit dem Javascript muss ich mir mal zu Gemüte führen was ich da machen muss ist ja nicht wirklich auf der Seite erklärt, einfach den Javascript-Code aus dem Quelltext kopieren? *grübel und rumprobier*

 

[Maik]

Ist denkbar einfach

• index.html:

<script type="text/javascript">
<!--
/**
  * THX an Quaese fr Ausbesserung des Codes
  * http://www.tutorials.de/forum/members/quaese.html
  **/
function resize_me(n){
  d=10;

  ifObj=document.getElementsByName(n)[0];

  p=(document.all)?'scroll':'offset';

  // w = (W3C-DOM)? Breite in px : ((IEs)? Breite in px : Breite in px sonstige Browser)
  w = (window.getComputedStyle)? window.getComputedStyle(ifObj, null).getPropertyValue('width') :
                               ((ifObj.currentStyle) ? ifObj.currentStyle['width'] : eval("window.frames[n].document.getElementsByTagName('body')[0]."+p+"Width+"+20+"+'px'"));

  ifObj.style.width = w;
  eval("ifObj.style.height=Math.max(200,window.frames[n].document.getElementsByTagName('body')[0]."+p+"Height+"+d+")+'px'");
}
//-->
</script>

• side-news.html:

<body onload="parent.resize_me('News')"> <!-- News = Name des Frames -->

mfg Maik

 

[Khyrsanth]

Aaah vielen Dank Maik!

Hab den einen Teil zwar schon in der Index-Datei gehabt aber dass auch noch was in die andere Seite musste hab ich nicht gesehen, Danke für Deine Hilfe!