Brauche Hilfe bei meinem CSS Menü - Siehe inside

visionsurfer · 22.12.2007, 12:51

Hallo,

ich mache gerade folgendes Menü:

http://www.masterjewels.de/menu.html

Den Quellcode könnt ihr euch direkt in der HTML Datei anschauen.
Im Firefox sieht das Menü bis auf ein paar Kleinigkeiten auch schon so aus, wie ich es haben möchte.

Probleme macht gerade nur der IE6. Ich kriege es nicht hin. Ich weiß nicht wie ich es hinbekomme das z.B. unter "Home" im IE6 nicht immer so ein Versatz nach unten ist. Außerdem rutsch der Hintergrund wenn ich über einen Menüpunkt im IE6 fahre, immer ca. 1 Pixel nach unten. Sieht auch total scheisse aus.

Kann mir vielleicht jemand helfen, bzw. einen Tipp geben was ich tun muss, damit es überall gleich aussieht ?

Der schwarze Hintergrund soll genau 24px hoch sein.

Grüße,
Visionsurfer

Mich@el · 22.12.2007, 13:28

Hi Visionsurfer, habe hier keinen IE 6 parat. Habe am Code getestet. Mit dieser Einstellung ist der schwarze Hintergrund auf 24px eingestellt.

PHP-Code:


			
.pro_line2 .select a {

display:block; 

height:24px; 

float:left; 

/*background: url(line/blank.gif); */

background-color: #000000;

padding:0 0 0 15px; 

text-decoration:none; 

line-height:24px; 

white-space:nowrap; 

color:#ddd;

}

Grüße
Michael

visionsurfer · 22.12.2007, 16:38

Hi,

ja das ist soweit klar.

Doch die Anzeige verhält sich im IE6 trotzdem ganz anders als im IE7 und Firefox. Deshalb gibt es ja wahrscheinlich im Code auch einen extra Bereich für IE6 only. Ich weiß nur nicht was ich da noch einstellen kann/muss damit die Anzeige überall gleich aussieht und z.B. im IE6 nicht so ein komischer Versatz drin ist.

Vielleicht hat hier noch jemand einen IE6 und kann sich die Seite mal direkt im IE6 und FF anschauen. Dann seht ihr was ich meine.

Hat noch jemand eine Idee ?

Grüße,
Visionsurfer

hero-master · 22.12.2007, 18:08

Hi visionsurfer

die Wege des IEs sind unergründlich, hier hab ich ne Ahnung:
WIe bereits richtig erkannt gibt es spezifische Definitionen für den IE, auch für den IE6, nicht nur im CSS, sondern auch im HTML.
Und da liegt der Hase wohl begraben, bei den Conditional Comments im HTML-Abschnitt:

HTML-Code:

<!--[if lte IE 6]><table><tr><td><![endif]-->

Du lässt im IE6 eine Tabelle bauen, was auch bei so einem Menu so richtig ist. Das Problem für den IE: Der erste Menupunkt bekommt diese Tabelle nicht und denkt sich: "Hey, ich hab Platz, keine blöde Tabelle, kein anderer Inhalt, ich kann mich ausbreiten".

Nun, wie lässt sich das beheben? Ich würde einfach dem Menupunkt in dem das "home" ist, eine ID geben und mit dem padding-bottom rumspielen:

HTML-Code:

<ul class="select"><li id="home"><a href="#nogo"><b>Home</b></a></li>

Code:

.pro_line2 #home a b {
padding:0 30px 3px 15px;
}

Ist zwar alles alles andere als elegant, aber der IE6 hat nichts anderes verdient

visionsurfer · 27.12.2007, 12:03

Hi,

super. Vielen Dank für die Hilfe. Das klappt soweit mal ganz gut.

Kannst du mir zufällig noch sagen, wie ich es hinbekomme, das dieses Menü nicht so springt. Ich meine auch wieder im IE6.

Wenn man über die Menüpunkte fährt, dann rutscht der schwarze Hintergrund immer ein ganz bisschen nach unten. Ich finde nicht raus wo ich es verstellen kann, das es im IE6 nicht so ist.

Hast du vielleicht noch eine Idee ?

Grüße,
Visionsurfer

hero-master · 27.12.2007, 12:15

Moin

Zitat:

Zitat von visionsurfer

Hast du vielleicht noch eine Idee ?

schraub mal die Zeilenhöhe beim :hover runter:

Code:

.pro_line2 .select a:hover,
.pro_line2 .select li:hover a {
/*background: url(line/blank_over.gif);*/
padding:0 0 0 15px;
line-height:25px;

visionsurfer · 27.12.2007, 13:27

Hi,

danke für die schnelle Antwort.
Aber ist das nicht die Formatierung die dann auch den FF betrifft ?
Weil es gibt ja einen extra Bereich im CSS wo nur der IE6 eingestellt wird.

Hast du das mal ausprobiert, was du gerade vorgeschlagen hast ?
Weil egal wo ich dran drehe, es passiert nichts.

Wäre super, wenn du vielleicht noch mal schauen kannst.

Grüße,
Visionsurfer

hero-master · 27.12.2007, 13:36

dann musst du eben das Ganze nur für den IE6 definieren

Ich würde eine Extra CSS-Datei für die Versionen des IEs erstellen und sie per Conditional Comments in deine Seite einbinden.
So hast du die Übersicht und brauchst nicht mit Hacks, etc arbeiten. Probleme bei der Ansicht im IE wirst du im Laufe deines Projekts bestimtm noch 1-2mal haben