nicht angemeldet
Float-Problem mit Mozilla, Ausrichtungsproblem beim IE
0 0 0 0
Float-Problem mit Mozilla, Ausrichtungsproblem beim IE
Hallo allerseits,
ich bin gerade bei der Neugestaltung einer Startseite und dabei auf zwei Probleme gestoßen. Der Entwurf für die Neugestaltung findet sich unter http://www.don-mcduck.de/index-neu.php, die CSS-Datei unter http://www.don-mcduck.de/startseiten-gestaltung.css.
Eigentlich sollte die Startseite ungefähr so wie auf diesem Opera-Bildschirmphoto aussehen (ca. 320 KB): http://www.don-mcduck.de/temp/startseite.jpg.
Im Mozilla (V.1.7.1) wird aber die Oberkante der Box #Newsbalken, die mittels float:left neben den anderen, ebenfalls links gefloateten und mittels clear:left untereinandergebrachten, platziert ist, vertikal nicht an der oberen Kante der umschließenden Box ausgerichtet, sondern an der Oberkante der vorangehenden Box #Inhalt. Dies entspricht aber imho nicht den Float-Regeln, wie sie unter http://www.edition-w3c.de/TR/1998/REC-CSS2-19980512/kap09.html#heading-9.5 festgeschrieben sind. Laut denen ist diese Box an der Oberkante des umschließenden Elements und so weit oben wie möglich auszurichten.
Meine Frage ist nun, ob meine Gedanken dazu richtig sind und wie ich diesen Bug, so er denn einer ist, umgehen kann.
Zum zweiten werden die h2-Überschriften im IE 6 in den Boxen, bei denen die Textausrichtung auf zentriert gesetzt ist, fälschlicherweise mittig ausgerichtet. Wie kann ich das verhindern und gleichzeitig die zentrierte Textausrichtung beibehalten?
MfG,
Max.
-
Im Mozilla (V.1.7.1) wird aber die Oberkante der Box #Newsbalken, die mittels float:left neben den anderen, ebenfalls links gefloateten und mittels clear:left untereinandergebrachten, platziert ist, vertikal nicht an der oberen Kante der umschließenden Box ausgerichtet, sondern an der Oberkante der vorangehenden Box #Inhalt. Dies entspricht aber imho nicht den Float-Regeln, wie sie unter http://www.edition-w3c.de/TR/1998/REC-CSS2-19980512/kap09.html#heading-9.5 festgeschrieben sind. Laut denen ist diese Box an der Oberkante des umschließenden Elements und so weit oben wie möglich auszurichten.
Meine Frage ist nun, ob meine Gedanken dazu richtig sind und wie ich diesen Bug, so er denn einer ist, umgehen kann.konqueror macht's genauso. Das sprich gegen Bug. Was für ein clear:left? Vielleicht stört das?
Zum zweiten werden die h2-Überschriften im IE 6 in den Boxen, bei denen die Textausrichtung auf zentriert gesetzt ist, fälschlicherweise mittig ausgerichtet. Wie kann ich das verhindern und gleichzeitig die zentrierte Textausrichtung beibehalten?
oben den exakten Doctype rein, dann benimmt sich der MSIE6 wieder wie ein Browser und kann zwischen text-align:center; und margin:auto; unterscheiden.
OT: hast du für die Bilder 'ne Lizenz?
-
Hallo Kai,
konqueror macht's genauso. Das sprich gegen Bug. Was für ein clear:left? Vielleicht stört das?
Ist Konquerors Parser nicht aus Mozilla hervorgegangen? Und nur viele oder die Mehrheit es so machen, muss 's deswegen noch lange nicht richtig sein (siehe IE) ...
Wo clear:left zum Zuge kommt, habe ich schon beschrieben, auf keinen Fall aber beim #Newsbalken.oben den exakten Doctype rein, dann benimmt sich der MSIE6 wieder wie ein Browser und kann zwischen text-align:center; und margin:auto; unterscheiden.
Du meintest wohl, ich solle noch Strict einfügen, das hat aber leider nicht geholfen ...
OT: hast du für die Bilder 'ne Lizenz?
Wieso liest du nicht mal den Hinweis am Ende des Impressums?
MfG,
Max.-
Ist Konquerors Parser nicht aus Mozilla hervorgegangen?
NEIIIIIIIIIIIIIIIIIIN (fragt dauernd einer)
Und nur viele oder die Mehrheit es so machen, muss 's deswegen noch lange nicht richtig sein (siehe IE) ...
wenn's der IE anders macht, macht's der IE meistens falsch ;)
Du meintest wohl, ich solle noch Strict einfügen, das hat aber leider nicht geholfen ...
nein, du sollst die URL mit reinsetzen.
Wieso liest du nicht mal den Hinweis am Ende des Impressums?
weil das keinen Sinn macht. Entweder arbeitest du für Disney, oder hier klaut einer zumindest das Muster.
-
NEIIIIIIIIIIIIIIIIIIN (fragt dauernd einer)
In Ordnung, wieder 'was gelernt :).
wenn's der IE anders macht, macht's der IE meistens falsch ;)
Und wenn's der Opera anders macht, macht's der Opera meistens richtig ;).
nein, du sollst die URL mit reinsetzen.
Aber die URL ist doch schon 'reingesetzt ...
weil das keinen Sinn macht. Entweder arbeitest du für Disney, oder hier klaut einer zumindest das Muster.
Bei ersterem hast du erstmal voll recht, da etwas höchstens Sinn *ergeben* oder Sinn *haben*, aber nie Sinn machen kann. Da du vermutlich meintest, es hättte keinen Sinn, gehe ich im weiteren mal davon aus:
Wieso sollen wir hier "das Muster klauen", nur weil wir Don-Rosa-Zeichnungen auf unserer Fanpräsenz verwenden? Wir wollen weder vorgeben, bei Disney angestellt zu sein, noch selbigem Konzern die Profite wegnehmen (wie auch?) ...-
Wieso sollen wir hier "das Muster klauen", nur weil wir Don-Rosa-Zeichnungen auf unserer Fanpräsenz verwenden? Wir wollen weder vorgeben, bei Disney angestellt zu sein, noch selbigem Konzern die Profite wegnehmen (wie auch?) ...
bist du dieser "Don-Rosa"?
ist dieser "Don-Rosa" Zeichner bei Disney?
...wenn auch nur eines davon "nein" ist, ist da was geklaut.-
hi,
bist du dieser "Don-Rosa"?
ist dieser "Don-Rosa" Zeichner bei Disney?
...wenn auch nur eines davon "nein" ist, ist da was geklaut.und wenn zwei mit ja beantwortet werden könnte, hätte vermutlich immer noch der disney-konzern die verwertungsrechte an bildern mit diesen figuren.
gruß,
wahsaga--
I'll try being nicer if you'll try being smarter.
-
-
-
-
-
-
Im Mozilla verhält sich absolut korrekt.
Gruß
Avalon-
hi,
Im Mozilla verhält sich absolut korrekt.
dann müste es aber
IM Mozilla verhält sich absolut korrekt.
heißen ...
gruß,
wahsaga--
I'll try being nicer if you'll try being smarter.-
Hallo wahsaga,
meinst du damit, dass der Mozilla's doch falsch macht und wnen ja, was schlägst du zur Umgehung vor?
Bitte belasse es nicht auf solchen Menscheleien, die helfen wenig weiter ...MfG,
Max.-
hi,
meinst du damit, dass der Mozilla's doch falsch macht
nein, das war ein nicht auf's thema bezogener _scherz_.
Bitte belasse es nicht auf solchen Menscheleien, die helfen wenig weiter ...
und ohne wär's hier langweilig; also versuch bitte nicht, diesen teil der menschlichen komponente hier zu eliminieren.
gruß,
wahsaga--
I'll try being nicer if you'll try being smarter.-
Hallo wahrsaga,
und ohne wär's hier langweilig; also versuch bitte nicht, diesen teil der menschlichen komponente hier zu eliminieren.
Ich bat dich ja auch, es nicht dabei zu *belassen*, d.h. *zusätzlich* zur Menschelei auch noch etwas zum Thema beizutragen ...
MfG,
Max.-
hi,
Ich bat dich ja auch, es nicht dabei zu *belassen*, d.h. *zusätzlich* zur Menschelei auch noch etwas zum Thema beizutragen ...
derzeit leider kaum möglich, da kein mozilla zum testen zur verfügung.
gruß,
wahsaga--
I'll try being nicer if you'll try being smarter.-
derzeit leider kaum möglich, da kein mozilla zum testen zur verfügung.
Schlechte Ausrede!
Gruß
Avalon-
hi,
derzeit leider kaum möglich, da kein mozilla zum testen zur verfügung.
Schlechte Ausrede!
dir dürfte klar sein, dass man nicht an jedem arbeitsplatz administratorrechte hat, und installieren darf, was man möchte.
gruß,
wahsaga--
I'll try being nicer if you'll try being smarter.-
dir dürfte klar sein, dass man nicht an jedem arbeitsplatz administratorrechte hat, und installieren darf, was man möchte.
Gott sei dank weiß keiner, dass es z.B. den Firefox als Downloadpaket gibt, bei dem man nichts installieren muss.
Aber das ist natürlich sooo geheim, dass es sogar auf der Mozilla Seite steht ;)Sehr praktisch übrigens für den USB-Stick in einer Welt voller fremder Browser :D
cheers
Marc-
hi,
Gott sei dank weiß keiner, dass es z.B. den Firefox als Downloadpaket gibt, bei dem man nichts installieren muss.
Aber das ist natürlich sooo geheim, dass es sogar auf der Mozilla Seite steht ;)hör' jetzt bitte auf mit diesem unsinn, und nimm zur kenntnis, dass man nicht überall die software einsetzen darf, die man gerne möchte - selbst ohne installation käme man in einem firmennetzwerk wohl kaum an der firewall vorbei.
gruß,
wahsaga--
I'll try being nicer if you'll try being smarter.
-
-
-
-
-
-
-
-
-
Hallo Avalon,
Im Mozilla verhält sich absolut korrekt.
Mhh ... Meinst du damit, dass die vertikale Ausrichtung der Oberkante vom #Newsbalken an der des #Inhalts im Mozilla korrekt ist, oder dass das ganze bei deiner Mozilla-Version korrekt an der Oberkante der umschließenden Box ausgerichtet wird?
Wenn ersteres der Fall ist, bitte ich dich, das an den entsprechenden Stellen der CSS-2-Spezifikation ([http://www.w3.org/TR/REC-CSS2/visuren.html#floats]) nachzuweisen.
Meiner Interpretation des Abschnittes zu Floats in selbiger nach, verhält sich Mozilla inkorrekt, da dort u.A. gesagt wird:
"The top of the floated box is aligned with the top of the current line box (or bottom of the preceding block box if no line box exists)."
Außerdem:
"A floating box must be placed as high as possible."
Ich könnte mir höchstens vorstellen, dass für Mozilla die derzeitige Zeilenbox die Elemente #Inhalt und #Newsbalken beinhaltet, wäre aber ziemlich unlogisch, dass die anderen Elemente in einer anderen Box sein soll und ginge nur, wenn die Zeilenbox ein rein theoretisches Konstrukt wäre (wobei die Formulierung für mich eher impliziert, dass damit die alles umschließende Div gemeint ist); oder die aktuelle Zeilenbox ist die esrte Zeile der #Inhalts-Box, was aber auch sehr willkürlich erscheint ... Ziemlich schwammige Spezifikation ...
Und wenn du dich nicht auf komplizierte Erklärungen einlassen willst, schöag' doch einfach eine Alternative vor, die auch im Mozilla so, wie von mir beabsichtigt, angezeigt wird.Wenn letzeres der Fall ist, würde mich mal die Version interessieren, bei der's bei dir korrekt angezeigt wird.
MfG,
Max.-
Hallo Avalon,
Im Mozilla verhält sich absolut korrekt.
Mhh ... Meinst du damit, dass die vertikale Ausrichtung der Oberkante vom #Newsbalken an der des #Inhalts im Mozilla korrekt ist, oder dass das ganze bei deiner Mozilla-Version korrekt an der Oberkante der umschließenden Box ausgerichtet wird?
Ersteres (M$IE verhält sich übrigens genau so - obwohl es kein Gütesiegel ist)
Wenn ersteres der Fall ist, bitte ich dich, das an den entsprechenden Stellen der CSS-2-Spezifikation http://www.w3.org/TR/REC-CSS2/visuren.html#floats
nachzuweisen.
Ich zitiere aus dieser Quelle:
"5. The outer top of a floating box may not be higher than the outer top of any block or floated box generated by an element earlier in the source document."
oder in deutscher Übersetzung:
"5. Die äußere obere Kante einer Floating-Box darf nicht höher als die äußere obere Kante einer Block- oder Floating-Box liegen, die von einem früheren Element im Quelldokument erzeugt wurde."Und wenn du dich nicht auf komplizierte Erklärungen einlassen willst, schöag' doch einfach eine Alternative vor, die auch im Mozilla so, wie von mir beabsichtigt, angezeigt wird.
Setze einfach ein klammenrdes div um die divs #logo, #intro und #inhalt und weise ihm float:left; zu. Gegebenfalls hilft auch dem newsdiv die Eigenschat float:left; zu nehmen, dann beginnt es auch ganz oben, dann gibt es aber Probleme mit dem M$IE
Um's nicht zu kompliziert zu machen:
<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><html xmlns="http://www.w3.org/1999/xhtml"
xml:lang="en">
<head>
<title>Test</title>
<style type="text/css">
html, body {width:100%; height:100%;}
.float {float:left ;border:1px solid red;}
.eins {width:100%; height:10em; background-color:lightgreen;}
.zwei {width:100%; height:10em; background-color:yellow;}
.drei {width:30%; height:30em; background-color:lightblue;}
.vier {width:30%; height:90%; margin:1em; border:thin solid blue;}
</style>
<script type="text/javascript">
</script></head>
<body> <div class="float" style="width:65%";>
<div class="float eins">Hier steht Text</div>
<div class="float zwei">Hier steht Text</div></div>
<div class="float drei">Hier steht viel text Text Hier steht viel text Text
Hier steht viel text Text Hier steht viel text Text Hier steht viel text Text Hier steht viel text Text
Hier steht viel text Text Hier steht viel text Text Hier steht viel text Text
Hier steht viel text Text Hier steht viel text Text Hier steht viel text Text
Hier steht viel text Text Hier steht viel text Text Hier steht viel text Text
Hier steht viel text Text Hier steht viel text Text Hier steht viel text Text
Hier steht viel text Text Hier steht viel text Text Hier steht viel text Text
Hier steht viel text Text Hier steht viel text Text Hier steht viel text Text
Hier steht viel text Text Hier steht viel text Text Hier steht viel text Text
Hier steht viel text Text Hier steht viel text Text Hier steht viel text Text
Hier steht viel text Text Hier steht viel text Text Hier steht viel text Text
</div></body>
</html>
Da meine Interpretation der W3C-Spezifikationen und die der Mozilla people einen größeren Gestltungsspielraum zulassen als die von Opera (und wohl auch Deine) ist meine Interpretation nicht zwingend richtig, aber besser. Ich bin daher fest davon überzeugt, daß man beim W3C genauso denkt.
Aber jetzt mal ehrlich, die Lösung war doch naheliegend, da hättest Du doch auch drauf kommen können.
Gruß
Avalon-
Hallo Avalon,
Ersteres (M$IE verhält sich übrigens genau so - obwohl es kein Gütesiegel ist)
Mhh, mein IE zeigt's so wie Opera an; is' jetzt aber auch egal ..
Ich zitiere aus dieser Quelle:
"5. Die äußere obere Kante einer Floating-Box darf nicht höher als die äußere obere Kante einer Block- oder Floating-Box liegen, die von einem früheren Element im Quelldokument erzeugt wurde."Oh, die Regel hab ich wohl (ob absichtlich oder nicht) zugunsten der anderen übersehen, danke noch mal für die Erklärung :).
Setze einfach ein klammenrdes div um die divs #logo, #intro und #inhalt und weise ihm float:left; zu. Gegebenfalls hilft auch dem newsdiv die Eigenschat float:left; zu nehmen, dann beginnt es auch ganz oben, dann gibt es aber Probleme mit dem M$IE
Tja, ein imho strukturell nicht zu rechtfertigende umklammerndes div wollte ich eigentlich vermeiden, werde ich nun aber machen. Übrigens hab ich das auch ohne das Beispiel verstanden :).
Aber jetzt mal ehrlich, die Lösung war doch naheliegend, da hättest Du doch auch drauf kommen können.
Naja, Operas und IEs Darstellung erschien mir in dem Moment logischer und gegen unnötige divs bin ich quasi allergisch :).
Danke nochmal :).
MfG,
Max.-
Naja, Operas und IEs Darstellung erschien mir in dem Moment logischer und gegen unnötige divs bin ich quasi allergisch :).
Das geht mir genauso, aber manchmal geht es nicht anders.
Gruß
Avalon
-
-
-
-
-
Hallo!
Etwas irritierte mich, obs ein Fehler ist und der mit dem Darstellungsproblem zusammenhängt weiß ich nicht.
<img id="Donald" src="bilder/layout/donald.gif" alt="" width="112" height="150">
"Donald" wird lt. css-Datei links gefloatet, hat ebendort in der css aber keine width, die aber unbedingt notwendig ist.
Ich bezweifle, ob eine html-width (112) für diese Regel (gefloatetete Elemente brauchen eine absolute width) eine Ersatz ist.Beste Grüße
Viennamade-
Hallo,
<img id="Donald" src="bilder/layout/donald.gif" alt="" width="112" height="150">
"Donald" wird lt. css-Datei links gefloatet, hat ebendort in der css aber keine width, die aber unbedingt notwendig ist.
Ein replaced element wie img hat immer sogenannte intrinsic dimensions, damit hat es per definitionem eine width.
Ich bezweifle, ob eine html-width (112) für diese Regel (gefloatetete Elemente brauchen eine absolute width) eine Ersatz ist.
»A floated box must have an explicit width (assigned via the 'width' property, or its intrinsic width in the case of replaced elements).«
http://www.w3.org/TR/REC-CSS2/visuren.html#floats
Es ist also ein »Ersatz«. Mehr noch, das width-Attribut könnte auch fehlen. Schau dir die Beispiele direkt darunter an.Mathias
-
Hallo!
Ein replaced element wie img hat immer sogenannte intrinsic dimensions, damit hat es per definitionem eine width.
»A floated box must have an explicit width (assigned via the 'width' property, or its intrinsic width in the case of replaced elements).«
http://www.w3.org/TR/REC-CSS2/visuren.html#floatsAlles klar,
Danke Dir & Andreas
Viennamade
-
-
Hi,
Etwas irritierte mich, obs ein Fehler ist und der mit dem Darstellungsproblem zusammenhängt weiß ich nicht.
<img id="Donald" src="bilder/layout/donald.gif" alt="" width="112" height="150">
"Donald" wird lt. css-Datei links gefloatet, hat ebendort in der css aber keine width, die aber unbedingt notwendig ist.
Ich bezweifle, ob eine html-width (112) für diese Regel (gefloatetete Elemente brauchen eine absolute width) eine Ersatz ist.A floated box must have an explicit width (assigned via the 'width' property, or its intrinsic width in the case of replaced elements).
(http://www.w3.org/TR/REC-CSS2/visuren.html#floats)img ist ein replaced element, hat also eine intrinsic width (nämlich per default die tatsächliche Breite des Bildes, die aber durch das width-Attribut überschrieben werden kann).
cu,
Andreas--
MudGuard? Siehe http://www.Mud-Guard.de/
Fachfragen per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.
-
-
Hi,
Zum zweiten werden die h2-Überschriften im IE 6
wenn Du auch im IE6 getestet hast, dann wundert mich doch sehr, daß die Boxen hier alle untereinander sind (bei 1024px breitem Fenster).
freundliche Grüße
Ingo