Center ul im IE

[santhiphap]

Hallo an alle,

ich bin gerade am Basteln einer Homepage.
Sie ist horizontal in 4 Teile geteilt:
- Logobar
- Navibar (oben)
- Inhalt
- Navibar (unten)

Die Seite könnt ihr hier sehen: www.avantgarde-websites.de/homepage/index2.html

Sieht im Firefox und IE 8 auch soweit klasse aus.
Im IE 7 werde jedoch die beiden Navigationen komplett nicht gecentert.
Im IE 6 ist das ganze dann schon komplett durcheinander.
Ich weis schon, dass die margin:auto; variante für die älteren IE versionen nicht funktioniert.
Stattdessen habe ich gelesen man soll für den IE text-align:center; benutzen.
Das habe ich aber shcon überall ausprobier. Ich schätze es liegt daran, dass es eine Liste ist.?

Könnt ihr mir da mal eben weiterhelfen?

Den Css Code dazu findet ihr hier: www.avantgarde-websites.de/homepage/style2.css
Den Code für header und footer habe ich von Selfhtml.
Es gibt außerdem noch 2 css Dateien für den Hover Effekt der Navigation, die beiden dürften aber wirklich nichts damit zu tun haben da nur die Verschiebung des Bildes angegeben wird.

Wenn ihr da trotzdem mal reinschauen wollt:
Navitop.css
Navibot.css
Navitop Bild
Navibot Bild

[threadi]

Ich weis schon, dass die margin:auto; variante für die älteren IE versionen nicht funktioniert.

Dann weißt Du etwas falsches. Denn solange die Seite im standardkonformen Modus ist unterstützt der IE6 natürlich auch Zentrierung per margin. Nur der IE5.5 und älter macht auch da Probleme - aber wer nutzt den heute schon noch.

Stattdessen habe ich gelesen man soll für den IE text-align:center; benutzen.

Wie gesagt: nur für noch ältere Browser relevant.

Bei deinem Problem ist aber etwas ganz anderes die Ursache. Du positionierst die beiden Listen per "position: fixed;". Diese CSS-Eigenschaft wird vom IE6 nur beim body-Tag unterstützt. Daher zeigt der IE6 diese beiden Listen falsch an. Und nicht etwa, weil er sie nicht zentrieren will oder kann.

Ich sehe 2 Möglichkeiten:
a) Du verzichtest beim IE6 auf diese Fixierung. Erspart viel Arbeit. Dann sehen eben die wenigen Besucher mit dem IE6 die Seite etwas anders dargestellt als Du es eigentlich willst. Aber sie sehen etwas und das nicht verschoben.
b) Du schaust Dir mal die Möglichkeiten an "position: fixed;" für den IE6 nachzubauen. Ist teilweise aber recht abstrus kompliziert. Ich weiß daher nicht, ob dich das überhaupt weiter bringt.

[santhiphap]

hallo, danke für die Antwort, damit werd ich mich mal weiter beschäftigen.

Aber nochmal abgesehen vom IE6.
Im IE7 Wird alles richtig angezeigt die Objekte sind auch fixed.
Aber sie sind nicht mittig sondern links.
Woran kann das liegen?

[threadi]

Vielleicht weil Du .header floatest. Hab keinen IE hier, kanns nicht sehen.

[santhiphap]

Hmm. der float im .header war auf jedenfall unnötig.
trotzdem ändert das nichts an der Darstellung im IE7.
komisch komisch

[santhiphap]

hmm.. niemand der ne Idee hat?

[hero-master]

Hi
du machst das ziemlich kompliziert mit deiner Positioniererei und dem Markup
Bau diesen Teil hier mal um:

    <div id="toprepeat"></div>
    	<ul id="navigationa" class="header">
        <li class="highlight"><a href="#" class="home"><span>Home</span></a></li>
        <li class="highlight"><a href="#" class="spacer"><span>Spacer</span></a></li>
        <li class="highlight"><a href="#" class="gruppen"><span>In Gruppen</span></a></li>
        <li class="highlight"><a href="#" class="einzelne"><span>F&uuml;r Einzelne</span></a></li>
        <li class="highlight"><a href="#" class="institutionen"><span>F&uuml;r Institutionen</span></a></li>
	</ul>
    <div id="botrepeat"></div>
    	<ul id="navigationb" class="footer">
      	<li class="highlight"><a href="#" class="ubermich"><span>&Uuml;ber mich</span></a></li>
      	<li class="highlight"><a href="#" class="auseigenerfeder"><span>Aus eigener Feder</span></a></li>
      	<li class="highlight"><a href="#" class="links"><span>Links und Literatur</span></a></li>
      	<li class="highlight"><a href="#" class="newsletter"><span>Newsletter</span></a></li>
      	<li class="highlight"><a href="#" class="kontakt"><span>Kontakt</span></a></li>
      	<li class="highlight"><a href="#" class="impressum"><span>Impressum</span></a></li>
	</ul>

In das hier:

<div id="toprepeat">
    	<ul id="navigationa" class="header">
        <li class="highlight"><a href="#" class="home"><span>Home</span></a></li>
        <li class="highlight"><a href="#" class="spacer"><span>Spacer</span></a></li>
        <li class="highlight"><a href="#" class="gruppen"><span>In Gruppen</span></a></li>
        <li class="highlight"><a href="#" class="einzelne"><span>F&uuml;r Einzelne</span></a></li>
        <li class="highlight"><a href="#" class="institutionen"><span>F&uuml;r Institutionen</span></a></li>
	</ul>
</div>
<div id="botrepeat">
    	<ul id="navigationb" class="footer">
      	<li class="highlight"><a href="#" class="ubermich"><span>&Uuml;ber mich</span></a></li>
      	<li class="highlight"><a href="#" class="auseigenerfeder"><span>Aus eigener Feder</span></a></li>
      	<li class="highlight"><a href="#" class="links"><span>Links und Literatur</span></a></li>
      	<li class="highlight"><a href="#" class="newsletter"><span>Newsletter</span></a></li>
      	<li class="highlight"><a href="#" class="kontakt"><span>Kontakt</span></a></li>
      	<li class="highlight"><a href="#" class="impressum"><span>Impressum</span></a></li>
	</ul>
</div>

Dann positionierst du nur die beiden Divs fix und haust das Menu per margin: 0 auto; in die Mitte. Vlt. klappts dann auch so in den IEs

[santhiphap]

Hallo, danke für die Antwort, ändert aber leider überhaupt nichts
Trotzdem vielen Dank die IE 7 User werdens auch so überleben