✔ CSS Menü IE Problem

  • Themenstarter Themenstarter CSS Neuling
  • Beginndatum Beginndatum
C

CSS Neuling

Hallo,
ich bin selbst absolut untallentiert, wenn es um Design geht, komme aber ab und an nicht drum herum.

Ich habe (nach Vorlagen) ein CSS Menü mit "flyout" (nennt sich das so?) gebastelt, allerdings geht dieses nur im Firefxo korrekt. Ich fand eine Möglichkeit zumindest das Menü an sich darzustellen im IE nur kommt das flyout nicht mehr ?

Ich poste mal die CSS und die Stelle in der HTML Datei:

HTML: 
<html>
<head>
<title>Testseite</title>
  <link href="css/layout.css" rel="stylesheet" type="text/css">
    <!--[if IE]>
	<style type="text/css" media="screen">
	body {
	behavior: url(csshover.htc);
	font-size: 100%;
	}

	ul li {position: relative;float: left; width: 100%;}
	li ul {position: relative;
	left: 149px;
	top: 0;
	display: none;}
	
	ul li a {
	display: block;
	text-decoration: none;
	color: #777;
	background: #fff;
	padding: 5px;
	border: 1px solid #ccc;
	border-bottom: 0;
	}
	
	ul {
	margin: 0;
	padding: 0;
	list-style: none;
	width: 150px;
	border-bottom: 1px solid #ccc;
	}

	
	li:hover ul, li.over ul {
	display: block; }
	
	</style>
	<[endif]-->
</head>
<body>
...
<body>
</html>

Da sieht man quasi einen Block nur für den IE, allerdings scheine ich doch etwas zu wenig CSS zu beherrschen, um das Problem zu lösen.

Hier mal die CSS Datei:

CSS: 
/* Menu */
ul li {
	position: relative;
	}
li ul {
	position: absolute;
	left: 149px;
	top: 0;
	display: none;
	}
ul li a {
	display: block;
	text-decoration: none;
	color: #777;
	background: #fff;
	padding: 5px;
	border: 1px solid #ccc;
	border-bottom: 0;
	}
ul {
	margin: 0;
	padding: 0;
	list-style: none;
	width: 150px;
	border-bottom: 1px solid #ccc;
	}
li:hover ul, li.over ul {
	display: block; }
 /* Menu Ende */
Hat jemand einen Tipp, wie ich das Menü auch im IE darstellen kann?
 
Meinst du mit "flyout" vllt ein Drop Down Menü, also das es auf die Maus des Benutzers reagiert wenn er drüber fährt bzw klickt?

Wenn ich mich nicht irre liegt das daran das der IE die :hover Aktion nur bei Hyperlinks, sprich <a-Tags> untersützt. Verbessert mich wenn ich falsch liege :P

Du könntest das Menü mit JavaScript realisieren, dann sollte es auch mit dem IE klappen. Google einfach mal nach Drop Down Navi :)

#EDIT:
Okay so ein flyout Menü gibt es wirklich! Vllt intressant für dich: http://www.cssplay.co.uk/menus/flyoutt.html laut Titel sollte es auch im IE ohne JavaScript funktionieren!
 
Zuletzt bearbeitet:
Hallo zer0,

danke für Deine Antwort. Genau, soetwas in der Art soll das oben bei mir auch sein. Ich schaue mir das mal an und melde mich :)
 
Hi,

von welcher IE-Version ist denn hier überhaupt die Rede?

Siehe hierzu auch meinen "Sticky-Thread" in der Themenübersicht des CSS-Boards:


Seit dem IE7 wird nämlich die angesprochene :hover-Pseudoklasse auch für die übrigen HTML-Elemente unterstützt.

Einzige Voraussetzung: das HTML-Dokument muß den Browsern mit einer entsprechenden Doctype-Deklaration im standardkonformen Modus übergeben werden, was hier offensichtlich nicht der Fall ist, wenn ich den eingangs gezeigten HTML-Code betrachte.

Diese Variante bereitet im IE7 und aktuellen IE8 überhaupt keine Probleme:
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<title>Testseite</title>
      
	<style type="text/css" media="screen">
	body {
	font-size: 100%;
	}

	ul li {position: relative;float: left; width: 100%;}
	li ul {position: relative;
	left: 149px;
	top: 0;
	display: none;}
	
	ul li a {
	display: block;
	text-decoration: none;
	color: #777;
	background: #fff;
	padding: 5px;
	border: 1px solid #ccc;
	border-bottom: 0;
	}
	
	ul {
	margin: 0;
	padding: 0;
	list-style: none;
	width: 150px;
	border-bottom: 1px solid #ccc;
	}
	
	li:hover ul {
	display: block; }
	</style>
	
</head>
<body>
<ul>
      <li><a href="#">toplink 1</a>
            <ul>
                   <li><a href="#">sublink 1</a></li>
            </ul>
       </li>
</ul>
</body>
</html>


Falls du vom veralteten IE6 sprichst, empfehle ich dir den Artikel Son of Suckerfish Dropdowns mit dem hier passenden Beispiel Suckerfish Dropdowns - Vertical, oder direkt ie7-js in deinen Seiten zu implementieren, um noch weitere seiner mangelhaften Interpretationen der CSS-Spezifikationen auszugleichen, sowie eine Liste seiner bekannten Bugs zu fixen.

mfg Maik
 
Hallo Maik,
Du hast recht, das habe ich übersehen. Entschuldige. Es ging in diesem Fall tatsächlich primär um den IE 7 und IE8.

Dein Beispiel funktioniert tadellos, vielen Dank!
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück