Seitliches DropDown Menü (Explorer und Firefox funktionieren Safarie nicht)

[pixelmaster]

Hallo,
Habe per CSS ein seitliches DropDown Menü gebaut funktioniert ganz gut ausser im Safarie klappt das Menü nicht aus. Ich denke es liegt an meiner CSS da ich die ausgeklappten Buttons anders darstellen muß. Ich spreche die Button über (#menu ul li ul li a) an. Ich denke mal da bekommt Safarie seine problem. Was kann ich tun bei anderen Projekt interpretiert safarie dieses auch richtig. Woran kann es noch liegen.

HTML:
<div id="menu">
<ul>
<li><a href="#" tabindex="1" accesskey="1">
<div class="abstand">HOME</div>
</a></li>
</ul>
<ul>
<li><a href="#" tabindex="2" accesskey="2">
<div class="abstand">Menü1</div>
</a>
<ul>
<li><a href="#" tabindex="7" accesskey="7">Menü1.1</a></li>
<li><a href="#" tabindex="8" accesskey="8">Menü1.2</a></li>
<li><a href="#" tabindex="9" accesskey="9">Menü1.3</a></li>
</ul>
</li>
</ul>
<ul>
<li> <a href="#" tabindex="3" accesskey="3">
<div class="abstand">Menü2</div>
</a>
<ul>
<li><a href="#" tabindex="10" accesskey="10">Menü2.1</a></li>
<li><a href="#" tabindex="11" accesskey="11">Menü2.2</a></li>
<li><a href="#" tabindex="12" accesskey="12">Menü2.3</a></li>
<li><a href="#" tabindex="13" accesskey="13">Menü2.4</a></li>
<li><a href="#" tabindex="14" accesskey="14">Menü2.5</a></li>
<li><a href="#" tabindex="15" accesskey="15">Menü2.6</a></li>
<li><a href="#">Menü2.7</a></li>
</ul>
</li>
</ul>
<ul>
<li> <a href="#" tabindex="4" accesskey="4">
<div class="abstand">Menü3</div>
</a>
<ul>
<li><a href="#" tabindex="16" accesskey="16">Menü3.1</a></li>
<li><a href="#" tabindex="17" accesskey="17">Menü3.2</a></li>
<li><a href="#" tabindex="18" accesskey="18">Menü3.3</a></li>
<li><a href="#" tabindex="19" accesskey="19">Menü3.4</a></li>
</ul>
</li>
</ul>
<ul>
<li><a href="#" tabindex="5" accesskey="5">
<div class="abstand">JOBS</div>
</a></li>
</ul>
<ul>
<li><a href="#" tabindex="6" accesskey="6">
<div class="abstand">KONTAKT</div>
</a></li>
</ul>
</div>


CSS:

#menu {
float: left;
margin: 0;
padding: 0;
font-size:11px;
width: 170px;
}
/*--formatiert die Themenblöcke--*/
#menu ul {
list-style-type: none;
font-weight:bold;

}

/*--definiert die "Drop-Down-Links" im Normalzustand--*/
#menu ul li a {
display: block;
margin:0;
border-right:3px solid #FFF;
text-align:right;
background-image:url(../pictures/navigation/button-bg.jpg);
background-repeat:no-repeat;
color: #004065;
text-decoration: none;
width:170px;
padding:0 0 0 0;
height:61px;
}
/*--definiert die "Drop-Down-Links" im Hoverzustand--*/
#menu ul li a:hover {
text-decoration: none;
background-image:url(../pictures/navigation/button-bg-hover.jpg);
background-repeat:no-repeat;
color:#FFF;

}
#menu ul li ul {
list-style-type: none;
font-weight:bold;
width:200px;
}
#menu ul li ul li a {
display: block;
border:0;
margin:0;
float:left;
font-size: 9px;
text-align:left;
background-image:url(../pictures/navigation/subnav-bg.png);
background-repeat:no-repeat;
color: #004065;
text-decoration: none;
width:83px;
padding:5px 0 0 5px;
height:55px;
}
/*--definiert die "Drop-Down-Links" im Hoverzustand--*/
#menu ul li ul li a:hover {
text-decoration: none;
background-image:url(../pictures/navigation/subnav-bg-hover.png);
background-repeat:no-repeat;
color:#FFF;

}
/*verhindert im Zusammenhang mit position absolute bei ul ul
*eine Höhenvergrößerung von #menu beim Hovern--
*/
#menu li {
position: relative;
}
/*--versteckt die "Drop-Down-Links", solange nicht gehovert wird--*/
#menu ul li ul {
position: absolute;
top: 0;
left: 173px;
z-index: 2;
display: none;

}
.abstand{
padding:35px 15px 0 0;
}

/*--lässt die Dropdown-Links beim Hovern erscheinen--*/
#menu ul li:hover ul {
display: block;
}
/*--nur für IE-Versionen kleiner gleich 6 erkennbar--*/
* html #menu ul li {
float: left;
width: 100%;
}
/*--nur für IE 7 erkennbar--*/
*+ html #menu ul li {
float: left;
width: 100%;
}
/*--bewirkt Hover-Effekt für IE kleiner 7 auch für ul- und li-Elemente--*/
*html body {
behavior: url(csshover3-source.htc);
font-size: 100%;
}
*html #menu ul li a {

}

 

[SamiSalami]

Also meiner Erfahrung nach hat Safari gar keine Probleme mit Dropdownmenüs.
Allerdings gibt es einige Menschen, die vergessen eine Doctype Definition und da streiken Safari und IE schonmal gern ;-)
Hast du an eine solche gedacht?

Empfehlenswert:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 

[_Thor_]

Kannst du mal nen Link zur Seite geben, dann lässt sich das unterschiedliche Verhalten besser analysieren.

Empfehlenswert:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Empfehlenswert wäre XHTML 1.0 Strict, denn Transitional ist, wie der Name schon sagt, nur eine Übergangslösung.

 

[SamiSalami]

Ja, aber den Fall gesetzt, dass er tatsächlich nicht dran gedacht hat,
kann es dann durchaus sein, dass er die Seite nochmal komplett neumachen muss,
da "strict" dann halt wirklich "strikt" ist ;-)

Wenn man mit einer Seite neu anfängt auf jeden Fall die 'strict'-Variante nutzen, aber so muss man natürlich auch den Aufwand abschätzen,
der natürlich auch davon abhängt wie "gut" (<- blödes Wort) die Seite programmiert ist.

Beim Einfügen der "transitional"-Variante im Nachhinein sollte es eigtl keine Probleme geben.

 

[_Thor_]

Ja, aber den Fall gesetzt, dass er tatsächlich nicht dran gedacht hat,
kann es dann durchaus sein, dass er die Seite nochmal komplett neumachen muss,
da "strict" dann halt wirklich "strikt" ist ;-)

Als Übergangslösung kann Transitional natürlich genutzt werden, dass sollte aber nicht vergessen werden, sie in absehbarer Zeit auch auf Strict zu ändern.

Wenn man mit einer Seite neu anfängt auf jeden Fall die 'strict'-Variante nutzen, aber so muss man natürlich auch den Aufwand abschätzen,
der natürlich auch davon abhängt wie "gut" (<- blödes Wort) die Seite programmiert ist.

Gut ist hier nicht das falsche Wort, sondern "programmiert", denn HTML ist keine Programmiersprache, somit kann HTML auch nicht programmiert werden. HTML ist eine Auszeichnungssprache mit der dem Inhalt eine Bedeutung gegeben wird.

 

[Atlan]

Lad mal die Seite auf einen Webspace, dass man sich das mit dem Browser (inkl. DeveloperTools) ansehen kann. Das macht es wesentlich einfacher dein Problem zu finden & zu lösen.

 

[SamiSalami]

Gut ist hier nicht das falsche Wort, sondern "programmiert", denn HTML ist keine Programmiersprache, somit kann HTML auch nicht programmiert werden. HTML ist eine Auszeichnungssprache mit der dem Inhalt eine Bedeutung gegeben wird.

In der kurzen Zeit in der ich hier bin, habe ich den Satz bestimmt schon zehnmal gelesen und auch wenn du Recht hast,
ändert's irgendwas an der Welt? ;)

Ein Großteil der Menschen ist nunmal überzeugt davon dass HTML eine Programmiersprache, also ist sie es "umgangssprachlich" auch,
jemanden der Hilfe braucht ist es glaube ich egal, ob er Probleme hat zu programmieren oder "Inhalten einen semantischen Wert zu verleihen" (<- und ja das kannst du jetzt gerne auch nochmal auseinander nehmen). Müssen wir nicht drüber diskutieren, wollte nur darauf hinweisen, dass mir das Forum mit diesem Satz "zugespammt" scheint :)

 

[Atlan]

In der kurzen Zeit in der ich hier bin, habe ich den Satz bestimmt schon zehnmal gelesen und auch wenn du Recht hast,
ändert's irgendwas an der Welt? ;)

Ein Großteil der Menschen ist nunmal überzeugt davon dass HTML eine Programmiersprache, also ist sie es "umgangssprachlich" auch,
jemanden der Hilfe braucht ist es glaube ich egal, ob er Probleme hat zu programmieren oder "Inhalten einen semantischen Wert zu verleihen" (<- und ja das kannst du jetzt gerne auch nochmal auseinander nehmen). Müssen wir nicht drüber diskutieren, wollte nur darauf hinweisen, dass mir das Forum mit diesem Satz "zugespammt" scheint :)

Stimm ich voll zu. Ich hab mich mittlerweile dran gewöhnt, aber für mich macht es eigentlich kaum einen Unterschied, ob ich jetzt php programmiere oder html "schreibe". Dem Gefühl nach ist für mich beides programmieren. Man sollte das einfach nicht so eng sehen. Das ist jetzt nicht auf dich (_Thor_) abgezielt. Es sind sehr viele Leute, die das so kleinlich sehen. Vielleicht kannst du mir auf die Sprünge helfen, warum man das unbedingt unterscheiden sollte? Es ist doch jedem klar, was gemeint ist, wenn jemand von "html programmieren" redet.

Grüße

 

[_Thor_]

In der kurzen Zeit in der ich hier bin, habe ich den Satz bestimmt schon zehnmal gelesen und auch wenn du Recht hast,
ändert's irgendwas an der Welt? ;)

Ob es was an der Welt ändert weiß ich nicht, aber hoffentlich an der Art und Weise, wie einige Personen HTML betrachten.

Ein Großteil der Menschen ist nunmal überzeugt davon dass HTML eine Programmiersprache, also ist sie es "umgangssprachlich" auch

Nein, ist sie nicht, weder umgangssprachlich noch sonstwie. Wer das denkt oder behauptet hat den Unterschied zwischen HTML und einer Programmiersprache nicht verstanden.

jemanden der Hilfe braucht ist es glaube ich egal, ob er Probleme hat zu programmieren oder "Inhalten einen semantischen Wert zu verleihen"

Viele der Hilfesuchenden erwarten von HTML leider Dinge, die nur von einer Programmiersprache zu bewältigen sind und sind dann völlig entsetzt, wenn ihnen gesagt wird, dass dies mit HTML nicht möglich ist, da HTML keine Programmiersprache ist. Wäre dieses Wissen vorhanden, könnten sie sich gleich nach einer Programmiersprache umsehen, die ihre Probleme lösen kann und würden es nicht erst mit HTML versuchen.

Müssen wir nicht drüber diskutieren, wollte nur darauf hinweisen, dass mir das Forum mit diesem Satz "zugespammt" scheint :)

Das mag dir so vorkommen, weil es immer wieder Personen gibt, die HTML als Programmiersprache beschreiben, dieser Irrtum muss dann natürlich korrigiert werden. Wüsste jeder den Unterschied zwischen einer Programmiersprache und einer Auszeichnungssprache, müsste es nicht so oft korrigiert werden. Im Grunde hast du also mit deiner Aussage dazu beigetragen, dass es erneut richtig gestellt werden musste.

 

[SamiSalami]

Sollten wir vllt einene neuen Thread für dieses Thema öffnen? ;-P

Natürlich hast du Recht, dass min. 60% aller Htmlfragen von Änfängern sich auf Dinge beziehen, die mit HTML per se nicht funktionieren und natürlich liegt das auch daran, dass immer erzählt wird, dass Webseiten mit HTML "programmiert" würden.
Aber Anfängern fehlt doch sowieso ein grundsätzliches Verständnis von "Programmierung", genauso wie von Begriffen "clientseitig" und "serverseitig".
Das muss halt gelernt und verstanden werden und an dem Punkt fällt es den meisten zu schwer sich in eine oop-basierte Sprache einzuarbeiten.
Viele die fürs Web entwickeln wollen hatten nunmal ihren Einstieg über HTML und CSS, was ich übrigens sehr sinnvoll finde, denn von dort aus kann man leicht einen Bogen zu Javascript und PHP (dann zu MySQL) schlagen - der Rest ergibt sich dann nach Interesse ;-)

 

[_Thor_]

Natürlich hast du Recht, dass min. 60% aller Htmlfragen von Änfängern sich auf Dinge beziehen, die mit HTML per se nicht funktionieren und natürlich liegt das auch daran, dass immer erzählt wird, dass Webseiten mit HTML "programmiert" würden.

Und was wäre demzufolge der erste Schritt um Anfängern diese falsche Vorstellung gleich von Anfang an zu nehmen? Richtig, HTML nicht als Programmiersprache zu bezeichnen und verdeutlichen, dass HTML nur für die Semantik des Inhaltes zuständig ist und sonst nichts weiter kann.

Aber Anfängern fehlt doch sowieso ein grundsätzliches Verständnis von "Programmierung", genauso wie von Begriffen "clientseitig" und "serverseitig".

Das muss nicht sein. Ich kann auch schon jahrelang erfolgreich Java, C++ oder eine andere Hochsprache programmieren, bevor ich mit HTML anfange. Dann sagen mir diese Begriffe sehr wohl etwas und wenn ich dann lesen würde, dass HTML eine Programmiersprache ist, würde ich von einer Annahme ausgehen, die mir ein völlig falsches Bild von den Möglichkeiten des HTML bietet.

Das muss halt gelernt und verstanden werden und an dem Punkt fällt es den meisten zu schwer sich in eine oop-basierte Sprache einzuarbeiten.

Das hat ja nichts mit HTML zu tun.

Viele die fürs Web entwickeln wollen hatten nunmal ihren Einstieg über HTML und CSS, was ich übrigens sehr sinnvoll finde, denn von dort aus kann man leicht einen Bogen zu Javascript und PHP (dann zu MySQL) schlagen - der Rest ergibt sich dann nach Interesse ;-)

Da gebe ich dir völlig Recht.

 

[pixelmaster]

Wow danke für eure Hilfe schonmal.

Also habe im Doctype nachgeschaut:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

immer noch das gleiche Proplem. Setze morgen mal die seite auf einen Server dann könnt Ihr mal schauen.

Habe die ganze Navigation schonmal von vorn an programmiert Fehler taucht erst beim einbau von

#menu ul li ul li a {
display: block;
border:0;
margin:0;
float:left;
font-size: 9px;
text-align:left;
background-image:url(../pictures/navigation/subnav-bg.png);
background-repeat:no-repeat;
color: #004065;
text-decoration: none;
width:83px;
padding:5px 0 0 5px;
height:55px;
}

auf

 

[SamiSalami]

Das Problem könnte meiner Meinung nach darin liegen,
dass du das "display:none" dem ul gibst:
#menu ul li ul {
display: none;}

Ohne es anschließend beim hover auf "display:block" zu setzen

EDIT:
Sorry, tust du doch, hab ich übersehen steht weiter unten, ich schau nochmal weiter drüber.
Aber die Seite gehosted wär einfacher

@Thor:
Wenn du mir beim letzten Satz zustimmst habe ich eigtl auch nur noch einen Satz zu sagen ;-)
Wenn jemand ohne Vorahnung eine Webseite realisieren will, ist es doch nur richtig, dass er auf HTML verwiesen wird,
denn da kommt er nicht dran vorbei.
Die meisten haben nunmal keine Programmiererfahrungen.
(Okay jetzt waren es doch zwei :-) )

Ist auf jeden Fall kein solches Drama, finde ich.
Dann ist die Person halt enttäuscht mit HTML muss sie trotzdem anfangen.

 

[_Thor_]

Wenn jemand ohne Vorahnung eine Webseite realisieren will, ist es doch nur richtig, dass er auf HTML verwiesen wird, denn da kommt er nicht dran vorbei.

Das ist richtig, allerdings sollte er gleich von Anfang an vermittelt bekommen, wo die Grenzen von HTML sind ...

Die meisten haben nunmal keine Programmiererfahrungen.

... und trotzdem verbinden auch Anfänger mit dem Begriff Programmierung Dinge, die HTML nicht kann.

Ist auf jeden Fall kein solches Drama, finde ich.
Dann ist die Person halt enttäuscht mit HTML muss sie trotzdem anfangen.

Mit HTML fängt man an, das ist richtig, aber es ist viel einfacher wenn man HTML gleich richtig versteht und nicht von falschen Annahmen ausgeht.

 

[SamiSalami]

@pixelmaster:
Okay, habs getestet wenn du das float:left rausschmeißt gehts in Safari - ich schau jetzt nochmal genauer wo das Problem liegt.

@Thor:
Also ich hatte diese Probleme nicht. Denn wenn ich was umsetzen wollte konnte ich recherchieren und da ergibt sich doch relativ schnell draus, dass HTML nicht alles kann. Nunja, ich verstehe deinen Gedanken dahinter, aber ich finds nunmal nicht so schlimm wie wenn Leute sich mit einem rebellischem Ansatz converse kaufen, welche nunmal zu Nike gehören; was ich damit sagen will ist: Okay - ich kapier was du meinst, vllt. werd ichs auch berücksichtigen, aber es ist für mich kein allzugroßes Drama und ich korrigiere meine Arbeitskollegen zB nicht, wenn sie sagen "Ich programmiere HTML" :-)

 

[SamiSalami]

Okay, du musst den Links zusätzlich ein "position:absolute;" geben und sie anders positionieren.
Aber ich würde auch an der Ordnung deiner CSS arbeiten du verweist oft doppelt auf dieselben Elemente,
auch der grundsätzliche Ansatz scheint mir etwas zu kompliziert; allerdings kann ich ohne die Umgebung zu kennen, auch nicht wissen, wofür viele deiner Angaben gut sind.

 

[pixelmaster]

@SamiSalami

perfekt liegt am float:left

aber wenn ich das float left raus nehme positioniert sich die Unternavigation anders und die Button liegen untereinander wann natürlich nicht sein soll.
Hast Du da vielleicht noch eine Idee??

 

[pixelmaster]

So jetzt mal den Link

Horizontale Drop-Down-Navigation

 

[pixelmaster]

Keiner eine Idee?
(float:left)

 

[_Thor_]

Dein Menü ist etwas unüblich aufgebaut. Bei dir ist jeder Menüpunkt eine eigene Liste mit jeweils nur einem Listenelement, das macht recht wenig Sinn, denn eine Liste besteht meistens aus mehreren Einträgen. Also statt

<ul>
  <li></li>
</ul>
<ul>
  <li></li>
</ul>
<ul>
  <li></li>
</ul>
<ul>
  <li></li>
</ul>

solltest du es besser so machen

<ul>
 <li></li>
 <li></li>
 <li></li>
 <li></li>
 <li></li>
</ul>

Die divs in den Links sind dort nicht zulässig, ein Blockelement darf nicht in einem Inline-Element stehen. Formatiere die Links direkt und entferne die divs.

Deine Untermenüs haben eine Breite von 200px, das reicht nicht, um die Listenelemente nebeneinander anzuordnen, die Listenelemente müssen dann float: left bekommen.

Abgesehen davon funktioniert es noch immer nicht in Chrome und Iron.

Edit: Was mir noch aufgefallen ist, dein Menü ist nicht mit der Tastatur bedienbar, weil du nur auf :hover die Untermenüs anzeigst, eine Tastatur benötigt aber :focus, das solltest du hinzufügen.