
17735
19.02.2006, aktualisiert am 24.02.2006
Feste Höhe eines DIV-Layers mit Formular erzwingen
Hi,
ich habe angefangen, meine Homepage in PHP zu schreiben und verwende dabei die sogenannten DIV-Layer.
Der DIV-Layer "Search" beinhaltet eine Google-Suchmaske, dieses Element ist logischerweise eine Form (<form ...> ... </form>).
In der CSS-Datei habe ich folgendes definiert:
(...)
#search {
font-family: sans-serif;
height: 30px;
max-height: 30px;
}
(...)
Doch obwohl eine maximale Höhe angegeben ist, zeigt der Internet Explorer den DIV-Layer trotzdem höher als erlaubt. Der Mozilla Firefox dagegen hält sich, wie vom Browser erwartet richtig an die Höhenangabe.
Wer sich selbst überzeugen möchte, kann meine Test-Seite ja besuchen: [Link entfernt, da Seite nicht mehr vorhanden]
Habt ihr eine Idee, dieses Problem zu umgehen?
Gruß,
Ahnenforscher
ich habe angefangen, meine Homepage in PHP zu schreiben und verwende dabei die sogenannten DIV-Layer.
Der DIV-Layer "Search" beinhaltet eine Google-Suchmaske, dieses Element ist logischerweise eine Form (<form ...> ... </form>).
In der CSS-Datei habe ich folgendes definiert:
(...)
#search {
font-family: sans-serif;
height: 30px;
max-height: 30px;
}
(...)
Doch obwohl eine maximale Höhe angegeben ist, zeigt der Internet Explorer den DIV-Layer trotzdem höher als erlaubt. Der Mozilla Firefox dagegen hält sich, wie vom Browser erwartet richtig an die Höhenangabe.
Wer sich selbst überzeugen möchte, kann meine Test-Seite ja besuchen: [Link entfernt, da Seite nicht mehr vorhanden]
Habt ihr eine Idee, dieses Problem zu umgehen?
Gruß,
Ahnenforscher
Bitte markiere auch die Kommentare, die zur Lösung des Beitrags beigetragen haben
Content-ID: 26354
Url: https://administrator.de/forum/feste-hoehe-eines-div-layers-mit-formular-erzwingen-26354.html
Ausgedruckt am: 15.05.2025 um 03:05 Uhr
13 Kommentare
Neuester Kommentar
@17735
Hi,
das ist nun mal das Leid, dass einige TAGS von den Browsern unterschiedlich
interpretiert werden.
Was noch dazu kommt, schau dir deine HP mit Firefox unter Windows und unter
Linux an!!!
Um ein einigermaßen einheitliches Layout darzustellen, kannst du eine "Browserweiche"
einsetzen.
Mittels JavaScript kannst du herausbekommen, welcher Browser benutzt wird.
Je nachdem, welcher Browser benutzt wird, kannst du dann dein Layout anpassen.
Such mal mit Google nach Browserweiche. Da gibts 'ne Menge Tipps.
Gruß, schönen Sonntag
Günni
Hi,
das ist nun mal das Leid, dass einige TAGS von den Browsern unterschiedlich
interpretiert werden.
Was noch dazu kommt, schau dir deine HP mit Firefox unter Windows und unter
Linux an!!!
Um ein einigermaßen einheitliches Layout darzustellen, kannst du eine "Browserweiche"
einsetzen.
Mittels JavaScript kannst du herausbekommen, welcher Browser benutzt wird.
document.write(navigator.appName);
Such mal mit Google nach Browserweiche. Da gibts 'ne Menge Tipps.
Gruß, schönen Sonntag
Günni

Moin,
der IE schert sich leider einen Dreck um die Höhenanweisung bei DIVS
... ärgert mich regelmäßig.
Behilf Dir mit einer Tabelle im DIV-Tag, die 30px Höhe hat, geht leider nicht anders ...
Gruß, Rene
der IE schert sich leider einen Dreck um die Höhenanweisung bei DIVS
Behilf Dir mit einer Tabelle im DIV-Tag, die 30px Höhe hat, geht leider nicht anders ...
Gruß, Rene

Probier das mal:
(div id="search" style="background-color:#CCCCCC")
(form name="form1" method="post" action="")
(table width="100%" height="30" border="0" cellpadding="0" cellspacing="0")
(tr)
(td align="center")(input name="textfield" type="text" value="Suchbegriff hier eintippen!" size="31" maxlength="255")
(input type="submit" name="Submit" value="Google Search")(/td)
(/tr)
(/table)(/form)
(/div)
ACHTUNG! Die runden Klammern durch die eckigen ersetzen!
Ist nur ein "Hack", bitte durch Deine Tags und Parameter ergänzen.
Gruß, Rene
(div id="search" style="background-color:#CCCCCC")
(form name="form1" method="post" action="")
(table width="100%" height="30" border="0" cellpadding="0" cellspacing="0")
(tr)
(td align="center")(input name="textfield" type="text" value="Suchbegriff hier eintippen!" size="31" maxlength="255")
(input type="submit" name="Submit" value="Google Search")(/td)
(/tr)
(/table)(/form)
(/div)
ACHTUNG! Die runden Klammern durch die eckigen ersetzen!
Ist nur ein "Hack", bitte durch Deine Tags und Parameter ergänzen.
Gruß, Rene
@17735
Hi,
ich habe deinen Quelltext kopiert und etwas rumexperimentiert.
1. Div?s eingefärbt, damit man sie sieht.
2. Die Höhenanweisung aus dem Div ?search? rausgenommen,und
im Headbereich untergebracht(für alle Div?s)
3. In der Tabelle Border auf 1 gesetzt, damit man sieht,
dass der Div ?search? über die Tabelle hinausgeht.
Beide Browser, IE und Firefox zeigen bei mir(zuhause) exakt das
gleiche Ergebnis.
Leerzeichen nach < entfernen !!!
Aber der eigentliche Grund dürfte sein, dass du max-height anstatt height
geschrieben hast.
Ein weiterer Grund, falls es in Echt(übers Internet), nicht funktioniert, könnte
die Verschachtelung deiner Div?s sein.
Dein Search-Div ist ja da an dritter Stelle, und der IE zeigt wahrscheinlich
dann die übergeordneten Div?s auch an, obwohl da nichts drin steht.
Dann sieht es nur so aus, als wenn der Search-Div ?unnötig? hoch sei.
Wenn es also immer noch nicht funktioniert, würde ich die Verschachtelung
auflösen und die Div?s positionieren, z.B.:
#search{ position:absolute; top:50px; left:10px; width:150px; height:30px; }
top= n Pixel von oben
left=n Pixel von links
Gruß
Günni
Hi,
ich habe deinen Quelltext kopiert und etwas rumexperimentiert.
1. Div?s eingefärbt, damit man sie sieht.
2. Die Höhenanweisung aus dem Div ?search? rausgenommen,und
im Headbereich untergebracht(für alle Div?s)
3. In der Tabelle Border auf 1 gesetzt, damit man sieht,
dass der Div ?search? über die Tabelle hinausgeht.
Beide Browser, IE und Firefox zeigen bei mir(zuhause) exakt das
gleiche Ergebnis.
< ?xml version="1.0"?>
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
< html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
< head>
< title>BETA-Seite< /title>
< link rel="stylesheet" type="text/css" href="pagestyle.css" />
< meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
< script language="JavaScript 1.2" type="text/javascript">
function google_check() {
if (document.googleform.q.value.length == '') {
alert("Bitte geben Sie einen oder mehrere Suchbegriffe ein!");document.googleform.q.focus();return false;}
if (document.googleform.q.value == 'Suchbegriff hier eintippen!') {
alert("Bitte geben Sie einen oder mehrere Suchbegriffe ein!");document.googleform.q.focus();return false;}
}
< /script>
< !-- Styles für die Div's // -->
< style type="text/css">
< !--
#root{background-color: #00ffff;height:500px;}
#logo{background-color: #808080;height:80px;}
#search{background-color: #00ff00;height:70px;}
#sidebar{background-color:#808000;height:90px;}
#content{background-color:#008080;height:60px;}
#infobar{background-color:#008000;height:100px;}
-->
< /style>
< /head>
< body bgcolor="#ffffff" style="margin-left:0px;margin-top:0px;margin-right:0px;margin-bottom:0px;">
< div id="root">
root-div< br>
1.Zeile< br>
2.Zeile
< div id="logo">
logo-div
< /div>
< div id="search">
< form name="form1" method="post" action="">< table width="100%" border="1" cellpadding="0" cellspacing="0">< tr>< td align="center" style="height:30px;">search-div < input name="textfield" type="text" value="Suchbegriff hier eintippen!" size="31" maxlength="255">< input type="submit" name="Submit" value="Google Search">< /td>< /tr>< /table>< /form>
< /div>
< div id="sidebar">
sidebar-div
< script language="JavaScript 1.2" type="text/javascript" src="clock.js">
< /script>
< br />
< /div>
< div id="content">
content-div -- Dies ist die "Start.php", die über http://peterfolta.pe.funpic.de/beta/neu/default.php?section=start aufgerufen wird.
< /div>
< div id="infobar">
infobar-div -- Hier wird die Infobar zu sehen sein.
< /div>
< br style="clear:both;" />
< /div>
< /body>
< /html>
Leerzeichen nach < entfernen !!!
Aber der eigentliche Grund dürfte sein, dass du max-height anstatt height
geschrieben hast.
Ein weiterer Grund, falls es in Echt(übers Internet), nicht funktioniert, könnte
die Verschachtelung deiner Div?s sein.
Dein Search-Div ist ja da an dritter Stelle, und der IE zeigt wahrscheinlich
dann die übergeordneten Div?s auch an, obwohl da nichts drin steht.
Dann sieht es nur so aus, als wenn der Search-Div ?unnötig? hoch sei.
Wenn es also immer noch nicht funktioniert, würde ich die Verschachtelung
auflösen und die Div?s positionieren, z.B.:
#search{ position:absolute; top:50px; left:10px; width:150px; height:30px; }
top= n Pixel von oben
left=n Pixel von links
Gruß
Günni

Der IE spannt Höhe und Breite eines Containers immer auf die Größe des Inhaltes. Umgehen kann man das, in dem man den style "overflow: hidden;" zuweist. Explizit der IE versteht auch "overflow-y" und "overflow-x". Das ist allerdings nicht standardkonform, lässt sich aber über conditional comments (http://msdn.microsoft.com/workshop/author/dhtml/overview/ccomment_ovw.a ..) einbauen.
Ist der Inhalt des Containers breiter/höher, wird er in der Darstellung abgeschnitten.
Ist der Inhalt des Containers breiter/höher, wird er in der Darstellung abgeschnitten.
Der IE spannt Höhe und Breite eines
Containers immer auf die Größe
des Inhaltes. Umgehen kann man das, in dem
man den style "overflow: hidden;"
zuweist. Explizit der IE versteht auch
"overflow-y" und
"overflow-x". Das ist allerdings
nicht standardkonform, lässt sich aber
über conditional comments
(http://msdn.microsoft.com/workshop/author/dhtml/overview/ccomment_ovw.a ..)
einbauen.
Ist der Inhalt des Containers
breiter/höher, wird er in der
Darstellung abgeschnitten.
Containers immer auf die Größe
des Inhaltes. Umgehen kann man das, in dem
man den style "overflow: hidden;"
zuweist. Explizit der IE versteht auch
"overflow-y" und
"overflow-x". Das ist allerdings
nicht standardkonform, lässt sich aber
über conditional comments
(http://msdn.microsoft.com/workshop/author/dhtml/overview/ccomment_ovw.a ..)
einbauen.
Ist der Inhalt des Containers
breiter/höher, wird er in der
Darstellung abgeschnitten.
@25523,
ich denke mal, nicht nur IE, sondern auch andere Browser "spannen Höhe und Breite eines
Containers immer auf die Größe des Inhaltes."
Denn wenn nicht, wozu brauche ich dann den Layer, wenn der Inhalt eh' nicht angezeigt
wird, wenn also andere Browser nicht die Höhe und Breite um den Inhalt "spannen"?
Oder habe ich das jetzt falsch verstanden?
overflow:hidden scheidet Inhalte ab, die über einen Layer hinausgehen, dessen Größe
mit height:n px width: n px angegeben wurden.
Dazu: der Layer "Search" war ja nicht höher, als die angegeben 30 px,
was sollte da also noch "abgeschnitten" werden?
Na, ich hoffe mal, Ahnenforscher präsentiert uns sein Ergebnis(seine Website),
dann können wir ja weiter diskutieren.
Gruß
Günni

Um es ausführlich zu formulieren: Der IE hält sich nicht an feste Höhen/Breitenangaben, wenn der entsprechende Inhalt höher/breiter ist als das angegebene Maß. Das entspricht nicht dem CSS-Standard und ist ein viel dikutierter Fehler des IE.
Wenn keine Maße angegeben wurden, dann spannt sich der entsprechende Container natürlich immer entsprechend dem Inhalt auf.
Wenn keine Maße angegeben wurden, dann spannt sich der entsprechende Container natürlich immer entsprechend dem Inhalt auf.