nicht angemeldet
Hallo Stanload,
Ich nutze MS und IE55. Nur, wenn ich im _Content_ eine feste Höhe mitgebe, entsteht zwischen den linken Boxen und dem Textfeld eine Spalte, obwohl die linken Boxen eigentlich ein wenig in das Textfeld überlappen sollten. Gebe ich die Höhe nicht an, dann schaut's richtig aus.
Das scheint insgesamt ein MSIE-Fehler zu sein. Du versuchst die Überlappung mit kleinerem margin-left als beim normalen Nebeneinanderfließen nötig zu realisieren. Das ist meines Wissens so nicht bzw. nur eben im MSIE möglich.
Die Überlappung im Opera kommt daher, dass du komplett nach dem MSIE-Boxmodell arbeitest.
#menu {width:135px;}
.mcontent {width:135px; padding: 3px 3px 3px 3px;}
Bei einem solchen Konstrukt etwa ist die Gesamtbreite des Elements mit der Klasse mcontent dem W3C-Boxmodell zufolge 141px (3+135+3). Es wäre also breiter als das Elternelement #menu, daher die fließt es im Mozilla und Opera aus diesem rechts heraus. Das wird besonders ersichtlich, wenn #menu einen Rahmen hat.
Nach dem MSIE-Boxmodell wäre das Element genauso breit wie das Elternelement, da sich das padding-left und padding-right nicht nur width hinzuaddiert, sondern der Inhalt entsprechend auf beiden Seiten um 3px gestaucht wird.
Eine einigermaßen einheitliche Überlappung lässt sich nur anders lösen, beispielsweise durch eine Kombination von position:relative, einer vertikalen Verschiebung mittels left, einem kompensierenden negativen margin-left und einer entsprechenden höheren Gesamtbreite:
#center {
margin:auto; /* Zentrierung in MSIE 6 standardkonformer Modus, Mozilla/Gecko, Opera und anderen Browsern */
width:770px;
text-align:left;
}
#menue {
width:130px;
float:left;
}
.mcontent {
margin-top:20px;
padding:3px;
width:144px; /* Ergibt nach dem W3C-Boxmodell zusammen mit dem padding und border eine Gesamtbreite von 1+3+144+3+1=152px, nach dem MSIE-Boxmodell nur 146px. Hier müsste zwischen MSIE 4/5 und 6 unterschieden werden, damit die Überlappung gleich ist, siehe Tanteks Box Modell Hack bzw. Conditional Comments. Der Wert kann natürlich auch kleiner sein. */
position:relative; left:20px; margin-left:-20px; /* Nach rechts verschieben und über margin-left wieder nach links ziehen */
color:#464c64; background-color:#a7aeb8;
border:1px solid #1c3b63;
font-size:10px;
-moz-border-radius:5px;
}
#content {
margin:0 0 0 135px; /* Minimum wäre 130px, dann müssten die Boxen direkt aneinander anschließen als ob kein margin-left gesetzt wäre. MSIE 6 macht trotzdem immer einen Abstand, da bewirkt margin-left erst ab 134 oder 135px eine Verschiebung nach rechts. */
padding:10px 10px 10px 20px;
height:440px;
background-color:#bfc4cb;
border:1px solid #606060;
}
Allerdings wirst du mit einer festen Höhe in anderen Browsern als MSIE Probleme bekommen, weil dort der Text aus der Box fließen wird und die Höhe nicht automatisch vergrößert wird. Eigentlich ist für eine nach oben offene und anpassungsfähige Mindesthöhe die Eigenschaft min-height http://selfhtml.teamone.de/css/eigenschaften/positionierung.htm#min_height gedacht, welche jedoch nicht breit unterstützt wird. Man könnte mit Selektorhacks arbeiten, um unterschiedlichen Browsern unterschiedliche Styles zuzuordnen:
#content {height:450px;}
body>#content {height:auto; /* Mache vorige Regel rückgängig */ min-height:450px;} /* Der MSIE kann kein Kindselektor, daher ignoriert er diese Regel. Man hofft darauf, dass Browser, die den Kindselektor verstehen, auch min-height umsetzen. */
Eine weitere Möglichkeit wäre das Einfügen eines leeren Elements am Ende von #content, welches clear:left erhält. Dadurch hat #content im MSIE und Opera immer mindestens die Höhe von #menue: link:http://home.t-online.de/home/dj5nu/fanhost/sl/. Mozilla macht das offenbar nicht, wenn margin-left für #content einen bestimmten Wert erreicht (keine Ahnung, woran das liegt, ich dachte immer, Mozilla hätte damit keine Probleme).
Mathias