Top-Themen

AppleEntwicklungHardwareInternetLinuxMicrosoftMultimediaNetzwerkeOff TopicSicherheitSonstige SystemeVirtualisierungWeiterbildungZusammenarbeit

Aktuelle Themen

Administrator.de FeedbackApache ServerAppleAssemblerAudioAusbildungAuslandBackupBasicBatch & ShellBenchmarksBibliotheken & ToolkitsBlogsCloud-DiensteClusterCMSCPU, RAM, MainboardsCSSC und C++DatenbankenDatenschutzDebianDigitiales FernsehenDNSDrucker und ScannerDSL, VDSLE-BooksE-BusinessE-MailEntwicklungErkennung und -AbwehrExchange ServerFestplatten, SSD, RaidFirewallFlatratesGoogle AndroidGrafikGrafikkarten & MonitoreGroupwareHardwareHosting & HousingHTMLHumor (lol)Hyper-VIconsIDE & EditorenInformationsdiensteInstallationInstant MessagingInternetInternet DomäneniOSISDN & AnaloganschlüsseiTunesJavaJavaScriptKiXtartKVMLAN, WAN, WirelessLinuxLinux DesktopLinux NetzwerkLinux ToolsLinux UserverwaltungLizenzierungMac OS XMicrosoftMicrosoft OfficeMikroTik RouterOSMonitoringMultimediaMultimedia & ZubehörNetzwerkeNetzwerkgrundlagenNetzwerkmanagementNetzwerkprotokolleNotebook & ZubehörNovell NetwareOff TopicOpenOffice, LibreOfficeOutlook & MailPapierkorbPascal und DelphiPeripheriegerätePerlPHPPythonRechtliche FragenRedHat, CentOS, FedoraRouter & RoutingSambaSAN, NAS, DASSchriftartenSchulung & TrainingSEOServerServer-HardwareSicherheitSicherheits-ToolsSicherheitsgrundlagenSolarisSonstige SystemeSoziale NetzwerkeSpeicherkartenStudentenjobs & PraktikumSuche ProjektpartnerSuseSwitche und HubsTipps & TricksTK-Netze & GeräteUbuntuUMTS, EDGE & GPRSUtilitiesVB for ApplicationsVerschlüsselung & ZertifikateVideo & StreamingViren und TrojanerVirtualisierungVisual StudioVmwareVoice over IPWebbrowserWebentwicklungWeiterbildungWindows 7Windows 8Windows 10Windows InstallationWindows MobileWindows NetzwerkWindows ServerWindows SystemdateienWindows ToolsWindows UpdateWindows UserverwaltungWindows VistaWindows XPXenserverXMLZusammenarbeit
GELÖST

Feste Höhe eines DIV-Layers mit Formular erzwingen

Frage Entwicklung CSS

Mitglied: 17735

17735 (Level 2)

19.02.2006, aktualisiert 24.02.2006, 10900 Aufrufe, 13 Kommentare

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
Mitglied: Guenni
19.02.2006 um 10:10 Uhr
@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.
<font class="code">
document.write(navigator.appName);
</font>
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
Bitte warten ..
Mitglied: 10545
19.02.2006 um 10:14 Uhr
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
Bitte warten ..
Mitglied: 17735
19.02.2006 um 10:16 Uhr
@Ahnenforscher

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.
<font class="code">
document.write(navigator.appName);
</font>
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 ,
Ahnenforscher
Bitte warten ..
Mitglied: 17735
19.02.2006 um 10:33 Uhr
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


Das geht leider nicht - siehe mein Quelltext:

&lt;div id="search" style="max-height:30px;">
&lt;table cellpadding="0" cellspacing="0" width="100%" border="0" style="height:30px; max-height:30px;">
&lt;tr>&lt;td style="background-image: url(images/search_background.png);">
&lt;center>&lt;form method="get" name="googleform" action="http://www.google.de/search" target="_blank" onsubmit="return google_check(this)">
&lt;table>&lt;tr>&lt;td>&lt;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!'" />
&lt;input type="hidden" name="hl" value="de" />&lt;input type="submit" name="btnG" value="Google Search" />&lt;/td>&lt;/tr>&lt;/table>&lt;/form>
&lt;/center>&lt;/td>&lt;/tr>&lt;/table>
&lt;/div>

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

Gruß,
Ahnenforscher
Bitte warten ..
Mitglied: 10545
19.02.2006 um 11:05 Uhr
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
Bitte warten ..
Mitglied: 17735
19.02.2006 um 12:02 Uhr
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: <a href="http://peterfolta.pe.funpic.de/test/default.php?section=start" target="_blank">Siehe hier</a>.

Gibts noch ne andere Möglichkeit?


Gruß,
Ahnenforscher
Bitte warten ..
Mitglied: Guenni
19.02.2006 um 23:47 Uhr
@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.

<font class="code">
< ?xml version="1.0"?>
< !DOCTYPE html PUBLIC " -W3CDTD XHTML 1.0 Transitiona lEN"
"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>
</font>




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
Bitte warten ..
Mitglied: 25523
20.02.2006 um 11:44 Uhr
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.
Bitte warten ..
Mitglied: 17735
20.02.2006 um 15:11 Uhr
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! 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! Aber ich hatte nicht viel Zeit und niegels tipp schien mir schneller und etwas einfacher! Trotzdem danke ich natürlich auch Dir!

Gruß,
Ahnenforscher
Bitte warten ..
Mitglied: Guenni
22.02.2006 um 18:39 Uhr
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
Bitte warten ..
Mitglied: 17735
22.02.2006 um 19:21 Uhr
Hi,


@niegel,

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 <a href="http://peterfolta.pe.funpic.de/test/default.php" target="_blank">http://peterfolta.pe.funpic.de/test/default.php</a>" 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
Bitte warten ..
Mitglied: 25523
23.02.2006 um 09:24 Uhr
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.
Bitte warten ..
Neuester Wissensbeitrag
Windows 10

Powershell 5 BSOD

(8)

Tipp von agowa338 zum Thema Windows 10 ...

Ähnliche Inhalte
HTML
gelöst DIV-Container mit variabler Höhe (4)

Frage von dimaqw zum Thema HTML ...

Microsoft Office
Formular Autofill - Infopath (1)

Frage von TlBERlUS zum Thema Microsoft Office ...

Exchange Server
DNS Einstellung - zwei feste IPs für Mailserver (15)

Frage von ivan0s zum Thema Exchange Server ...

Hyper-V
Benötige Hilfe bei Hyper-V-Core 2016 div. Befehle gesucht (4)

Frage von Stefan007 zum Thema Hyper-V ...

Heiß diskutierte Inhalte
LAN, WAN, Wireless
gelöst Server erkennt Client nicht wenn er ausserhalb des DHCP Pools liegt (28)

Frage von Mar-west zum Thema LAN, WAN, Wireless ...

Outlook & Mail
gelöst Outlook 2010 findet ost datei nicht (19)

Frage von Floh21 zum Thema Outlook & Mail ...

Microsoft
Ordner mit LW-Buchstaben versehen und benennen (19)

Frage von Xaero1982 zum Thema Microsoft ...

Netzwerkmanagement
gelöst Anregungen, kleiner Betrieb, IT-Umgebung (18)

Frage von Unwichtig zum Thema Netzwerkmanagement ...