Willkommen ~Gast!
Registrieren || Einloggen || Hilfe/FAQ || Staff
Probleme mit der Registrierung im Forum? Melde dich unter registerEin Bild.
Autor Beitrag
000
21.01.2008, 11:56
kingduevel



Hallo ihr tollen Helferinnen und Helfer :) ,

ich hab mal wieder entweder Tomaten auf den Augen oder bin anderweitig grade zu dumm, das wie gewünscht hinzubekommen. Es geht um diese Seite, die unter Firefox (ich hab 2.0) korrekt angezeigt wird, im Internet Explorer 6.0 (auf dem es auch noch laufen soll) aber nicht. Der Contentbereich (ich habe ihn für diese Anfrage mal ganz leicht umpunktet) ist hier nicht mittig ausgerichtet und die Navigationspunkte stehen zwar in richtigen Spalten, nur leider dabei auch in verschiedenen Zeilen und nicht nebeneinander. Dazu zwei Bilder:

So soll es sein:

So ist es leider im Internet Explorer 6.0:

Der HTML-Code:
Quellcode:<body>

<div class="total">
hier die Grafik im Header
<div id="head">hier der Text im Header</div>
</div>
<div id="fade1"></div>

<div id="white">
<div class="total">
hier die Ahornblatt-Grafik
<div id="body">
<ul id='navi'>hier die Navigation</ul><br><br>
hier die includeten Content-Files
</div>
</div>
</div>

<div id="fade2"></div>
<div class="total">
hier die Flagge
<div id="foot">
hier der Text im Footer
</div>
</div>

</body
Der CSS-Code:
Quellcode:body {background-color: #262259; margin: 0; font-size: 100.01%; text-align: center}

.total {width: 760px; margin: 0 auto; text-align: left; border: 1px dotted gray}
#white {background-color: #ffffff}
#head {margin-left: 120px; padding-top: 16px; padding-bottom: 16px; color: #ffffff; text-align: center}
#body {margin-left: 120px; padding-bottom: 32px; text-align: justify}
#foot {margin-left: 120px; padding-bottom: 16px; font-size: 11px; color: #ffffff; text-align: right}
#foot a, #foot a:link, #foot a:visited, #foot a:hover,#foot a:active {color: #ffffff; font-size: 11px}
#fade1 {height: 16px; background-image: url(images/fade1.gif); background-color: #ffffff; font-size: 1px}
#fade2 {height: 16px; background-image: url(images/fade2.gif); background-color: #ffffff; font-size: 1px}

#navi {list-style-type: none; margin: 0 0 0 80px; padding: 0}
#navi li a {display: inline; float: left; width: 96px; height: 20px; background: #ffffff url(images/navigation.gif) no-repeat 0px 0px; color: #ffffff; font: bold 13px Arial,Verdana; text-align: center}
Ich komm einfach nicht weiter...

--


Dieser Beitrag wurde am 21.01.2008 um 11:58 von kingduevel bearbeitet.
zum Seitenanfang zum Seitenende Profil || Suche
001
21.01.2008, 12:13
chriss



Der IE kennt margin: 0 auto; nicht im Quirksmodus. Entweder du richtest den Inhalt von #white via text-align: center; aus (und vererbst dann in den unteren Elementen ein text-align: left;) oder Du setzt die Seite so um das der IE in den standardkonformen Modus wechselt.

--

zum Seitenanfang zum Seitenende Profil || Suche
002
21.01.2008, 14:54
kingduevel



Boah ne ej, da wäre ich nicht drauf gekommen. Danke an chriss und somit ist das Ausrichtungsproblem gelöst. Offen steht dann noch, warum der IE die navigation so doof macht und wie man das ändern müsste, damit die Menüpunkte auch dort in einer Zeile dargestellt werden.

--

zum Seitenanfang zum Seitenende Profil || Suche
003
21.01.2008, 18:19
CPoly



li
{
float:left;
}

--

zum Seitenanfang zum Seitenende Profil || Suche
004
21.01.2008, 18:25
Krifitze



Und noch ein Tip am Rande: Rücke ein! Dein Stylesheet ist eine Zumutung!

--

Website

zum Seitenanfang zum Seitenende Profil || Suche
005
21.01.2008, 18:53
kingduevel



Vielen Dank, CPoly: Ich hätte gedacht, dass der das "float: left" aus dem a-Element ähnlich behandelt wie das (jetzige) im li-Element. Aber gut, wieder was gelernt :) !

@Krifitze: Ja, ich weiß, dass mein CSS nicht sehr strukturiert ist. Meist hab ich das ja auch wenigstens noch in Gewisse Bereiche eingeteilt - hier scheinbar noch nicht. Habs mal leicht geändert, aber bisher bin ich auf das Einrücken eh noch nicht so klargekommen :/ !

--

zum Seitenanfang zum Seitenende Profil || Suche
006
21.01.2008, 19:19
chriss



float: left; gibt es nur bei Blockelementen wie li (Kind von ul), div, etc. a ist jedoch ein Inlineelement da verhält sich das anders - ergibt ja auch keinen Sinn, weil Inlinelemente keinen Umbruch erzwingen.

Vergiss nicht unter dem gefloateten li (ul) die Ausrichtung zu lösen. (sonst wird das nächste Element ebenfalls mit formatiert) Z.B. mit einem <hr style="clear: left;" />

--

zum Seitenanfang zum Seitenende Profil || Suche