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, 11058 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
Windows 7

Windows 7 - Server 2008 R2: Exploit für Total Meltdown verfügbar

Information von kgborn vor 1 TagWindows 7

Kleine Information für Administratoren, die für die Updates von Windows 7 SP1 und Windows Server 2008 R2 SP1 verantwortlich ...

Sicherheit

Zero Day-Schwachstelle im Internet Explorer - wird von APT bereits ausgenutzt

Information von kgborn vor 1 TagSicherheit

Im Kernel des Internet Explorer scheint es eine Zero Day-Lücke zu geben, die von staatlichen Akteuren (APT) im Rahmen ...

Microsoft
Folder Security Viewer-Lizenzen zu gewinnen
Information von kgborn vor 1 TagMicrosoft

Ich nehme das Thema mal in Absprache mit Frank hier auf, da es für den einen oder anderen Administrator ...

Hardware

Feueralarm killt Festplatten in Rechenzentrum - führt zu größerem Ausfall

Information von kgborn vor 1 TagHardware12 Kommentare

Noch ein kleiner Beitrag für Administratoren, die in Rechenzentren aktiv sind - so als Fingerzeig. Denn es gibt Szenarien, ...

Heiß diskutierte Inhalte
C und C++
Frage1 C Programmierung-Makefile Frage2 PHP-Programmierung HTTP-Fehler 404
Frage von KatalinaC und C++27 Kommentare

Hallo, ich habe 2 Fragen, die nichts miteinander zu tun haben aber mit denen ich mich gerade beschäftige: 1. ...

Linux
Linux Server oder Windows Server - lohnt eine Umstellung auf Linux und ebenso basierende SW bei einer langfristigen Planung?
Frage von motus5Linux27 Kommentare

Wir brauchen bei uns einen neuen Server. Dieser wird als Fileserver, Domäne Controller sowie Exchange Server verwendet. Wir versuchen ...

LAN, WAN, Wireless
Watchguard T15 VPN Einrichtung
gelöst Frage von thomasjayLAN, WAN, Wireless22 Kommentare

Hallo zusammen, wir möchten gerne über unsere Watchguard T15 einen VPN-Tunnel (Mobile VPN with IPSec) einrichten! Als Client nutzen ...

DSL, VDSL
ISP Wechsel auf Vodefone Koax, Gebäudeverkabelung nur per Cat 7
gelöst Frage von wusa88DSL, VDSL19 Kommentare

Hallo Zusammen, ich bin momentan bei Mnet als Glasfaser Kunde und möchte Preis/Leistungs-Technisch zu Kabel Deutschland / Vodafone wechseln. ...