nicht angemeldet
CSS Design bei FF 2px Fehler, warum ???
Hallo
ich melde mich heute zum 1. Mal in so einem Forum
da ich bis jetzt meine Projekte in stiller Arbei geschafft habe.
Ich bin schon über 2 Tage dabei einen 2-Pixel-Fehler der in meinem
CSS Design nur in Firefox auftritt zu beseitigen. Selbst nach neu-Coding war er noch da.
Mein CSS-Design besteht
1. aus den allumfassenden div-Block ( class="all" ),
2. aus der Logo-Leiste die als erstes folgt ( class="kopf"),
3. aus dem links gefloateten Menü unter der Logo-Leiste( class="menue"),
4. aus einem div-block ( class="box"), der den inhalt ( class="inhalt")
und die rechte Menü-Leiste ( class="tool") beinhaltet,
Wichtig: Inhalt und rechtes menü befinden sich in einem div-block
damit die toolleiste in ihm rechts gefloatet werden kann und der
inhalt sie um fließt.
5. und aus der Fuss-Leiste ( class="fuss") und der darunter
liegenden extra-Leißte ( class="copy") für angaben wie copyright usw.
beinhaltet.
Der Fehler liegt darin das die "box" vom rechten Rand
2px zu weit links ist. Ohne das ich weiß warum. (Links guckt sie allerdings nicht raus)
Der fehler tritt nur im FF auf.
Hier kommt der code:
[CODE]
<html>
<head>
<style type="text/css">
body {
text-align:center;
}
/*////////////////////////*/
div.all {
margin:0 auto;
text-align:center;
width:80%;
}
/*////////////////////////*/
div.kopf {
width:100%;
border:1px solid black;
}
/*////////////////////////*/
div.menue {
width:16%;
float:left;
margin-bottom:4px;
text-align:left;
border:1px solid black;border-top:0px;
}
/*////////////////////////*/
div.box {
width:83%;
float:right;
text-align:left;
margin-bottom:4px;
border:1px solid black;border-top:0px;
}
/*////////////////////////*/
div.tool {
width:19.2%;
float:right;
margin-left:2px;
border:1px solid black;border-top:0px;border-right:0px;
}
/*////////////////////////
div.inhalt {
width:100%;
border:1px solid black;border-top:0px;
margin:0 auto;
text-align:left;
}
////////////////////////*/
div.fuss {
clear:both;
margin:0 auto;
width:100%;
border:1px solid black;
}
/*////////////////////////*/
div.copy {
width:100%;
margin:0 auto;
text-align:center;
}
</style>
</head>
<body>
<div class="all">
<!--////////////////////////////////////////-->
<div class="kopf">
<h1 style="margin:0px;">Dummy Dummy</h1>
</div>
<!--////////////////////////////////////////-->
<div class="menue"><br><br><br><br><br><br></div>
<!--////////////////////////////////////////-->
<div class="box">
<!--///////////////////-->
<div class="tool"><br><br><br><br><br><br></div>
<!--///////////////////-->
Dummy Dummy Dummy Dummy Dummy Dummy
Dummy Dummy Dummy Dummy Dummy Dummy
<!--///////////////////-->
</div>
<!--////////////////////////////////////////-->
<div class="fuss">
Dummy | Dummy | Dummy | Dummy
</div>
<div class="copy">
Copyright © by Dummy
</div>
<!--////////////////////////////////////////-->
</div>
</body>
</html>
[/CODE]
Ich hoffe ihr könnt mir irgendeinen Tipp geben!
Sebi
-
Hoi,
schmeiss die ganzen width:100% raus. Ein Div erstreckt sich eh über die ganze Breite und wenn du ihm sagst width:100%, dann ist dein Div so breit wie ihm der umschließende Container Platz läßt, plus 1 Pixel linker und 1 Pixel rechter Rand.
Gruß Ben
-
Hallo,
Ich hoffe ihr könnt mir irgendeinen Tipp geben!
Falls das dein kompletter Code war, solltest du dich evtl. erst mal mit dem http://de.selfhtml.org/css/formate/box_modell.htm#box_model_bug@title=Box-Modell-Fehler des Internet Explorers auseinander setzen.
Ich denke mal, du hast einen Rahmen und ziehst ihn von der Gesamtbreite ab. Dabei wird er laut W3C addiert.
Du solltest also eine vollständige http://de.selfhtml.org/html/allgemein/grundgeruest.htm#dokumenttyp@title=Dokumenttyp-Deklaration verwenden.
mfg. Daniel