|
|||
Mozilla spinnt ? ?
Ja, ich weiß, sehr aussagekräfiger Betreff..... - aber ich kanns mir nicht erklären.
Also: ich hätte gerne ein zentriertes Design, dass sich von oben nach unten durchzieht, ohne Rand oben - soweit kein Problem. Aber:sobald ich Text eingebe und diesen in Absätze packe (also korrekt mit am Anfang und </p> auszeichne), macht Mozilla oben einen Rand. Gebe ich den Text ohne s ein oder in ein weiteres <div>, dann bleibt es oben randlos und so, wie es soll. Hat da jemand eine Erklärung dafür? Hier der Code: Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" > <head> <title>Test</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <style type="text/css"> <!-- html { height: 100%; } body { margin: 0; padding: 0; color:#000; text-align: center; height: 100%; } #box { position:relative; height:100%; width:750px; margin-top:0; margin-left:auto; margin-right:auto; background-color:red; text-align:left; } //--> </style> </head> <body> <div id="box"> Wenn ich hier den Text jetzt in ein weitere Div stecke, dann bleibt der rote Hintergrund der Box bis oben hin stehen - wenn ich aber statt dessen einen korrekten Absatz (mit p) nehme, dann bleibt in Mozilla oben eine Lücke.. ?? Bitte ausprobieren.... </p> </div> </body> </html> |
Sponsored Links |
|
|||
Das liegt daran, das der
</p>-Kontainer eine vorgegebene Definiton hat. Er macht also atomatisch einen Abstand oben und unten. Wenn du <div></div> nimmst, müsste er weg sein. In deinem Fall, lässt du </p> einfach weg. |
Sponsored Links |
|
|||
Den Textabstand oben und unten möchte ich aber behalten - den muss ich dann ja extra definieren, wenn ich den
s ein display:inline mitgebe. Warum rutscht den der ganze Container Box runter, sobald ich Absätze eingebe (sind sicher gut 10pixel)? - Hat da jemand ne Erklärung für? Normalerweise würde ich erwarten (und das machen sowohl Opera als auch der IE ), dass der Text eben etwas Abstand läßt - die Hintergrundfarbe des Containers "box" aber weiterhin bis oben hin geht. Das mit display:inline klappt übrigens nicht - da dann alle Absätze hintereinander gereiht werden und damit der "Absatz" ad absurdum geführt wird. Workaround ist einfach: der erste Absatz kommt in einen <div> statt in ein - dieses <div> bekommt dann noch padding nach oben und unten. Die weiteren Absätze können ganz normal ausgezeichnet werden. Aber sowas ist ja eigentlich nicht im Sinne des Erfinders und nicht im XHTML-Sinne...... Nur nochmal meine Frage: verhält sich Mozilla hier richtig oder nicht? Und wenn ja, wo liegt mein Denkfehler und gibt es einen besseren Workaround? |
|
|||
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head><title>test</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <style type="text/css"> <!-- html, body { height: 100%; margin: 0; padding: 0; color:#000; } #box { height:100%; width:750px; margin: 0 auto; background-color:red; } .clearTop { display: block; height: 0px; line-height: 0%; font-size: 0px; } //--> </style> </head> <body> <div id="box"> <span class="clearTop"></span> P-Tag hat in verschiedenen Browser auch verschiedene Defaults, hier ist es margin-top im Mozilla. </p> </div> </body> </html> Bin mir gar nicht sicher ob der Mozilla den Container nach unten zieht oder nur die Hintergrundfrabe nicht setzt. Des weiteren habe ich diese Probleme damals mit Float-Container gehabt, deshalb mal diese Clear-Lösung erarbeitet.
__________________
</ulle> |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
background-color: -Iexpl.fehler +MOZILLA OK | andijota | CSS | 8 | 03.11.2010 22:00 |
Webseite lässt sich im Mozilla nicht scrollen | xxxarndxxx | CSS | 3 | 30.10.2007 11:58 |
Mozilla Probs | SunAngel | Site- und Layoutcheck | 17 | 03.10.2004 15:55 |
mozilla zickt bei Rahmen um den Inhalt | sgm | CSS | 3 | 27.11.2003 23:21 |
background_color wird im mozilla nicht vererbt | seven21 | CSS | 0 | 26.09.2003 12:09 |