anzeigeproblem im mozilla, ie ok, wo liegt der fehler?

[sabbas]

Hallo,

ich lerne gerade CSS und probier so etwas rum. Jedenfalls gibt es diesmal ein Problem mit der Anzeige im Mozilla, im IE sieht es so aus wie beabsichtigt. Nachdem ich lange den Fehler gesucht habe, geb ich jetzt auf und frag ein paar Profis von Euch um Rat. Die Seite findet ihr unter ***
Die Navigation im Mozilla soll natürlich links unter dem Logo sein. Außerdem frage ich mich, warum der Content Bereich in den Header reingeht und nicht wie im IE an den Header anschließt.

Der CSS Code sieht so aus:

[SIZE=2][FONT=Arial]*{margin: 0;  padding: 0; }
body { color: #3d3d3d; background-color:  #BDB76B; font-size: 90%; font-family: "Verdana", Arial, Helvetica, sans-serif; font-weight: normal;}
p { color: #2b4028; line-height: 1.2em; font-size: 80%;}
h1 {color: #204b23; font-size: 2em; font-weight: bold; line-height: 1.5em}
h2 {color: #204b23; font-size: 1em; font-weight: bold; text-decoration:underline; line-height: 1.5em}
a:link     {color: #e1abc5;font-weight: bold; text-decoration: none;}
a:visited { color: #e3c386; font-weight: bold; text-decoration: none; }
a:hover  { color: #ce146e; font-weight: bold; text-decoration: none; }
a:active { color: #ce146a; font-weight: bold;  text-decoration: none; }
#header {width: 950px; background-color:  #BDB76B; }
#titel { margin-top: 70px; margin-left: 300px; width: 700px; }
#logopic { float: left; width: 200px; height: 184px; background-image: url(images/lilylogo.jpg); background-repeat: no-repeat ; border: 1px solid; }
#content {margin-left: 200px; width: 750px; height: 600px; background-image: url(images/lilybackground.jpg); border: 1px solid }
.center { text-align: center; }
#navi {background-color:  #34411C ; list-style-type: none; width: 150px ; height: 600px; float: left; line-height: 3em; font-size: 90%; }
#navi ul {list-style-type: none; margin-left: 10px; padding: 0px;}
#navi li {margin-left: 5px; margin-top: 10px; padding: 0px; }
#navi li a, #navi li a:link {text-decoration: none; padding: 0 10px; color:  gray}
#navi li a:visited {color: #e3c386;}
#navi li a:hover, #navi li a:focus
#navi li a:active {color: #ce146a; background-color: #f6f69a;}[/FONT][/SIZE]

sab

 

[koslowski]

Hi sabbas,

Zitat von sabbas:
Jedenfalls gibt es diesmal ein Problem mit der Anzeige im Mozilla, im IE sieht es so aus wie beabsichtigt.

Das es im IE aussieht wie beabsichtigt liegt daran weil er es eigentlich falsch macht, d.h. das Verhalten des IE widerspricht den Webstandards.

Dein Hauptproblem ist, das du dein floatendes Element nicht gecleart hast.

float heißt soviel wie schweben, d.h. die floatende Box wird aus dem normalen Fluss der Elemente rausgenommen und schwebt je nach floatrichtung entweder nach oben links oder rechts an die Kante des Elternelements (#header).

Um den normalen Fluss wieder herzustellen mußt du clearen und da gibt es mehrere Möglichkeiten:
1. 'fix a float with a float', d.h. du mußt alles floaten lassen auch #header.
2. easy Clearing. Lies dir mal
diesen Artikel dazu durch.
3. dem container der floatende Elemente beinhaltet benötigt am Ende ein clearendes Element, z.B. so:

<br class="clear" />

und das formatierst du so:

.clear  {
    clear:both;
    height:0;
    width:0;
    visibility:hidden;
}

Gruß
Koslowski

 

[sabbas]

problem gelöst, vielen dank

 

[koslowski]

oder natürlich noch einfacher wie im XHTML-Forum geantwortet:
wenn man keinen float braucht kann man ihn auch weglassen.