✔ Tabelle mit height="96%;" unter Firefox

Status
Nicht offen für weitere Antworten.
G

gio

Mitglied
Hallo,
ich möchte gerne meine HTML bzw. CSS Seiten validieren und änderte deshalb den hinterlegten Table-Tag von <table height=“96%“ ...> in <table style="height:96%;"> ab. In den Beiträgen wo ich auf diesen Lösungsansatz aufmerksam wurde, war zugleich davon die Rede, dass in diesem Fall auch die CSS Angaben um die Angaben „body,html {height:100%;...} ergänzt werden müssen.

Nachdem ich so vorgegangen bin, füllen nun die Browser "Netscape und Firefox" die Tabelle auf volle 100% auf. D.h., es fehlt der untere Rand von 4%. Im IE funktioniert wiederum alles zu meiner Zufriedenheit.

Nehme ich die 100% Angabe unter „body,html“ raus, funktionierts auch unter Firefox & NS.

Nachfolgend der Quelltext als Beispiel:

HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>

<head>

<STYLE type="text/css">
<!--
html		{ height:100%;	}
body		{ height:100%; background-color:#000000; font-family:Arial; font-size:12px; overflow:hidden; }
table		{ font-family:Arial; color:#808080; font-size:12px;	}
p, div		{ color:#808080; font-family:Arial; font-size:12px;	}

-->
</STYLE>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">

<title>Test</title>

</head>

<base target="content">

<body>

 <table style="height:96%;" border="0" width="100%">
  <tr>
   <td style="height:100%;" width="45%">Hier wird das Menü eingebaut !</td>
		
   <td style="height:100%;" width="55%" align="center">
     <iframe style="height:98%;" name="content" src="menue1.htm" width="90%" marginwidth="0" marginheight="0" frameborder="1">
      <p>Wenn Sie diesen Text lesen können, bedeutet das, dass Ihr Browser nicht mit Frames umgehen kann. Bitte aktualisieren Sie Ihren Browser um die Seiten betrachten zu können.</p>
     </iframe>
   </td>
  </tr>
 </table>

</body>

</html>
Wofür muss die 100% Deklaration eigentlich in den Selektor body,html ?

Kann diese Angabe problemlos entfernt werden ohne unter anderen Browsern Probleme zu bekommen oder liegt ein Fehler im Quellecode vor ?

Besten Dank für Euere Hilfe !
 
Hi;

ersetze einfach folgende Zeilen, dann müsste es hinkommen:

Code: 
html, body { margin:0;height:100%; background-color:#000000; font-family:Arial; font-size:12px; overflow:hidden; }
HTML: 
<table cellspacing="0" cellpadding="0" style="height:96%;border:0;width:100%;">

Greetz
 
Vielen Dank für Deine Hilfe ! Auf diesem Wege komme ich zwar etwas weiter, doch nun macht der MS-IE Probleme, indem er durch Margin:0 das Iframe unmittelbar am oberen Fensterrand plaziert (valign=“middle“ bringt nichts). Setze ich bei Margin einen Wert >0, verschwindet beim Firefox ein Teil des Iframe‘s im unteren Fensterbereich. Vermutlich ist der Lösungsansatz, das Iframe in einer Tabelle zu plazieren schlecht gewählt, doch derzeit bin ich noch nicht so weit das Seitenlayout komplett mit CSS umzusetzen.

Vielleicht hat noch jemand eine Idee.

Besten Dank
 
Ich kann dir nur raten ein CSS-Design zu erstellen

->
HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>

<head>

<STYLE type="text/css">
<!--
html, body 	{ margin:0;height:100%; background-color:#000000; font-family:Arial, sans-serif; font-size:12px; overflow:hidden; }
table           { font-family:Arial, sans-serif; color:#808080; font-size:12px;     }
p, div          { color:#808080; font-family:Arial, sans-serif; font-size:12px;     }

-->
</STYLE>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">

<title>Test</title>

</head>
<body>

  <div style="height:100%;width:45%;float:left;">Hier wird das Menü eingebaut !</div>       
   <div style="height:100%;float:left;width:55%;">
     <iframe style="height:98%;width:90%;" name="content" src="m.htm">
      <p>Wenn Sie diesen Text lesen können, bedeutet das, dass Ihr Browser nicht mit Frames umgehen kann. Bitte aktualisieren Sie Ihren Browser um die Seiten betrachten zu können.</p>
     </iframe>
   </div>

</body>

</html>

Enspricht das deinen Vorstellungen?


Greetz
 
Hallo,

wie bekomme ich nun das IFrame mittig (horizontal & vertikal) im Div-Element platziert ? Ich habe es bereits über eine Tabelle versucht (funktioniert nur beim Firefox, nicht beim IE) und den Wert „vertical-align:middle;“ eingesetzt (geht bei keinen der Browser). Das IFrame klebt permanent am oberen Bildschirmrand. Man sieht das besonders gut, wenn man für die Höhe des Iframes einen kleineren Wert wählt z.B. 50%. Ich verzweifle noch, das muss doch irgendwie zu machen sein.

Für eine Lösung wäre ich ewig dankbar ^^

VG
 
Hallo Greetz,

ich möchte mich ganz herzlich bei Dir bedanken ! Das Layout entspricht nun meinen Vorstellungen :) !

Ich könnte schwören auch die von Dir empfohlene "margin" Variante ausprobiert zu haben, doch vielleicht irre ich mich. Für den Fall das jemand auf ein ähnliches Problem stoßen sollte, möchte ich an dieser Stelle die Lösung von Greetz noch um folgendes ergänzen, denn der IE stellt das iframe bei der o.g. Lösung nicht in der korrekten Breite (90%) dar.

Code: 
…
<div style="height:100%;float:left;width:55%;" align="center”>
<iframe style="height:98%;width:90%; margin:1% 0 0 0;" name="content" src="m.htm">
…
Die horizontale Ausrichtung muss in diesem Fall über align=“center“ erfolgen.

Viele Grüße
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück