CSS u. Firefox nicht kompatibel? oder was ist hier falsch

Blue

Hallo ihr lieben Helfer,

erstmal wünsche ich ein Frohes Fest gehabt zu haben und nun übergangslos zum Wesentlichen

Ich versuche mich in tabellenloser Codierung und habe erstmal probeweise ein Boxenmodell erstellt. Im html editor (phase5) und im ie wird es schön sauber dargestellt. Im ff liegen die 5 Boxen (div-container) aber irgendwie schräg durcheinander.

http://www.sometimesblue.gmxhome.de/boxen.html

Bitte nicht über das "Design" oder die Frage warum ich diese Boxen so haben möchte diskutieren, es dient für mich als alter Tabellenfreak nur zum Lernen sauberer Codierung.

Danke schon mal

Blue

iskdjim

hmm, ie und FF geben oft styles unterschiedlich aus, da man kann nun darüber streiten welcher browser diese richtig darstellt ;)...ich bin der meinung FF

zeig mal die css styles...dann kann ich dir eher weiterhelfen...

Blue

Danke, die unterschiedliche Darstellung der Browser ist normalerweise durch sauberere zu cods (bei ff) kein Problem und ich hoffe, dass ich das hier geschafft habe. Aber schau mal drüber!

Code

<style type="text/css">
<!--
body
{
 font-family:Verdana;
 font-size:12px;
 background-color:#FFFFFF;
 text-align:center;
 margin:0px;
}
.box0 {
margin:50px;
border:0px solid #FFFFFF;
width:900px;
float:left;
}
.box1 {
padding:0px;
border:0px solid #FFFFFF;
width:280px;
height: 600px;
float:left;
}
.box2 {
padding:0px;
border:0px solid #E2E2E2;
width:620px;
height: 160px;
float:right;
padding-left:132px;
}
.box3 {
padding:30px;
border:0px solid #FFFFFF;
width:488px;
height: 410px;
float:left;
padding-left:20px;
}
.box3a {
padding:0px;
border:0px solid #E2E2E2;
width:132px;
height:440px;
float:right;
}


.box4 {
padding:0px;
border:0px solid black;
width:488px;
height: 30px;
float:left;
}
.box1{
background:#FF7D00;
}


.box2{
background:#FF9E00;
}
.box3{
background:#FFBE00;
}
.box3a{
background:#FFDF00;
}
.box4{
background:#FFFF00
}
-->
</style>

Alles anzeigen

Helfer in Kürze

Probier mal:

.box2 {
border:0px solid #E2E2E2;
width:620px;
height: 160px;
padding-left:280px;
}

Müsste gehen.

Blue

wir kommen der Sache näher

guckst du

aber es ist immer noch nicht richtig

aber Danke ich bastel noch was ...
p.s.
ich habe schon gebastelt - wenn ich alle width u. height Angaben rausnehme u. statt dessen img einfüge sieht es normal aus. Leider ist das blöd, weil eigentlich ja auch nocht text da hin soll.

Vielleicht hat ja jetzt jemand noch eine Idee

Tags