nicht angemeldet
Css und der IE, Anfänger braucht Hilfe...
apselIch 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...
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;
}
Das html-Gerüst sieht so aus:
<body>
<p class="box1">Test 1</p>
<span class="box2">Startseite</span>
</body>
-
Hallo Mark,
ich hab mir zwar nicht die Mühe gemacht, aus Deinen Angaben eine Webseite zu bauen (Tipp: evtl. das nächste mal als Webseite öffentlich zur Verfügung stellen)
aber ich denke als Anfänger hast Du vielleicht nicht die Seite
Der Box-Modell-Fehler des Internet Explorer
gelesen und
diese (DocType)Gruß, Robert
-
Hallo Robert, hallo Kai,
ich habe unten mal das komplette html/css-Gerüst angehängt.
Das Problem tritt sowohl mit dem IE7 als auch mit dem IE8 auf.Klar lassen sich css-Anweisungen zusammenfassen, aber für mich als Anfänger ist es einfach übersichtlicher die Anweisungen für die einzelnen Boxen getrennt zu betrachten.
Vereinfachen kann ich es ja immer noch...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//DE" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
<title>Untitled Document</title>
<style type="text/css">
<!--
.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;
}-->
</style>
</head><body>
<p class="box1">Test 1</p>
<p class="box2">Startseite</p>
</body>
</html>-
Klar lassen sich css-Anweisungen zusammenfassen, aber für mich als Anfänger ist es einfach übersichtlicher die Anweisungen für die einzelnen Boxen getrennt zu betrachten.
Hallo Mark,
nein, auch für Dich wird's übersichtlicher, wenn da weit weniger Text steht.
Das erfordert von Dir einen gedanklichen Switch.
DRY - don't repeat yourself!Gruß, Robert
-
Hallo Robert, hallo Kai,
ich habe unten mal das komplette html/css-Gerüst angehängt.
Das Problem tritt sowohl mit dem IE7 als auch mit dem IE8 auf.Sure?
Ich hab mir mal die Mühe gemacht, das als html-Datei anzulegen - und es wird richtig angezeigt im IE 8 - wie im FF 3.6.
Der Doctype macht den Unterschied!
Hast Du den bei Deinem Test schon drin?Gruß, Robert
-
-
-
[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:? -
Om nah hoo pez nyeetz,
Was kann ich tun?
Such dir ein Tutorial! Es ist nicht sinnvoll, einen Absatz (p) wie eine Box zu behandeln. Das gleiche gilt für das Span-Element.
Wenn man etwas probieren möchte, z.B. die Positionierung, braucht man vielleicht nicht unbedingt mit Text-farben und font-weight experimentieren. Ein Tutorial zu position gibts hier aber ohne dir zu nahe treten zu wollen, denke ich, du musst noch weiter am Anfang anfangen.Matthias
--
-
Hallo Matthias,
heißt das nun, dass du auch nicht weißt, wo der Fehler im IE liegt?
-
Om nah hoo pez nyeetz,
heißt das nun, dass du auch nicht weißt, wo der Fehler im IE liegt?
das heißt vor allem, dass ich mir nicht die Mühe gemacht habe, danach zu suchen, weil dein Quelltext viel mehr Probleme zu Tage treten lässt, als die Ansicht im IE. Hinweise dazu sind Kai345 und fux ja gekommen. Beschäftige dich ernsthaft mit den Grundlagen. Selfhtml ist da eine gute Wahl oder auch CSS4you.
Matthias
--
-
-