nicht angemeldet
[latex]Mae govannen![/latex]
Ich mache gerade meinen ersten Gehversuche in css. Als Test habe ich eine zentrierte graue Box mit Rahmen erstellt (box1), innerhalb der am linken unteren Ende Navigationsbuttons (box2) angezeigt werden sollen.
Schon beim ersten Button sieht es im FF so aus, wie es aussehen soll, beim Blick in den IE schließt der Button (box2) leider nicht mit dem unteren Teil der grauen Box ab sondern überlappt...
Welcher IE ist gemeint?
Ich verstehe das Ganze leider nicht, denn sowohl die 1. als auch die 2. Box haben feste Positionsangaben für die Höhe und auch feste Höhenangaben.
Was kann ich tun?
Hier der css-Teil:
.box1 {
font-family: Verdana, Geneva, sans-serif;
font-size: 12px;
color: #FFF;
background-color: #999;
height: 100px;
width: 700px;
border: 1px solid #666;
position: absolute;
left: 50%;
top: 25px;
right: auto;
font-weight: lighter;
padding: 4px;
float: none;
clear: none;
margin-left: -350px;
}
.box2 {
font-family: Verdana, Geneva, sans-serif;
font-size: 12px;
color: #FFF;
background-color: #637BCF;
height: 12px;
width: auto;
border: 1px solid #365A96;
position: absolute;
left: 50%;
top: 125px;
right: auto;
font-weight: lighter;
padding: 4px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: -350px;
}
Gleiche Angaben kann man zusammenfassen und nur unterschiedliche Angaben separat notieren:
.box1, .box2 {
font-family: Verdana, Geneva, sans-serif;
font-size: 12px;
color: #FFF;
/* usw. */
}
.box1 {
background-color: #999;
/* usw. */
}
.box2 {
background-color: #637BCF;
/* usw. */
}
Das html-Gerüst sieht so aus:
<body><p class="box1">Test 1</p>
<span class="box2">Startseite</span>
</body>
Du solltest auf jeden Fall einen Doctype benutzen, um den IE-Boxmodel-Bug zu umgehen. HTML4.01 transitional oder stricht, je nachdem, welche Elemente udn Attribute dein HTML enthält. Strict ist i.d.R. vorzuziehen. Vielleicht behebt das schon einige Probleme.
Zentrieren mit
position: absolute;
left: 50%;
margin-left: -350px;
ist in der Regel auch eine ganz schlechte Idee. Verkleinere mal das Fenster soweit, daß es schmaler ist als die Box, dann siehst du das Problem.
Es gibt andere und bessere Methoden.
Cü,
Kai
Deutsches Liedgut international:
In early rope to mountain we pull
Foren-Stylesheet Site Selfzeug JS-Lookup
SelfCode: sh:( fo:| ch:? rl:( br:< n4:( ie:{ mo:| va:) js:| de:> zu:) fl:( ss:| ls:?
apsel