• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

"komische" Darstellung im FF

harlekin

Neues Mitglied
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.
Bildschirmfoto 2012-02-27 um 14.47.27.jpgBildschirmfoto 2012-02-27 um 14.47.41.jpg
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
 
Kannst Du auch einen Link zur betreffenden Seite liefern? Mit dem Quellcode-Schnippsel kann man nichts erkennen.
 
Nein leider nicht. Die Seite ist noch nicht hochgeladen. Ich zeige einfach mal alles...
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Kreis-Chorgemeinschaft XXXXX e.V.</title>




<style type="text/css" media="screen">


a:link { text-decoration:none; color:#000033; }
a:visited { text-decoration:none; color:#000; }
a:hover { text-decoration:none; text-decoration:underline;}
a:active { text-decoration:none; color:#000033; }






* {
	padding: 0;
	margin: 0;
}


/*Body/Container*/




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;
    
}






.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;
	} 








#table { font-family:Times; font-size:12px; line-height:16px; }
</style>
</head>
<body>




<div id="container">
	    <div id="header">
	    	<h1>Kreis-Chorgemeinschaft XXXXX e.V.</h1>
	    </div>
	    
	    <div id="nav">
	    	<ul class="hasflex">
	    		<li class="box0"><a href="#"><b>STARTSEITE</b></a></li>
                <li class="box0">I</li>
	    		<li class="box0"><a href="verein.html">VEREIN</a></li>
                <li class="box0">I</li>
	    		<li class="box0"><a href="aktuelles.html">AKTUELLES</a></li>
                <li class="box0">I</li>
                <li class="box0"><a href="kontakt.html">KONTAKT</a></li>
	    	</ul>
	    </div>
	    
	    <div id="bigimage">
      <table id="table" cellpadding="0" cellspacing="0" border="0">
      <tr>
      <td>
	    	<img src="bilder/start.jpg" />
         </td>
         <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
         <td valign="top" align="center">
            
        
           <p> <b><a href="termine.html">Gospel Workshop in XXXXXX</b><br />
            16.- 18.3.2012 - Christuskirche</a><br />
            _____________________________________<br />
            
            
             <b><a href="#">Gospel Workshop in XXXXX</b><br />
            16.- 18.3.2012 - Christuskirche</a><br />
            _____________________________________<br />
            
            
             <b><a href="#">Gospel Workshop in XXXXX</b><br />
            16.- 18.3.2012 - Christuskirche</a><br />
            _____________________________________<br />
            
             <b><a href="#">Gospel Workshop in XXXXX</b><br />
            16.- 18.3.2012 - Christuskirche</a><br />
            _____________________________________<br /></p>
         </td>
         </tr>
         </table>
	    </div>
	    
        
        
        
	    <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>
	    
        
        
        
        <br /><br />
	   
	    
	    <div id="twoColums">
        _____________________________________________________________________________________________________________________________
        <br />
        <br />
        
	    	    	<table>
            <tr>
            <td><img src="bilder/logo.gif" /></td>
            <td valign="top">
            <b>Diese Seite ist eine ehrenamtliche Produktion von:</b><br /><br />
            XXxXxX<br />
            Musterstraße 4<br />
            56975 Musterhausen<br />
            e-mail:[email protected]<br />
            </td>
            <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
            <td valign="top"><b>Diensteanbieter:</b><br />
            Kreis-Chorverband XXXXXX e.V.<br />
            <br />
            <b>Registriert unter: VR xxxxx</b><br />
            beim Vereinsregister am Amtgericht XXXXXX
            </td>
            </tr>
            </table>
	    </div>
    </div>
</body>
</html>
 
meiner Ansicht nach liegt es an der Nutzung von Flex.
Das Flex-Framework ist kein Standardkonformes CSS und wird dementsprechend "frei" von den Browsern augelegt.
Ich an deiner Stelle würde darauf verzichten!
An besagter stelle wärest du mit dem Einsatz von float wesentlich besser bedient.
 
Zurück
Oben