Servus,
ich bin z.Z. an einer Homepage dran, wo ich die csss-eigenschaft "display:box" verwende. Nun habe ich als ich die Seite geschrieben habe sie immer nur in Chrome getestet und als ich sie heute im FF geöffnet habe, kam die böse Überraschung - sie wird ganz und gar nicht gleich angezeigt.
Das erste ist Chrome und das zweite FF.
Hier mein Quellcode:
Ich hoffe das Problem ist rauszulesen.
Grüße
ich bin z.Z. an einer Homepage dran, wo ich die csss-eigenschaft "display:box" verwende. Nun habe ich als ich die Seite geschrieben habe sie immer nur in Chrome getestet und als ich sie heute im FF geöffnet habe, kam die böse Überraschung - sie wird ganz und gar nicht gleich angezeigt.
Das erste ist Chrome und das zweite FF.
Hier mein Quellcode:
Code:
body {
font-family: helvetica, arial, sans-serif;
font-size: 13px;
line-height: 23px;
background: #f0f0ed;
color: #000033;
margin: 0px auto;
}
#container {
width: 1000px;
margin: 0 auto;
background: #f0f0ed;
min-height: 1150px; position:relative;
}
/*Header*/
#header {
margin: 0 auto;
width: 900px;
padding-top: 20px;
font-family: Verdana, Geneva, sans-serif;
color:#000033;
}
/*Navigation*/
#nav {
width: 900px;
/*background: #fff;*/
margin: 0 auto;
}
#nav ul {
list-style: none;
}
#nav ul li {
margin: 20px 10px 0 0px;
}
#nav a {
text-decoration: none;
color: #000033;
}
#nav a:hover {
font-weight:bold;
color: #000033;
}
#bigimage {
margin: 20px auto;
width: 900px;
}
#columns {
width: 90%;
/*background: gray;*/
margin: 0px auto; margin-left:50px; margin-right:50px;
}
#columns p {
margin-right: 100px; line-height:15px; font-family:Times; font-size:13px; width:260px; color:#000033;
}
#columns h2 {
margin: 0 30px 0 0px;
line-height: 18px;
font-family: Verdana, Geneva, sans-serif; color:#000033;
}
#twoColums {
width: 900px;
/*background: gray;*/
margin: 0px auto;
}
.hasflex {
display: box;
display: -webkit-box;
display: -moz-box;
}
.box0 {
-webkit-box-flex: 0;
-moz-box-flex: 0;
box-flex: 0;
}
.box1 {
font-family:Verdana, Geneva, sans-serif; font-size:10px;
-webkit-box-flex: 2;
-moz-box-flex: 2;
box-flex: 2;
}
.box2 {
font-family:Verdana, Geneva, sans-serif; font-size:10px; color:#000033;
-webkit-box-flex: 2;
-moz-box-flex: 2;
box-flex: 2; width: 0;
}
.box3 {
font-family:Verdana, Geneva, sans-serif; font-size:10px;
-webkit-box-flex: 2;
-moz-box-flex: 2;
box-flex: 2;
}
.last {
margin-right: 0px;
}
HTML:
...
<div id="columns" class="hasflex"> <div class="box2"> <h2>Veranstaltungen 2012</h2><br /><br /> <p class=""><img src="bilder/kalender.jpg" /><br /><br />Hier finden Sie einen Überblick über die <br />anstehenden Veranstaltungen. <br /><br /> <br /> <br /> <br /> <i><a href="termine.html">Mehr erfahren.</a></i></p> </div> <div class="box2"> <h2>Singen ist im Chor am schönsten</h2><br /> <p class=""><img src="bilder/video.jpg" /><br /><br />Um Ihnen das Gefühl ein bisschen näher zu bringen, möchten wir Ihnen ein vom deutschen Chorverband produziertes Video zeigen. Viel Spaß damit! <br /> <br /> <br /> <i><a href="mitglied_werden.html">Mehr erfahren.</a></i></p> </div> <div class="box2"> <h2>Kinder- und Jugendchor-Konzert "Unsere Jugend singt"</h2><br /> <p class="last"><img src="bilder/kinder.jpg" /><br /><br />Sie sind einfach unvergleichbar. Wenn Kinder- und Jugendchöre die Ergebnisse ihres Übens präsentieren.<br /> <br /> <br /> <br /> <i><a href="#">Mehr erfahren.</a></i></p> </div> </div>
...
Ich hoffe das Problem ist rauszulesen.
Grüße