Top-Themen

Aktuelle Themen (A bis Z)

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

Mitglied: 17735

17735 (Level 2)

19.02.2006, aktualisiert 24.02.2006, 11066 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 ..
Ähnliche Inhalte
HTML
DIV-Container mit variabler Höhe
gelöst Frage von dimaqwHTML4 Kommentare

Hallo! Kurz zu meinem Problem: ich habe 3 DIVs (Header, Container und Footer), die untereinander stehen. Es muss erreicht ...

CSS
DIV Container einheitliche Höhe
Frage von YanmaiCSS7 Kommentare

Hallo ihr Administratoren, ich habe DIVs mit der display: inline-block Eigenschaft. An sich funktioniert alles, aber wenn in einem ...

CSS
Div boxen nebeneinander platzieren
Frage von deinernstjetztCSS5 Kommentare

Hallo, ich schreibe an einer Website, die aus Überschrift, Seitenverzeichniss und Text besteht. Im Seitenverzeichniss(div box 1) stehen Buttons ...

CSS
Positionierung von DIV - Sidebar
gelöst Frage von chris84CSS5 Kommentare

Hallo Zusammen, ich möchte gern ein eine Sidebar auf meiner Seite einbauen. Leider wird diese aktuell am DIV "Company" ...

Neue Wissensbeiträge
Microsoft
Shadow Defender
Tipp von Hyrule vor 7 StundenMicrosoft

Ich denke viele kennen es: Ein Update oder ein neues Programm und vieles funktioniert nicht mehr wie gewünscht. Die ...

Microsoft
Microsoft verarztet 50 Sicherheitslücken
Tipp von Hyrule vor 4 TagenMicrosoft

Microsoft verarztet mal wieder ein "paar" Sicherheitslücken in ihren Produkten: Und mal wieder Remote Code Execution und der abartige ...

Sicherheit

Prüfskript gegen Spectre und Co. wurde erweitert

Tipp von DerWoWusste vor 5 TagenSicherheit

Moin. Get-SpeculationControlSettings sagt sicherlich den meisten etwas. Mit den neuen Spectrevarianten muss man nun weitere Schritte machen, um zu ...

LAN, WAN, Wireless

IPhone und iPad scheinen Verbindungsprobleme mit Unifi v5.7.23 und 802.11r (schnelles Roaming) zu haben

Erfahrungsbericht von StefanKittel vor 8 TagenLAN, WAN, Wireless4 Kommentare

Hallo, vielleicht hilft dieser recht kurze Bericht doch den Einen oder Anderen. Ausgangspunkt Ein Kunde von mir setzt einen ...

Heiß diskutierte Inhalte
Hyper-V
Hyper V startet nicht wenn eine Offline geschaltene HD integriert wird
Frage von DieAzubinneHyper-V11 Kommentare

Hallö, bei einem PC der mit Windows 10 Pro installiert ist habe ich das Problem, dass der Virtuelle PC ...

CPU, RAM, Mainboards
ASUS P5W DELUXE startet nur manchmal und nur mit 2 GraKas
Frage von Windows10GegnerCPU, RAM, Mainboards10 Kommentare

Hallo, ich habe das o.g. Motherboard erhalten. Egal ob C2D 8400, Pentium D 945 oder P4 670, das teil ...

Virtualisierung
Virtuelle Maschinen langsam unabhängig vom Hypervisor
gelöst Frage von HyruleVirtualisierung8 Kommentare

Hallo, ich möchte gerne zwei bis drei virtuelle Maschinen virtualisieren, darauf sollen jeweils Windows 10 und diverse etwas größere ...

Rechtliche Fragen
Vorlage "private Nutzung dienstlicher Mobiltelefone"
Frage von linos2Rechtliche Fragen8 Kommentare

Hallo zusammen, ich bin auf der Suche nach einer Vorlage für die private Nutzung von dienstlichen Mobiltelefonen. Unsere Firma ...