• Apfeltalk ändert einen Teil seiner Allgemeinen Geschäftsbedingungen (AGB), das Löschen von Useraccounts betreffend.
    Näheres könnt Ihr hier nachlesen: AGB-Änderung
  • Sprichwörter und Redewendungen sind das Thema unseres Monatswettbewerbes. Nähere Informationen dazu gibt es natürlich auch, und zwar auf dieser Seite ---> Klick

Navigationsproblem und das schon seit Monaten

Kimmy121

Gala
Registriert
08.05.06
Beiträge
49
Hallo,
Ich arbeite jetzt schon seit Monaten an einem CSS Menü (das für Mozilla und Opera ist schon fertig) für den Internet Explorer (da ja sehr viele immer noch den IE nutzen und sowas wie T-Online auch im IE Style sag ich's mal so an gezeigt wird). Seit Oktober (kein Scherz) bin ich jetzt schon auf der suche nach Leuten die mir Helfen können und ich war damit schon in vielen Foren doch irgendwie denk ich langsam das Problem ist unlösbar weil ich nirgends Antworten bekommen habe.....:-[ ich verzweifle wirklich langsam. Im Endeffekt will ich einfach nur das das Menü für den IE richtig positioniert ist und bitte sprecht icht in Fachsprache mit mir da ich mich bei CSS kein bisschen oder kaum auskenne.
Vlt hilft es ja wenn ich euch den Originallink gebe:
http://barrierefrei.e-workers.de/workshops/tricks/menues.php (gleich das erste)

MEIN HTML CODE:
<DOCTYPE>
<html>
<head>
<meta>
<meta>
<link>
<title></title>
</head>

<body>

<table>
<tr>
<td>
<img></td>
</tr>
<tr>
<td>
<!-- <font>Hier soll das CSS Menü erscheinen!!</font> -->

<ul><c>
<li><a>Teste</a>
<ul>
<li><span>Blabla</span></li>
<li><a>Blaba</a></li>
</ul>
</li>

<li><a>Testzwei</a>
<ul>
<li><a>Abc</a></li>
<li><a>Abc2</a></li>
</ul>
</li>

<li><a>Bilder</a>
</li>

<li><a>Geheim</a>
<ul>
<li><a>Fenster</a></li>
</ul>
</li>

<li><a>Links</a>
<ul>
<li><a>Links</a></li>
<li><a>Rechts</a></li>
</ul>
</li>

<li><a></a>
<ul>
<li><a>Guestbook</a></li>
</ul>
</li>

</ul>

</td>
</tr>
<tr>
<td>
<p>
</p>
<p>
</p>
<p>
<font>TEST</font></p>
<p>
 </p>
<p>
 </p>
<p>
 </p>
<p>
 </p>
<p>
 </p>
<p> </p>
</td>
</tr>
</table>
</body>
</html><webbot>
Meine CSS DATEI
/*
Menüleiste mit CSS (c) webdesign-perder.de
*/

ul#Menuleiste {
padding: 0; /* Menü nicht einrücken */
text-align: center; /* Schrift zentrieren */
// font-size: .9em; /* Schriftgröße */
}

ul#Menuleiste li {
list-style: none; /* Entfernt Listen-Punkte */
float: left; /* Nebeneinander */
width: 6.55em; /* Feste Breite */
// width: 7.25em; /* Feste Breite */
position: relative; /* Submenüs unter den Menüpunkten */
}

ul#Menuleiste li ul {
padding: 0; /* Untermenüs nicht einrücken */
position: absolute; /* Submenüs im Vordergrund */
top: -1.7em; /* Position (vertikal) */
}

ul#Menuleiste a, ul#Menuleiste span {
display: block; /* Buttons gleiche Größe */
text-decoration: none; /* Links nicht unterstreichen */
font-weight: bold; /* Schrift fett */
border: 1px solid saddlebrown; /* Rahmen Form und Farbe */
border-left-color: sienna; border-top-color: sienna; /* Farben oben und links */
color: darkred; /* Schriftfarbe */
background-color: sandybrown; /* Hintergrundfarbe */
}

/* Farben beim Mouse-Over */

ul#Menuleiste a:hover, ul#Menuleiste span, li a#aktuell {
border-color: sienna;
border-left-color: saddlebrown; border-top-color: saddlebrown;
color: sandybrown; background-color: darkred;
}

/* Aktuelles Untermenü */

li a#aktuell {
color: sandybrown; background-color: saddlebrown;
}

/* Submenüs nur beim Mouse-Over */

ul#Menuleiste li>ul {
display: none;
top: 1.4em; /* Position (vertikal) */
}

ul#Menuleiste li:hover>ul {
display: block;
}
Also im Endeffekt will ich nur das es mit dem IE genauso aussieht wie bei Mozilla / Opera etc.
Danke schon im Voraus für euere Hilfe
LG
Katrin
 
Zuletzt bearbeitet:

Hilarious

Gelbe Schleswiger Reinette
Registriert
10.08.05
Beiträge
1.759
Hallo Katrin,

das funktioniert bestimmt und liegt vermutlich nur an einer Kleinigkeit. Leider ist der MSIE nicht so recht in der Lage, bei allen Dingen mitzuspielen, vor allem kann er mit der Pseudo-Klasse "li:hover" nicht richtig was anfangen. Bei Mark "Tarquin" Wilton-Jones habe ich einen netten Vergleich gefunden. Vermutlich möchtest Du mal einen Blick auf die so genannten SuckerFish-DropDowns werfen, eine ganze Gruppe von Lösungsansätzen, die auf einen Artikel bei A List Apart aus dem November 2003 zurückgehen.

Wichtig in allen Fällen ist, dass Du die verschiedenen Internet Explorer-Versionen testest, denn auch der MSIE 7 ist nicht ohne Tadel und einen richtigen DocType verwendest, woran sich nämlich sonst der MSIE 6 stören könnte.
 

duderino

Prinzenapfel
Registriert
26.01.06
Beiträge
555
Passt jetzt zwar nicht 100%ig zum Thema aber diese Seite habe ich vor kurzem gefunden. Man kann da Screenshots von so ziemlich jedem Browser und jeder Plattform machen lassen um zu testen ob die eigene Seite auch wirklich zu überall richtig angezeigt wird.

http://browsershots.org
 
  • Like
Reaktionen: .holger

Kimmy121

Gala
Registriert
08.05.06
Beiträge
49
Danke. Aber das Problem ist das ich weiss das es falsch angezeigt wird (habe mehrere Browser auf meinem PC) und nur mit dem IE und sowas wie T-ONLINE gibt es Probleme aber das Problem ist das ich nicht weiss wo genau im Code mein Fehler liegt habe schon oft gelesen das das mit dem hover nicht beim IE klappt aber was soll ich stattdessen schreiben habe leider null Ahnung von CSS und meine Seite soll bald online gehen weil ich dann in den nächsten Monaten keine Zeit mehr haben werde und Geld für nen Webdesigner hab ich auch keines..
 

Hilarious

Gelbe Schleswiger Reinette
Registriert
10.08.05
Beiträge
1.759
Schau mal bei den Artikel von A List Apart, den ich oben verlinkte. Für einfache Zwecke wird der genügen. Problematisch wird es erst, wenn unter der ausklappenden Fläche ein Formularfeld wie ein Eingabefeld oder eine Combo(Select)-Box liegt. Das bringt den MSIE 5.5 und 6 aus dem Takt. Solche Felder tauchen schnell als Suchfeld auf und müssten sich dann eher oberhalb der Navigation befinden (es gibt auch andere Lösungen aber die führen zu weit). Wenn Du dort kein Eingabefeld planst, um so besser.
 

Marja

Oberösterreichischer Brünerling
Registriert
07.08.06
Beiträge
708
Passt jetzt zwar nicht 100%ig zum Thema aber diese Seite habe ich vor kurzem gefunden. Man kann da Screenshots von so ziemlich jedem Browser und jeder Plattform machen lassen um zu testen ob die eigene Seite auch wirklich zu überall richtig angezeigt wird.

http://browsershots.org

Sorry, ich muss hier mal OT einhaken...

Dieser Test hat mich auf die Idee gebracht, dass ich gar nicht getestet habe, wie IE- kompatibel unsere Kiga- Homepage ist.

Leider komme ich mit browsershot nicht wirklich klar
(ich stolpere über das Englisch und leider kann ich "deutsch" nicht aktivieren),
also habe ich mal eben auf dem Kiga- PC den IE installiert
und stelle erschrocken fest, dass das komplette Navigationsmenu und alle anderen Verlinkungen
beim Laden der Seite kurz auftauchen und dann wieder verschwunen sind!? :eek:

Hilfe, heisst das jetzt, die armen IE- User können nicht auf unserer Seite navigieren???

Die Seite ist www.kiga-maria-koenigin.de

Eure grade kurzfristig verzweifelte Marja
 

Kimmy121

Gala
Registriert
08.05.06
Beiträge
49
@ Marja: Also bei mir im IE geht die Seite eig. habe aber nur kurz hineingeschaut

Ja auf der Seite habe ich zwar was gefunden und zwar:

This positions the second-level lists absolutely (pulling them out of the flow of HTML into a world all of their own) and sets their initial state to not be displayed. If you substitute display: none with display: block, you will see the need for the top and left properties in Internet Explorer, because without them, IE will align the second-level lists to the top right of their relative parent rather than the bottom left. Unfortunately, this IE fix will mess things up in browsers like Opera, so add the following CSS to reset the top and left properties on all but IE browsers:
li > ul {
top: auto;
left: auto;
}
And now, making the sucker work. To make a second-level list appear when its parent list item is “rolled over,” we simply need to add the following:
li:hover ul { display: block; } Which says that any list that is nested in a list item that has the cursor hovering over it should be displayed.
Finally, because the lists are floated left, the content underneath it needs to be set free of the floating by applying clear: left to it.
Hold on a minute!

“This dropdown malarkey doesn't work!” I hear 102.6% (or the latest percentage being thrown about) of you cry. I am, as some might have guessed, talking about Internet Explorer users. The more you use and develop with browsers such as Mozilla the more you realize how pathetic Internet Explorer can be when it comes to web standards. The :hover pseudo class should work with any element, but in Internet Explorer it only works with links. So. What’s the use in a dropdown menu when it only works on -2.6% of browsers? Not much, to be honest. We need to apply a little bit more magic.
DOM-based scripting to the rescue

We’ve established IE’s lack of support for the :hover pseudo class, but by using the Document Object Model, we can attach mouseover and mouseout events to any element. This is good news for us because it means that with a simple snippet of JavaScript we can effectively patch IE’s :hover problems.
Because IE is blind we need to find another way to identify the properties of the :hover pseudo class. With JavaScript, we know that we can manipulate the className property of an element so what we are going to do first is alter the CSS:
li:hover ul{ display: block; } becomes:
li:hover ul, li.over ul{ display: block; } Now we can invoke the :hover CSS rules by adding the class over to the desired element. We also need a way to tell IE which of the UL elements on the page we actually want to be our dropdown menus. We can do this by giving an id to our root ul element:
<ul> becomes:
<ul id="nav"> Now that we have a means of identifying the root ul element of our dropdown list, we can grab this element and loop through all of its child elements, attaching mouseover and mouseout events to all the li elements nested within it. And this is how it’s done:
startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes;
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace(" over", "");
}
}
}
}
}
window.onload=startList; On page load, the startList function is invoked. The function determines if the browser is actually IE 5 or greater by checking for the existence of the document.all object and document.getElementById function. This is a bit of a crude way of doing it but it’s short and sweet — and since we are trying to make a compact solution, this will do. It then loops through, enabling mouseover and mouseout events which add and remove the over class from the className property of the element.
There you have it. If you got lost anywhere, have a look at a commented, bare-bones example in action.
Gills, fins, scales...

So far things are a little bare. The idea has been to show the basic workings of the Suckerfish Dropdown, but CSS can make things look a lot prettier. An obvious starting point would be to apply a background color to the second-level lists.
After resetting the top and left properties as described earlier, dropdowns in the pretty example appear directly below menu labels in most modern browsers, but unfortunately not in all. In Safari 1.0, they still drop down from the top left edge of the screen. {Check the discussion forum for workarounds. –Ed.}
Further usability and accessibility

Making links out of the first-level list items will allow tab-stopping for readers who don’t use pointing devices. Pointing those links to higher-level pages than the links in the dropdowns would be even better.


Aber ich habe leider nicht die geringste Idee was ich daran verändern soll also jetzt an meinem Menü..da steht zwar was von top: auto und so weiter aber da steht nirgends wo ich das jetzt einfügen soll auch deswegen weil in meinem Code auch gar nichts von auto steht ...hilfe ich bin so verwirrt
 

Hilarious

Gelbe Schleswiger Reinette
Registriert
10.08.05
Beiträge
1.759
Keine Panik

Sorry, ich muss hier mal OT einhaken...


Die Seite ist www.kiga-maria-koenigin.de

Eure grade kurzfristig verzweifelte Marja

Nur zum Zweck, Leben zu retten...

Du brauchst Dir keine Sorgen zu machen. So richtig mies sieht die WebSite nur mit dem MSIE 5.01 aus, der nachfolgenden Versionen 5.5, 6 und 7 kommen perfekt damit klar (jedenfalls mit der Startseite). Und zu Deinem Glück benutzen nur noch gaaanz wenige genau diese Version (noch weniger die älteren Versionen), nämlich bei einer richtig großen WebSite eines meiner Kunden nur 0.49% (gerade mal reingeblinzelt). Also einer von 200 Besuchern fährt eine dampfbetreibene Kutsche. Das ist kein Grund zur Sorge.

Hier habe ich Dir mal ein paar Klicken-zum-Vergrößern-Screenshots von den verschiedenen Versionen hochgeladen (um die Firefoxes und Safaris mache ich mir per-se keine Sorgen):

MSIE 5.01


MSIE 5.5


MSIE 6.0


MSIE 7.0
 
  • Like
Reaktionen: Marja

Hilarious

Gelbe Schleswiger Reinette
Registriert
10.08.05
Beiträge
1.759
Für diejenigen, die voll Spannung die Lösung seit Tagen erwarten, und für diejenigen, die gerade nichts besseres vorhaben, hier die Umsetzung eines Ansatzes mit Hilfe des bekannten Suckerfish-Schemas.

(Optik: Kimmy121)
screenshot.png


Downloads
index.htm
header01.jpg
style.css