aexer.com -> probleme mit IE

[snoeber]

hallo leute..
ist mir schon fast peinlich diese Frage. Aber ich kriegs einfach nicht hin das die Navigation im IE richtig angezeigt wird. Ich glaub ich sitz einfach irgendwo auf dem schlauch. Kann mir da jemand helfen?

Hier das CSS

Code: Alles auswählen

#navigation {
   border-bottom: 1px solid #A4B938;
   margin-left: 55px;
   margin-right: 55px;
   height: 20px;
   text-align: center;
   }
#navigation ul li {
   list-style-type: none;
   display: inline;
   padding: 5px 5px 5px 5px;
   border-left: 1px solid #A4B938;
   border-right: 1px solid #A4B938;
   border-top: 1px solid #A4B938;
   background-color: #E1E1E1;
   }   
   
   #navigation p {
   list-style-type: none;
   display: inline;
   padding: 5px 5px 5px 5px;
   }   
   
#navigation a {
   color: #A4B938;
   text-decoration: none;
   
   }
   
#navigation a:hover {
   text-decoration: underline;
   }

Wenn mir echt jemand helfen könnte wäre ich sehr dankbar. Es ist vermutlich nur ein kleiner Fehler, welcher mir irgendwie ned auffällt oder vielleicht auch gross


gruss snoeber

[WhispR]

wie solls denn sein?
schreib mal einen link zu dem genannten Code, also ich will ihn "in Action" sehen, nur so Code vor mir is bissle wenig um den fehler zu finden

[Ingo]

Hi. Ich hab mal ein bisschen 'rumprobiert. Ergebnis: es ist nicht einfach
Mit einer <ul> scheint das hier nicht zu klappen, wobei übrigens nicht der IE seltsames tut,
sondern ausnahmsweise mal der FireFox (2)... Mit einer <table>, die ja auch gern für Navis
'missbraucht' wird, bin ich auf folgende Lösung gekommen:

Code: Alles auswählen

#navi { border-collapse:collapse; margin:auto; }

#navi td         { padding:5px; }

#navi td.aktuell { border:1px solid #A4B938;
                    color:#666666;
                    background:#E1E1E1;
                  }
#navi td.link    { border:1px solid #A4B938;
                    color:#A4B938;
                    background:#E1E1E1;
                  }
#navi td.sep     { padding:1px; }

#navi td a       { text-decoration:none; color: #A4B938; }
#navi td a:hover { text-decoration:underline; }

.line { border-top:1px solid #A4B938;
         position:relative; top:-1px;
         margin:0px 55px;
       }

Dazu der HTML-Teil:

<table id="navi">
  <tr>
   <td class="aktuell">Startseite</td>
   <td class="sep"></td>
   <td class="link"><a href="#">A</a></td>
   <td class="sep"></td>
   <td class="link"><a href="#">A</a></td>
   <td class="sep"></td>
   <td class="link"><a href="#">A</a></td>
   <td class="sep"></td>
   <td class="link"><a href="#">A</a></td>
  </tr>
</table>
<div class="line"></div>

Bin müüüüüüde ... ... gn8

[snoeber]

wie solls denn sein?
schreib mal einen link zu dem genannten Code, also ich will ihn "in Action" sehen, nur so Code vor mir is bissle wenig um den fehler zu finden

uups voll vergessen. Hier unter http://www.aexer.com mit dem Firefox funktioniert es ohne probleme....

@macping: ich muss es so machen, da es von TYPOlight so erstellt wird

[veNom]

Das Problem mit der Liste als Menü, hatte ich auch, aber ich würde deswegen nicht gleich zu Tabellen greifen, sondern eher die Menüpunkte als Div-Layer machen.

[Ingo]

Das Menü soll offenbar 4 Bedingungen erfüllen:
a) horizontale Anordnung
b) es soll insgesamt zentriert sein
c) es soll nach unten mit einer Linie abgeschlossen werden
d) die HTML-Struktur liegt fest (Typo-Vorgabe: ul mit li, a, p)

@snoeber: Stimmt das so, oder könnte man irgendwas davon weglassen?

Jedes für sich ist ein Zweizeiler, alles zusammen ne harte Nuss, finde ich.
(Tabellen machen mich auch nicht unbedingt glücklich, aber in seltenen Fällen ...)

[Basti]

Mit Listen geht das aber auf jeden Fall, sollte man auch vorzugsweise nehmen, um das Menü für Suchmaschinen zu optimieren (div-Layer und Tabellen sind dafür nämlich nicht sehr gut geeignet).

Meistens hängen solche Fehler mit der unterschiedlichen Interpretation von padding- und margin-Angaben zusammen.

@snoeber: Als erstes sollte dein Quelltext mal aufgeräumt werden. Du hast ziemlich viele unnötige Angaben, z.B. kannst du anstatt "padding: 5px 5px 5px 5px;" auch einfach "padding: 5px;" schreiben.
Desweiteren ist die Angabe "display: inline;" auch überflüssig, da sie die Standardeisntellung ist.
Auch die Verwendung eines <p>-Tags bei dem aktiven Menüpunkt ist völlig fehl am Platze. Das Element ist dafür einfach nicht gemacht.

Hier mal ein Verbesserungsvorschlag, aber ich würde in dem Fall einfach mal ein bisschen mit den Werten spielen um herauszubekommen, woran es liegt.

Code: Alles auswählen

#navigation {
   border-bottom: 1px solid #A4B938;
   text-align: center;
   height: 20px;
}

#navigation ul {
   margin: 0px;
   padding: 0px;
   margin-left: 55px;
   margin-right: 55px;
   list-style-type: none;
}

#navigation ul li {
   padding: 5px;
   border-left: 1px solid #A4B938;
   border-right: 1px solid #A4B938;
   border-top: 1px solid #A4B938;
   background-color: #E1E1E1;
}
   
#navigation a {
   color: #A4B938;
   text-decoration: none;
}
   
#navigation a:hover {
   text-decoration: underline;
}


Ich kann dir nicht sagen, ob das schon beim Lösen des Problems hilft, aber so ist es zumindest mal ordentlich.

[snoeber]

danke basti für deine Bemühung. Aber leider funktioniert es nicht. Ich brauche das INLINE das es horizontal genommen wird. Mal schauen was ich jetzt machen will. Sonst mach ich die Navigation irgendwie neu.

[Ingo]

Beim Stöbern im Netz sind mir 2 (Beinahe-)Lösungen untergekommen:

• maxdesign, allerdings sitzt das Menü nicht in der Mitte der Seite
• cssplay, das Menü sitzt zwar in der Mitte, nutzt aber etliche Hacks

[snoeber]

Beim Stöbern im Netz sind mir 2 (Beinahe-)Lösungen untergekommen:

• maxdesign, allerdings sitzt das Menü nicht in der Mitte der Seite
• cssplay, das Menü sitzt zwar in der Mitte, nutzt aber etliche Hacks

hey vielen Dank.. Ich werde das von Maxdesign mal ausproblieren. Zu zentrieren wird dann schon noch hinhauen Werde es dann posten ob es funktioniert hat .. nochmal THX