17735
Goto Top

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

Content-Key: 26354

Url: https://administrator.de/contentid/26354

Printed on: April 19, 2024 at 11:04 o'clock

Member: Guenni
Guenni Feb 19, 2006 at 09:10:06 (UTC)
Goto Top
@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.
document.write(navigator.appName);
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
Mitglied: 10545
10545 Feb 19, 2006 at 09:14:40 (UTC)
Goto Top
Moin,

der IE schert sich leider einen Dreck um die Höhenanweisung bei DIVS face-sad ... ärgert mich regelmäßig.

Behilf Dir mit einer Tabelle im DIV-Tag, die 30px Höhe hat, geht leider nicht anders ... face-sad

Gruß, Rene
Mitglied: 17735
17735 Feb 19, 2006 at 09:16:28 (UTC)
Goto Top
@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.
> document.write(navigator.appName);
> 
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


Ja, schade das die Tags von Browsern unterschiedlich interpretiert werden.

Das Script "navigator.appName" wäre sicher eine Möglichkeit das zu umgehen, allerdings ist mir das zu umständlich. Z. B. wenn Neuerungen auf die Homepage kommen, etc.

Mal sehen wie ich das Problem löse.

Gruß und euch natürlich auch nen schönen Sonntag face-wink,
Ahnenforscher
Mitglied: 17735
17735 Feb 19, 2006 at 09:33:03 (UTC)
Goto Top
Moin,

der IE schert sich leider einen Dreck um die
Höhenanweisung bei DIVS face-sad ...
ärgert mich regelmäßig.

Behilf Dir mit einer Tabelle im DIV-Tag, die
30px Höhe hat, geht leider nicht anders
... face-sad

Gruß, Rene


Das geht leider nicht - siehe mein Quelltext:

<div id="search" style="max-height:30px;">
<table cellpadding="0" cellspacing="0" width="100%" border="0" style="height:30px; max-height:30px;">
<tr><td style="background-image: url(images/search_background.png);">
<center><form method="get" name="googleform" action="http://www.google.de/search" target="_blank" onsubmit="return google_check(this)">
<table><tr><td><input type="text" name="q" size="31" maxlength="255" value="Suchbegriff hier eintippen!" onfocus="if(this.value=='Suchbegriff hier eintippen!') this.value=''" onblur="if(this.value=='') this.value='Suchbegriff hier eintippen!'" />
<input type="hidden" name="hl" value="de" /><input type="submit" name="btnG" value="Google Search" /></td></tr></table></form>
</center></td></tr></table>
</div>

Oder meintest du das anders? Es wäre nämlich sehr wichtig, dass die Homepage richtig angezeigt wird.

Gruß,
Ahnenforscher
Mitglied: 10545
10545 Feb 19, 2006 at 10:05:14 (UTC)
Goto Top
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
Mitglied: 17735
17735 Feb 19, 2006 at 11:02:15 (UTC)
Goto Top
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

geht leider auch nicht! Hab es eins zu eins übernommen: Siehe hier.

Gibts noch ne andere Möglichkeit?


Gruß,
Ahnenforscher
Member: Guenni
Guenni Feb 19, 2006 at 22:47:44 (UTC)
Goto Top
@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.

< ?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
Mitglied: 25523
25523 Feb 20, 2006 at 10:44:25 (UTC)
Goto Top
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.
Mitglied: 17735
17735 Feb 20, 2006 at 14:11:11 (UTC)
Goto Top
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.

Hi!

Juhuu! face-smile face-wink es hat geklappt! Danke, niegel, dein Tipp mit "overflow: hidden;" hat mein Problem behoben!

@ Günni: Danke natürlich auch dir für deinen Tipp und v. a. für deine Zeit und den Aufwand! face-wink Aber ich hatte nicht viel Zeit und niegels tipp schien mir schneller und etwas einfacher! Trotzdem danke ich natürlich auch Dir!

Gruß,
Ahnenforscher
Member: Guenni
Guenni Feb 22, 2006 at 17:39:27 (UTC)
Goto Top
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.

@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
Mitglied: 17735
17735 Feb 22, 2006 at 18:21:07 (UTC)
Goto Top
Hi,


@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?

Naja, der Internet Explorer hat sich nicht an die Angabe "height: 30px;" in der CSS-Datei gehalten und den DIV so groß angezeigt, wie er ihn interpretiert hat, das kommt daher, dass bei dem Element &lt;form> immer noch eine Leer-Zeile darunter steht (nur im IE). Der Firefox 1.5.0.1 dagegen zeigt diese "Leer-Zeile" nicht an und somit den DIV auch in der richtigen Höhe.

Dazu: der Layer "Search"
war ja nicht höher,
als die angegeben 30 px,
was sollte da also noch
"abgeschnitten" werden?

Siehe oben: Leer-Zeile beim "&lt;form>-Tag" im IE!

Na, ich hoffe mal, Ahnenforscher
präsentiert uns sein Ergebnis(seine
Website),
dann können wir ja weiter diskutieren.

Ihr wollt die Seite noch mal sehen? Durch das hinzufügen des Attributes "overflow: hidden;" interpretiert der IE jetzt den DIV auch in der richtigen Höhe. Aber ich habe natürlich den alten Link wieder "aktiviert", die Test-Seite (d. h. diese Seite in diesem Verzeichnis auf meinem Server wird nicht aktualisiert, sondern dient nur dazu, die Lösung des Problems mit der Höhe des DIV-Layers zu demonstrieren!) ist nun wieder unter peterfolta.pe.funpic.de/test/default.php erreichbar!

Gruß
Günni

Ja genau! Gruß von mir auch noch an euch alle, die sich mit dem Thema beschäftigen und mir helfen wollen, bzw. an alle Mitglieder des Forums administrator.de!

Also: Gruß, Ahnenforscher face-big-smile
Mitglied: 25523
25523 Feb 23, 2006 at 08:24:02 (UTC)
Goto Top
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.
Mitglied: 17735
17735 Feb 24, 2006 at 19:16:53 (UTC)
Goto Top
Wichtiger Anhang zu diesem Artikel: <a href="</a>.