Ergebnis 1 bis 3 von 3

Thema: Navigationsmenü im IE macht Kummer

  1. #1
    Registriert seit
    28.11.2006
    Ort
    Zürich
    Alter
    46
    Beiträge
    533

    Frage Navigationsmenü im IE macht Kummer

    Bin an einer Homepage schreiben und habe nun beim IE9 ein Problem mit dem Navigationsmenü.
    Wenn ich mit der Maus auf Preise gehe öffnet sich das Untermenü mit Männer, Frauen und Kinder.
    Wenn ich dann mit der Maus runterfahre und Kinder auswählen will, dann verschwindet das Menü. Nur wenn ich mit dem Cursor ganz rechts bleibe, verschwindet die Auswahl nicht.

    Unter FF5 und Opera11.50 funtioniert es einwandfrei.
    Bei IE9 und Opera 11.11 hab ich die Probleme.

    Ich nehme mal an, dass es dazu einen extra Code für den IE braucht, habe aber bisher nichts gefunden.

    Kann mir da wer weiterhelfen?

    Hier der Code vom Index-File:
    Code:
    <!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>
    <link href="favicon.ico" rel="shortcut icon"/>
    <title>Coiffeur Tanya</title>
    <link rel="stylesheet" type="text/css" media="screen" href="screen.css"/>
    <script type="text/javascript" src="niftycube.js"></script>
    <script type="text/javascript">
    window.onload = function() {
    	Nifty("div#content_main","big");
    	Nifty("div.infobox1","big tl br");
    	Nifty("#infobox2","big tl br");
    }
    </script>
    
    <meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />
    
    </head>
    
    <body>
    
    <div id="main">
    
    	<div id="titel">
    		<h1><img src="http://www.informatikboard.ch/images/logo.jpg" alt="Coiffeur Tanya - Logo" width="400" height="84"/></h1>
    	</div>
    	
    	<div id="navigation">
    		<ul id="navi_h">
    			<li><a id="aktuell" href="index.html">Home</a></li>
    			<li><a href="#">News</a></li>
    			<li><a href="#">Portrait</a></li>
    			<li><a href="#">Kontakt</a></li>
    			<li><a href="#">Preise</a>
    				<ul>
    					<li><a href="pm.html">M&auml;nner</a></li>
    					<li><a href="pf.html">Frauen</a></li>
    					<li><a href="pk.html">Kinder</a></li>
    				</ul>
    			</li>
    		</ul>
    	</div>
    	
    	<div id="content">
    		
    		<div id="content_main">
    			<img src="http://www.informatikboard.ch/images/salon.jpg" alt="Blick in den Coiffeur-Salon"/>
    			<h1>Der zufriedene Kunde liegt uns am Herzen!</h1>
    			<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor 
    			invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam 
    			et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem 
    			ipsum dolor sit amet.</p>
    			
    			<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt 
    			ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo 
    			dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit 
    			amet.</p> 
    		</div>
    		
    		<div id="content_supp">
    			<div class="infobox1">
    				<h2>&Ouml;ffnungszeiten:</h2>
    				<p>Montag Ruhetag<br /><br />
    				Dienstag bis Freitag<br />
    				08.00 Uhr bis 18.30 Uhr<br /><br />
    				Samstag bis 16.00 Uhr<br /> <br />
    				Mittags durchgehend</p>
    			</div>
    			
    			<div id="infobox2">
    				<img src="http://www.informatikboard.ch/images/friseurutensilien.jpg" alt="Friseurutensilien" width="200" height="134"/>
    			</div>
    		</div>
    	</div>
    	
    	<div id="footer">
    		<p><a href="impressum.html">Impressum</a></p>
    	</div>
    
    </div>
    
    </body>
    
    </html>
    und hier noch der Code vom CSS:
    Code:
    * {
    	margin: 0; 
    	padding: 0;
    }
    
    body {
    	font-family: "Verdana", "Geneva", sans-serif;
    	font-size: 12pt;
    	background: url("http://www.informatikboard.ch/images/back2.jpg");
    }
    
    h1 {
    	font-size: 140%
    }
    
    h2 {
    	font-size: 120%
    }
    
    h1, h2 {
    	margin: 0 0 5px 0;
    	color: #990000;
    }
    
    a {
    	color: #000;
    	font-variant: small-caps;
    	font-weight: bold;
    	text-decoration: none;
    }
    
    p {
    	text-align: justify;
    	margin: 5px 0;
    }
    
    table {
    	margin-top: 20px;
    	padding: 3px;
    }
    
    th {
    	padding: 5px;
    }
    
    td {
    	padding: 5px;
    }
    
    #titel {
    	margin-left: 8px;
    }
    
    div#navigation {
       	width: 47.1em;
        padding: 0.8em;
    	border: none;
    }
    
    div#navigation div {
    	clear: left;
    }
    
    ul#navi_h {
        margin: 0;
    	padding: 0;
        text-align: center;
    }
    
    ul#navi_h li {
        list-style: none;
        float: left;
        position: relative;
        margin: 0.4em;
    	padding: 0;
    }
    
    *:first-child+html ul#navi_h li {  /* Korrektur fuer den IE 7 */
    	margin-bottom: -0.1em;
    }
    
    ul#navi_h li ul {
        margin: 0;
    	padding: 0;
        position: absolute;
        top: 1.6em; left: -0.4em;
        display: none;
     }
    
    *:first-child+html ul#navi_h ul {  /* Workaround fuer den IE 7 */
        background-color: #990000;
    	padding-bottom:0.4em;
    }
    
    ul#navi_h li:hover ul {
        display: block;
    }
    
    ul#navi_h li ul li {
        float: none;
        display: block;
        margin-bottom: 0.2em;
    }
    
    ul#navi_h a, ul#navi_h span {
        display: block;
        width: 6.4em;
        padding: 0.2em 1em;
        text-decoration: none;
    	font-weight: bold;
        border: 1px solid #000;
        border-left-color: #FFF;
    	border-top-color: #FFF;
        color: #000;
    	background-color: #FFF;
    }
    
    ul#navi_h a:hover, ul#navi_h span, li a#aktuell {
        border-color: #FFF;
        border-left-color: #000;
    	border-top-color: #000;
        color: #990000;
    	background-color: #E1D6B5;
    }
    
    li a#aktuell {
        color: #990000;
    	background-color: #E1D6B5;
    }
    
    ul#navi_h li ul span {
        background-color: #990000;
    	color: #E1D6B5;
    }
    
    #main {
    	width: 800px;
    	margin-top: 20px;
    	margin-left: auto;
    	margin-right: auto;
    	padding-bottom: 10px;
    	background: #FFF;
    }
    
    #content {
    	margin-left: 8px;
    	margin-top: 40px;
    	margin-right: 8px;
    	clear: both;
    }
    
    #content #content_main {
    	width: 485px;
    	float: left;
    	background: #E1D6B5;
    	padding: 20px;
    }
    
    #content_supp {
    	width: 250px;
    	float: right;
    }
    
    #content {
    	overflow: auto;
    }
    
    #content_supp .infobox1 {
    	background: #E1D6B5;
    }
    
    #infobox2 {
    	background: #E1D6B5;
    }
    
    #content_supp .infobox1, #infobox2 {
    	padding: 20px;
    	margin-bottom: 10px;
    }
    
    .infobox1 h2 {
    	font-size: 115%;
    }
    
    .infobox1 p {
    	font-size: 105%;
    	margin: 5px 0px;
    }
    
    #content_impressum {
    	width: 730px;
    	margin-left: 8px;
    	background: #E1D6B5;
    	padding: 20px;
    }
    
    #bildergalerie {
    	overflow: hidden;
    }
    
    #bildergalerie ul li {
    	display: block;
    	float: left;
    }
    
    #bildergalerie img {
    	margin: 8px 10px 8px 0;
    	float:left;
    }
    
    strong {
    	color: #990000;
    }
    
    #footer {
    	background: #FFF;
    	padding: 5px 0 0 30px;
    }
    
    #footer a:hover {
    	color: #990000
    }
    Geändert von Dummy_2 (20.08.2011 um 14:06 Uhr)
    Richte nicht zu vorschnell, damit Du Dich damit nicht selbst richtest!

  2. #2
    vstm ist offline Fortgeschrittener Benutzer
    Registriert seit
    28.12.2008
    Ort
    Züri Oberland
    Alter
    35
    Beiträge
    123

    Standard AW: Navigationsmenü im IE macht Kummer

    Wenn du in der CSS-Regel "ul#navi_h li ul" "background-color" auf z.B. "white" setzt, dann klappt es. Offensichtlich hat der IE das gefühlt die Maus ist nicht mehr über dem ul so bald beim Transparenten teil ein Textelement ("Montag Ruhetag
    ") darunter ist.

    Ich kenne mich da zu wenig aus (bin nicht so der Webdesigner) aber ich sehe folgende Möglichkeiten:
    - Entweder den Background setzen damit das UL nicht mehr transparent ist.
    - Versuchen beim ul-Hintergrund ein Transparentes 1x1 PNG/GIF Bild zu setzen. Dies klappt natürlich nicht wenn der IE schlau genug ist das Bild als Transparent zu erkennen (was ich aber Bezweifle).
    - Auf eine Javascript-Lösung zurückgreifen (evtl. halt nur als "Fallback" im IE).
    - Die Seite so umstellen das unter dem Menü kein Text ist (okay, das wäre dann wirklich die letzte Lösung wenn alles andere nicht klappt)

    Eben, vielleicht gibt es Webdesigner welche da eine elegantere Lösung haben.

  3. #3
    Registriert seit
    28.11.2006
    Ort
    Zürich
    Alter
    46
    Beiträge
    533

    Standard AW: Navigationsmenü im IE macht Kummer

    Danke für Deine Antwort!

    Das mit white muss ich mal ausprobieren. Deine anderen Tipps nehm ich gerne zur Kenntnis, hoffe aber, dass da ein Webdesigner noch eine elegantere Lösung kennt.
    Richte nicht zu vorschnell, damit Du Dich damit nicht selbst richtest!

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •