nicht angemeldet
Differenzen zw. Firefox und IE bei Positionierung
Hallo,
aufgrund von Hinweisen in einem anderen Thread, haben ich die Umsetzung meines Layouts von Tabellen auf divs und CSS umgestellt. Der (zugegebenermaßen sicher noch lange nicht perfekte) Code sieht folgendermaßen aus:
------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled</title>
<style>
body {margin: 0px 0px 0px 0px;}
.page {
width:768px;
background-color:#d9d9d9;
border:1px solid gray;
}
.header_container {
width:768px;
height:140px;
background-color:#ffffff;
}
.headerpic {
float: left;
width: 140px;
background-color:#ffffff;
clear: left;
}
.headerlogo {
float:right;
margin-top:75px;
margin-right: 5px;
background-color:#ffffff;
clear:right;
}
.menu1_container {
clear:both;
width: 768px;
background-color: #D9D9D9;
}
.menu1 {
height: 16px;
font-family: Arial, Verdana;
font-size:12px;
margin-left: 0px;
padding-left: 140px;
border-top:1px solid gray;
}
.main_container {width: 768px;}
.menu2 {
float:left;
width: 140px;
max-width:140px;
overflow:hidden;
background-color:#2A296E;
font-family:Tahoma, Arial, Verdana;
font-size:12px;
color:#ffffff;
padding:3px;
}
.content {
margin-left:140px;
padding: 5px;
background-color:#ffffff;
border-left:1px solid gray;
border-top:1px solid gray;
border-bottom:1px solid gray;
font-family:Tahoma, Arial, Verdana;
font-size:13px;
}
.adresse {
position:absolute;
bottom:0px;
left:0px;
width:140px;
padding:3px;
max-width:140px;
font-family:Tahoma, Arial, Verdana;
font-size:9px;
}
.footer_container {
position:relative;
top:0px;
left:0px;
width: 768px;
background-color: #D9D9D9;
}
.footer {
width:768px;
text-align:right;
padding-right:5px;
height: 16px;
font-family: Arial, Verdana;
font-size:12px;
}
</style>
</head>
<body>
<div class="page">
<div class="header_container">
<div class="headerpic"><img src="pics/produktion.jpg"></div>
<div class="headerlogo"><img src="pics/knopp.jpg"></div>
</div>
<div class="menu1_container">
<div class="menu1">
| Unternehmensgruppe | Produkte | Aktuelles | Karriere |
</div>
</div>
<div class="main_container">
<div style="position:relative;">
<div class="menu2">
Muster GmbH<br />
Muster Vertriebs GmbH<br />
Entwicklung<br />
Partner<br />
</div>
<div class="content">
<p>Contentbereich</p>
</div>
<div class="adresse">
Muster GmbH<br />
Postfach 80<br />
D-12345 Musterstadt<br />
Tel: +49(0)0000/0000-0<br />
Fax: +49(0)0000/0000-66<br />
info@muster-gmbh.com<br />
www.muster-gmbh.com
</div>
</div>
</div>
<div class="footer_container">
<div class="footer">
Kontakt | Impressum
</div>
</div>
</div>
</body>
</html>
------------------
Mein Problem stellt such nun so dar, dass Firefox den Adressbereich korrekt darstellt, der Internet Explorer jedoch nicht. Anbei ein Screenshot, der verdeutlicht, was ich meine. Der IE scheint die Positionierung anders zu interpretieren. Wenn ich die Position der Adresse auf left:-140px; setze, dann zeigt es der IE korrekt an und er Firefox natürlich nicht.
Hat jemand eine Lösungsmöglichkeit parat oder kennt eine bessere Lösung?
Eine weitere Frage bezieht sich auf den Contenbereich: Warum rückt der IE den ersten Absatz des Contents stärker ein, als den restlichen Text?
Viele Grüße,
Tobias
-
Hi,
Der (zugegebenermaßen sicher noch lange nicht perfekte) Code sieht folgendermaßen aus:
stimmt, er ist noch nicht perfekt. Das größte Problem dabei ist aber, dass Du von Tabellen auf ein <div>-Suppe umgestellt hast - nicht auf HTML. Daraus resultieren u.a. auch massenweise Klassen anstatt wenige IDs.
<div class="header_container">
<div id="header"> - und verzichte bitte auf Unterstriche in Klassennamen.
<div class="headerpic"><img src="pics/produktion.jpg"></div>
<h1>
<div class="headerlogo"><img src="pics/knopp.jpg"></div>
<h2>
Bei beiden fehlt Text, und bei <img> ist das alt-Attribut zwingend notwendig.
<div class="menu1_container">
<div id="menu"> - und davon gibt es nur eins, auch wenn es aufgeteilt ist. Inhalt ist:
| Unternehmensgruppe | Produkte | Aktuelles | Karriere |
<ul> und
Muster GmbH<br />
Muster Vertriebs GmbH<br />
Entwicklung<br />
Partner<br />noch ein <ul>. Verzichte bitte wann immer möglich auf <br>. Und ganz nebenbei: Entscheide Dich bitte zwischen HTML und XHTML.
<div class="content">
<div id="content">
<div class="adresse">
<address>. Dies ist ein _hervorragendes_ Beispiel dafür, was eine <div>-Suppe anrichtet.
Muster GmbH<br />
Postfach 80<br />[...]
Hier wäre die Alternative zu <br> zugegebenermaßen umständlich.
<div class="footer_container">
<div id="footer">
Kontakt | Impressum
<ul>
Mein Problem stellt such nun so dar, dass Firefox den Adressbereich korrekt darstellt, der Internet Explorer jedoch nicht. Anbei ein Screenshot, der verdeutlicht, was ich meine. Der IE scheint die Positionierung anders zu interpretieren. Wenn ich die Position der Adresse auf left:-140px; setze, dann zeigt es der IE korrekt an und er Firefox natürlich nicht.
Ja. Beschäftige Dich mit CSS-Hacks.
Eine weitere Frage bezieht sich auf den Contenbereich: Warum rückt der IE den ersten Absatz des Contents stärker ein, als den restlichen Text?
Three Pixel Text Jog.
Cheatah
--
X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
X-Will-Answer-Email: No
X-Please-Search-Archive-First: Absolutely Yes -
Hi,
aufgrund von Hinweisen in einem anderen Thread, haben ich die Umsetzung meines Layouts von Tabellen auf divs und CSS umgestellt.
Leider. Du solltest DIVs genauso wenig mißbrauchen wie Tabellen:
<div class="headerpic"><img src="pics/produktion.jpg"></div>
<div class="headerlogo"><img src="pics/knopp.jpg"></div>Die Bilder brauchen kein DIV.
<div class="menu1_container">
<div class="menu1">
| Unternehmensgruppe | Produkte | Aktuelles | Karriere |
</div>
</div>wozu die doppelten DIVs (wo doch eigentlich eine UL angebracht wäre)?
Da Du .page bereits eine Breite zugewiesen hast, sind Breitenangaben für diese Container nicht mehr erforderlich.<div class="main_container">
<div style="position:relative;">nochmal ein völlig überflüssiges DIV. Weise doch .main_container position:relative zu. Das könnte vielleicht auch Dein IE-Problem lösen.
Apropos: auf Unterstriche solltest Du verzichten und in diesen Fällen sinnvoller IDs verwenden.<div class="adresse">
och nö.. :-( Wo ich Dir doch schon <address> ans Herz gelegt hatte.
Eine weitere Frage bezieht sich auf den Contenbereich: Warum rückt der IE den ersten Absatz des Contents stärker ein, als den restlichen Text?
das ist der berühmte 3-Pixel-Bug, der bei nicht-floatenden Elementen neben gefloateten auftritt. Abhilfe: statt float position:absolute oder beide Elemente floaten lassen.
Tobias
freundliche Grüße
Ingo -
Tobias,
Der (zugegebenermaßen sicher noch lange nicht perfekte) Code
Noch sehr lange nicht. Das ist div-Suppe.
HTML ist keine Seitenbeschreibungssprache (sonst hieße es ja PDF), sondern eine Auszeichnungssprache für die logische _Struktur_ eines Dokuments.
<body>
<div class="page">Da ist unnötig, body ist ein Blockelement, dem du alle Formatierungen dieses div geben kannst. BTW, du kennst den Unterschied zwischen class und id? (Universalattribute, Individualformate)
<div class="header_container">
<div class="headerpic"><img src="pics/produktion.jpg"></div>
<div class="headerlogo"><img src="pics/knopp.jpg"></div>
</div>Das ist eine Überschrift. Also h1. Ist auch ein Blockelement, dem du alle Formatierungen dieses div geben kannst.
Und wie sollen User, die keine Bilder angezeigt bekommen, wissen, um welche Firma es geht? Alternativtext für Grafiken ist Pflicht! BTW, Suchmaschinen können auch nicht in Bildern lesen, wie eine solche es einem DAW[tm] (dümmster anzunehmender Webdesigner) in diesem Dialog versucht klarzumachen.
<div class="menu1">
| Unternehmensgruppe | Produkte | Aktuelles | Karriere |
</div>Das ist eine Liste. Also ol oder ul. Ist auch ein Blockelement, dem du alle Formatierungen dieses div geben kannst.
<div class="adresse">
Muster GmbH<br />
Postfach 80<br />
D-12345 Musterstadt<br />
Tel: +49(0)0000/0000-0<br />
Fax: +49(0)0000/0000-66<br />
info@muster-gmbh.com<br />
www.muster-gmbh.com
</div>Das ist eine Adressangabe. Also address. Ist auch ein Blockelement, dem du alle Formatierungen dieses div geben kannst.
Mein Problem stellt such nun so dar, ...
Du hast noch ganz andere Probleme, bzw. der User. Wenn das Browserfenster schmaler ist als 770px + x, muss er horizontal scrollen. Das mag er gar nicht. Und wenn er die Schriftgröße ändert, wie sieht die Seite dann aus?
... oder kennt eine bessere Lösung?
Verwirf die Vorstellung eines pixelgenauen Layouts!
Gunnar
--
„Solang wir noch tanzen können
und richtig echte Tränen flennen,
ist noch alles offen,
ist noch alles drin.“
(Gundermann)-
Und warum red’ ich mir den Mund fusselig, wo doch Cheatah und Ingo auch schon wach sind?
Aber eins hab ich noch:
.menu2 {
width: 140px;
max-width:140px;Welchen Sinn macht die Angabe einer maximalen Breite für Elemente mit fest vorgegebener Breite? (Tritt mehrfach auf.)
Gunnar
--
„Solang wir noch tanzen können
und richtig echte Tränen flennen,
ist noch alles offen,
ist noch alles drin.“
(Gundermann)-
.menu2 {
width: 140px;
max-width:140px;Welchen Sinn macht die Angabe einer maximalen Breite für Elemente mit fest vorgegebener Breite? (Tritt mehrfach auf.)
Firefox hat das falsch dargestellt, wenn ich keine max-width angegeben habe. Weiter unter habe ich nämlich in dieser klasse ein padding eingefügt. firefox addiert dieses padding zu der breite von 140 hinzu, wenn max-width fehlt. das layout wird dann gesprengt.
Gruss, Tobo :-)
-
Tobias,
Firefox hat das falsch dargestellt,
Nein. („Nicht so, wie ich will“ und „falsch“ ist was völlig anderes.
Weiter unter habe ich nämlich in dieser klasse ein padding eingefügt. firefox addiert dieses padding zu der breite von 140 hinzu,
Ja selbstverständlich. Beschäftige dich mal mit dem Box Model.
das layout wird dann gesprengt.
Du meinst deine engen Vorstellungen davon. Erweitere sie.
Gunnar--
„Solang wir noch tanzen können
und richtig echte Tränen flennen,
ist noch alles offen,
ist noch alles drin.“
(Gundermann)-
Tobias,
Firefox hat das falsch dargestellt,
Nein. („Nicht so, wie ich will“ und „falsch“ ist was völlig anderes.
Ok, dann sage ich, dass Firefox und IE das unterschiedlich dargestellt haben. Der IE hat den Bereich 140px breit gelassen und den Text innendrin mit einem Abstand von 3px gerendert. Firefox hat den ganzen Bereich 146px breit gemacht.
Weiter unter habe ich nämlich in dieser klasse ein padding eingefügt. firefox addiert dieses padding zu der breite von 140 hinzu,
Ja selbstverständlich. Beschäftige dich mal mit dem Box Model.
Dann macht es Firefox Standardkonform und der IE nicht. Ich habe halt von mir aus den Anspruch, dass die Seite in den wichtigsten Brwosern auch möglichst gleich dargestellt wird. Wenn dann aber ein Browser das Menü verbreitert und es dadurch in den Contentbereich hineinragt ist das halt nicht mehr gewünscht.
Vielleicht liegt es aber auch einfach nur daran, dass ich von CSS zu wenig Ahnung habe, um das alles zu überblicken.
Viele Grüße,
Tobi :-)
-
-
-
-
Hi,
<body>
<div class="page">Da ist unnötig, body ist ein Blockelement, dem du alle Formatierungen dieses div geben kannst.
Aber nur, wenn Du den IE 5.x und Vorgänger nicht berücksichtigen willst. Versuche einmal, ohne ein solches DIV den Seiteninhalt auf eine bestimmte Breite zu begrenzen, zu zentrieren und auch noch einen border drum zu setzen.
freundliche Grüße
Ingo-
Ingo,
Versuche einmal, ohne ein solches DIV den Seiteninhalt auf eine bestimmte Breite zu begrenzen,
Ich ziehe mein Browserfenster auf diese bestimmte Breite.
zu zentrieren
<center>
SCNR.und auch noch einen border drum zu setzen.
Mein Browserfenster hat einen Rahmen.
;-)
Gunnar--
„Solang wir noch tanzen können
und richtig echte Tränen flennen,
ist noch alles offen,
ist noch alles drin.“
(Gundermann)
-
-
Und wie sollen User, die keine Bilder angezeigt bekommen, wissen, um welche Firma es geht? Alternativtext für Grafiken ist Pflicht! BTW, Suchmaschinen können auch nicht in Bildern lesen, wie eine solche es einem DAW[tm] (dümmster anzunehmender Webdesigner) in diesem Dialog versucht klarzumachen.
Mir geht es nicht darum, hier schon perfekten Code zu posten. Sowas mach ich erst, wenn die anderen Probleme gelöst sind. Mir geht und gings es um das Layoutproblem. Ich habs mit Tabellen probiert und mit divs. Und meine Anforderung ist eigentlich doch garnicht so dramatisch. Links ein Menu, welches blau hinterlegt ist und unterschiedlich groß sein kann. Darunter ein grauer Bereich, an dessen Fuß eine Adresse steht. Rechts von den beiden Bereichen der Contentbereich. Wenn dieser wächst, soll der graue Bereich unter dem Menu mitwachsen, so dass die Adresse mit deren Unterkante immer auf Höhe der Unterkante des Contentbereichs ist.
[snip nützliche Hinweise]
Deine Tipps und Hinweise werde ich bevolgen. Danke! :-)
Mein Problem stellt such nun so dar, ...
Du hast noch ganz andere Probleme, bzw. der User. Wenn das Browserfenster schmaler ist als 770px + x, muss er horizontal scrollen. Das mag er gar nicht. Und wenn er die Schriftgröße ändert, wie sieht die Seite dann aus?
Naja, es ist schon teilweise recht üblich eine Breite vorzugeben, auch wenns unschön ist, oder?. Spiegel-online macht das z.B. so. Es liegt aber auch daran, weil derjenige, für den ich das ganze hier evaluiere, eine feste Breite möchte. Ich selber mache ja später nichtmal die Seite, sondern soll nur Tipps dazu geben und halt evaluieren, ob das machbar ist, was gefordert ist und zwar inkl. hoher Browserkompatibilität.
... oder kennt eine bessere Lösung?
Verwirf die Vorstellung eines pixelgenauen Layouts!
Exakt pixelgenau solls ja garnicht werden. Eigentlich will ich nur die Bedingung erfüllt haben, die ich in diesem Posting weiter oben beschrieben habe. Hätte nie gedacht, dass das solche Probleme aufwirft. :-(
Ehrlich gesagt, ist es das erste Mal, dass ich mit Tabellenlayout nicht mehr weiterkam und diesen Weg beschritten habe.
Viele Grüße,
Tobias-
Hi,
Mir geht es nicht darum, hier schon perfekten Code zu posten. Sowas mach ich erst, wenn die anderen Probleme gelöst sind.
das ist aber unnötige doppelte Arbeit. Außerdem vermehren sich die möglichen Probleme und wird die Fehlersuche erschwert, je mehr Elemente Du verwendest. Wenn Du Dich von vornherein auf die _erforderlichen_ Elemente beschränkst und dann noch kurz darüber nachdenkst, _welche_ hier sinnvoll wären, hast Du nur Vorteile.
freundliche Grüße
Ingo
-
-
-
Hi,
ich habe mich jetzt nicht mit deinen speziellen Fall beschäftigt und ich werde auch nicht alles andere an deiner Page kritisieren... Ich gebe einfach eine allgemeine Antowrt zum Thema. Ich hatte ähnliche Probleme auch. Das Problem war meistens, das die Broswer eigene Margin oder Padding Angaben benutzen. Viele Probleme haben sich bei mir gelöst, als ich diese Angaben selber fetgelagt habe, z.B. Margin:0px; Padding:5px;....Aber ganz pixelgenau geht's eigentlich nicht...
Ciao