2.Ebene der Navigationstaste klappt zu früh zu

Computer: Software & Programmierung HTML & CSS
#1

Hallo,

bei der Navigationsleiste meiner HP gibt es bei 2 Tasten eine 2. Ebene mit jeweils 3 weiteren Tasten.
http://www.gesundheitsforum-wedemark.de/
Die 3 Tasten der 2. Ebene bei der Taste „Termine“ (1. Ebene) haben als Hintergrund ein Bild (img) im linken Tastenbereich, einen Text (im iframe) im rechten Tastenbereich. Der mittlere Bereich dazwischen ist ein grüner Background, der hinter Bild und Text liegt.

Nun das Problem, welches nur ab IE auftritt:
fahre ich mit der Maus im Bereich zwischen Bild und Text, erreiche ich alle 3 Tasten der 2. Ebene (Taste 1…3) . Fahre ich aber im Bereich des Bildes, klappen die 3 Tasten auf dem Weg von Taste 1 zu Taste 2 wieder zu. Taste 3 wird nicht erreicht. Bei dem iframe mit dem Text klappen die Tasten wieder zu beim Weg von Taste 2 zu Taste 3.

Bei Safari/Apple, Firefox, Seamonkey gibt es keine Probleme. Beim IE 10 bis hinunter zu IE 7 (andere habe ich nicht) tritt der Effekt auf.

Den mir schon mal vorgeschlagenen Weg mit „include“ habe ich noch nicht umsetzen können. Was ist an dem derzeitigen Script so kompliziert, daß der IE hier Probleme macht? Habe ich irgendwelche Reihenfolgen mißachtet?
In der html-Datei (z.B. index.html) habe ich mal Bild und Text NACH dem Abschnitt mit den Navigationstasten eingesetzt und mal davor. Es machte keinen Unterschied im Verhalten der Tasten.

Kann mir jemand einen Hinweis geben, was ich beachten muß?

Gruß
Pauli

#2

Moin,

im ersten Moment war mein Gedanke, dass da irgendwo eine Lücke im IE ist, die in den anderen Browsern nicht ist.

Da ist irgendwo noch ein position:absolute drin, das mir suspekt erscheint. Änder das mal in relative. Ich kanns hier leider nicht testen, der IE entzieht sich meiner Versuche und lädt das Stylesheet gar nicht erst (lokal gespeichert).

Bin mir aber nicht sicher, ob es das ist.

Grüße,
-Efchen

#3

Hallo Efchen,

danke für Deine Rückmeldung.
Ich habe den Fehler bislang zwar nicht beseitigen können, aber habe ihn zumindest etwas eingekreist: wenn ich mit padding die Abstände der aufgeklappten Buttons reduziere, bis sie sich berühren, funktioniert zumindest mit dem IE 8 alles.

Neben Deinem Tipp mit der absoluten Position probiere ich noch, die Tastenabstände so zu variieren, daß sie gut aussehen und trotzdem funktionieren. Sollte alles ok sein, gebe ich eine Rückmeldung.

Gruß
Pauli

#4

Ola,

Der Internet Explorer passt sich alles so an, wie er will… Benutzt heutzutage kaum noch jemand…

Folgender Code sollte auch im Internet Explorer funktionieren, musst ihn nur deinen Wünschen anpassen:

Problem Navigation
/*************************************************************************************************/
body{
font-family:verdana, arial, sans-serif;
font-size:62.5%;
background:#eee;
position:relative;
height:100%;
margin: 0;
padding: 0;
}

h2{
font-family:verdana, arial, sans-serif;
font-style:italic;
font-size:36px;
position:relative;
margin-left: 20px;
width:950px;
top: 20px;
}

#content{
position:relative;
margin:0 auto;
width: 950px;
top:80px;
height:520px;
background-color: #fff;
border: 2px solid #eee;
border-radius: 4px;

}

#vertical-navigation{
list-style:none;
margin:0;
padding:0;
font-size:1.2em;
float:left;
position:relative;

}
#vertical-navigation li{
position:relative;
display: block;
float:left;
padding: 0;

}

#vertical-navigation li a{
float:left;
display:block;
padding:10px 20px;
text-decoration:none;
color:#666;
text-transform: uppercase;

}

#vertical-navigation li:hover a,
#vertical-navigation li a:hover{
background-color:#ddd;
color:white;
}

#vertical-navigation ul{
display:none;

}

#vertical-navigation li:hover ul{
display:block;
}

#vertical-navigation ul{
float:left;
position:absolute;
list-style:none;
margin:0;
padding-left:0;
width: 264px;
top: 34px;
border: 1px solid #eee;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
border-top: none;
}

#vertical-navigation ul li{
float:left;
clear:none;
margin:0;
padding:0;
width: 114px;
color:#999;
padding-left: 18px;
border-top: 1px solid #eee;
}

#vertical-navigation li:hover ul li a,
#vertical-navigation ul li a{
line-height:200%;
display:block;
padding:0 6px 0 0;
float:none;
text-transform:lowercase;
color:#999;
background:none;
}
#vertical-navigation li:hover{
background-color: #eee;
display:block;
color: #fff;
}

Drop Down Menu mit CSS

Parent Item 2

Parent Item 3

lg

#5

Hi JaONE,

Ola,

Der Internet Explorer passt sich alles so an, wie er will…
Benutzt heutzutage kaum noch jemand…

ähm, was bitte? Den Benutzt DU und ich vielleicht nicht, aber er wird benutzt. Daher halte ich diese Aussage für sehr…, sagen wir fragwürdig.

Gruß
Fronk

#6

Hallo yayone,

danke for Dein Code-Beispiel. Dort sind zwischen den Tasten des Untermenüs keine Lücken, d.h. sie liegen direkt aneinander.
Das habe ich bei meiner HP auch ausprobiert, indem ich alle margins und paddings in diesem Bereich auf 0 gesetzt habe. In diesem Fall funktioniert der IE von IE 10 bis hinunter zum IE 7. Das reicht mir zunächst.
Ich kenne eine Menge Leute, die bei ihrem gekauften PC den IE drauf haben und nur ihn benutzen. Außerdem habe ich hier im Forum erfahren, daß es eben nicht reicht, nur auf sein eigenes Mozilla zu schauen, ob die HP funktioniert, sondern diese auch mit anderen Browsern zu testen.

Gruß
Pauli

#7

Hallo,

wie immer gilt es zuerst die Fehler im HTML auszumerzen. So ist z.B. iframe in HTML 4.01 strict nicht erlaubt, Du baust aber darauf.

Gruß

osmodius

#8

Hallo Osmodis,

danke für Deinen Hinweis. Ich habe in Selfhtml gelesen, daß bei Verwendung von Stylesheets „strict“ statt „transitional“ verwendet werden soll. Die Probleme mit den Navigationstasten haben mich dann veranlasst, „object“ wieder zu entfernen und das bislang gut funktionierende „iframe“ einzusetzen, ohne daß ich mir Gedanken um die Deklaration gemacht habe.

Was kann denn passieren, wenn die Deklaration nicht zum Script passt?

Gruß
Pauli

#9

Moin,

Ich kenne eine Menge Leute, die bei ihrem gekauften PC den IE
drauf haben und nur ihn benutzen. Außerdem habe ich hier im
Forum erfahren, daß es eben nicht reicht, nur auf sein eigenes
Mozilla zu schauen, ob die HP funktioniert, sondern diese auch
mit anderen Browsern zu testen.

Wie wahr.

Liebe Grüße,
-Efchen

#10

Moin,

Ich habe in Selfhtml gelesen, daß
bei Verwendung von Stylesheets „strict“ statt „transitional“
verwendet werden soll.

Dieser Satz ist so erstmal Unfug.
Man sollte immer Strict dem Transitional vorziehen, denn die Bedeutung liegt in der Übersetzung des Wortes: „Übergangs~“ - „transitional“ ist für Websites aus den 1990er Jahren, die nicht einfach auf Strict umgestellt werden konnten. Websites neu in Transitional zu erstellen - dafür gibt es keinen Grund.

Gelegentlich gibt es natürlich Tags, die in Strict einen Fehler auslösen - aber dann sollte man sich überlegen, ob man die denn überhaupt braucht!

Was kann denn passieren, wenn die Deklaration nicht zum Script
passt?

Zunächst wahrscheinlich erstmal nichts. Aber Du lernst nichts, wenn Du Deinen Code falsch deklarierst. Dann kannst Du genauso Tabellenlayouts machen und Klickbunti-Houmpäitsch-Baukästen benutzen.

Liebe Grüße,
-Efchen

#11

Hallo Efchen,

danke für Deine Aufklärung. Ich gebe Dir Recht, ich habe mir mal den Code anderer Homepages angesehen oder auch den, der bei Angeboten aus dem Internet zum Erstellen der eigenen Homepage erzeugt wird. Da ist kaum was von sauberer Trennung zwischen Text und Layout zu finden, wenngleich manchmal sogar css-Dateien existieren.

Gruß
Pauli