div's + mozilla ...

Status
Nicht offen für weitere Antworten.
mAu

mAu

Erfahrenes Mitglied
Hi !

Schon wieder ein Problem :) Ich arbeite gerade an einem Web-Projekt für meinen Chef (Apotheker). Ich wollte die Page jetzt ohne Tabellen, also CSS + DIV's gestalten, aber Mozilla will net ;) (bzw. mein Code ist nicht gut :))

Ich habe die DIV's wie folgt geschachtelt :

-page
+logo
+container
-navigation
+navigation-top
+navigation-main
-content
+top-bar
-footer

So... im IE wird der footer richtig angezeigt, in Mozilla ist er jedoch nicht unter der Navigation und unter dem Content... Bild zum veranschaulichen ist im Anhang ...

Die Datei (css + html) ...:
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Apo 1 Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
<!--
body{
 background-color: #F4F4F4;
 text-align: center;
 color: #7090A6;
 font-family: arial,verdana;
 font-size: 12px;
 font-weight: normal;
}

a:link, a:active, a:visited{
 color: #7090A6;
 font-family: arial,verdana;
 font-size: 12px;
 font-weight: normal;
 text-decoration: none;
}

a:hover{
 color: #7090A6;
 font-family: arial,verdana;
 font-size: 12px;
 font-weight: bold;
 text-decoration: none;
}

img.arrow{
 width: 9px;
 height: 9px;
 margin-right: 4px;
}

img.border-right-top{
 width: 20px;
 height: 20px;
 margin-right: 0px;
 float: right;
}

.top-bar-font{
 margin-left: 240px;
 float: left;
}

#page{
 text-align: center;
 width: 800px;
}

#logo{
 background-image: url('gfx/apo1_logo.jpg');
 width: 800px;
 height: 111px;
}

#container{
 text-align: right;
 vertical-align: bottom;
}

#navigation{
 background-image: url('gfx/apo1_navigation-bg.jpg');
 width: 196px;
 height: 100px;
 float: left;
}

#navigation-top{
 background-image: url('gfx/apo1_navi-top.jpg');
 width: 196px;
 height: 20px;
}

#navigation-main{
 color: #7090A6;
 font-family: arial,verdana;
 font-size: 12px;
 font-weight: normal;
 margin-left: 40px;
 margin-top: 10px;
 text-align: left;
}

#content{
 background-image: url('gfx/apo1_bg.jpg');
 width: 604px;
 height: 100px;
 float: right;
 vertical-align: top;
}

#top-bar{
 background-image: url('gfx/apo1_top-bar.gif');
 background-repeat: repeat-x;
 width: 604px;
 height: 20px;
 color: #7090A6;
 font-family: arial,verdana;
 font-size: 12px;
 font-weight: normal;
 text-align: right;
}

#footer{
 background-image: url('gfx/apo1_footer.jpg');
 background-repeat: no-repeat;
 width: 800px;
 height: 29px;
 padding-top: 1px;
}
-->
</style>

<!--[if lte IE 6.0]>
<style type="text/css">
.top-bar-font{
 margin-left: 120px;
 float: left;
}
</style>
<![endif]-->
</head>
<body>
<div id="page">
     <div id="logo"></div>
     <div id="container">
          <div id="content">
           <div id="top-bar"><div class="top-bar-font">Willkommen <b>User</b> ! Heute ist <b>Montag</b>, der 21. September 2004</div><img src="gfx/apo1_border-right-top.jpg" alt="" class="border-right-top" /></div>
          </div>
          <div id="navigation">
           <div id="navigation-top"></div>
           <div id="navigation-main">
           <img src="gfx/arrow.gif" alt="" class="arrow" /><a href="#">Startseite</a><br />
           <img src="gfx/arrow.gif" alt="" class="arrow" /><a href="#">Das Team</a><br/>
           </div>
          </div>
     <div id="footer"></div>
     </div>
</div>
</body>
</html>

Ich hoffe ihr habt mein Problem verstanden... Ist sehr wichtig ... !


thx mAu
 
Zuletzt bearbeitet:
Hi,

der Mozilla hat Probleme mit dem Textfluss (float: left) aus der Navigations-Klasse.

Versuche mal, in der CSS-Definition #footer den Textfluss mit clear: left;
aufzuheben.

Ciao
Quaese
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück