Zur Navigation

Sub-Menu des Drop Down Menüs(CSS) ist im IE9 nicht bedienbar

1 andehrl

hallo zusammen,
ich bin gerade dabei diese seite zu machen:

http://www.harz4-umzug.de/prooooooooooooooooobeAAAAAAAAAAAAAAAAAA.html

das drop-down-menü funktioniert soweit in allen beowsern, auch ie7/8. im ie9
klappt das untermenü zwar auf, verschwindet aber auch sofort wieder bei dem versuch mit der maus darauf zu gelangen. ich habe "line-height" des untermenüs erhöht, weil das menü sonst so gequetscht wirkt. lasse ich angaben für "line-height" weg funktioniert alles prima. ich würde aber der optik wegen schon gerne einen gewissen abstand zwischen den einzelnen unterpunkten angeben.

das ist der code zur seite:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unbenanntes Dokument</title>
</head>

<style type="text/css">
    @media screen, projection {
    html, body { height:100%; margin:0; padding:0; font-size: 100.1%;}
    #huelle {
	height:100%;
	width:100%;
	min-height:600px;
	min-width:800px;
	position:absolute;
	
}
}

#navi, #navi ul {
	list-style-type:none;
	padding: 0;
	margin: 0px;
}

#navi li {
	width:128px;
	float:left;
}

#navi li ul {
    display:none;
}
#navi li:hover ul {
	display:block;
	text-decoration: none;
}
a:link {
	text-decoration: none;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 0.97em;
	font-weight: bolder;
	line-height: 1.7em;
}
.menuliste {
	color: #FFF;
}
a:visited {
	text-decoration: none;
}
a:hover {
	text-decoration: none;
	color: #E2E2E2;
}
a:active {
	text-decoration: none;
}

#full-screen-background-image {
  z-index: -999;
  min-height: 100%;
  min-width: 800px;
  width: 100%;
  height: auto;
  position: fixed;
  top: 0;
  left: 0;
}
#huelle #mitte #mitteinhaltbox #projektboxen #bilder {
	height: auto;
	width: 100%;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #FFF;
}
.textinderbox {
	margin: 5%;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 66%;
	color: #000;
	line-height: 130%;
}
#huelle #mitte #mitteobenabstand #mitteobenHeadline {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 100%;
	font-weight: bold;
	color: #000;
	word-spacing: 1em;
	height: 15%;
	position: relative;
	padding-top: 7%;
	padding-right: 10%;
	padding-bottom: 10%;
	padding-left: 10%;
}
.bilder1 {
	height: auto;
	width: 22%;
	margin-bottom: 2%;
	margin-left: 5%;
	margin-top: 5%;
}

#huelle #links {
	clear: right;
	float: left;
	height: 100%;
	width: 29%;
}
#huelle #links #linksAbstandOben {
	height: 15%;
	width: 100%;
}
#huelle #mitte #mitteinhaltbox #projektboxen {
	height: auto;
	width: 80%;
	margin-right: auto;
	margin-left: auto;
	margin-top: 5%;
	-moz-border-radius:20px;
	-khtml-border-radius:20px;
	-webkit-border-radius:20px;
	-border-radius:10px;

	background-image: url(Bilder/transparent50.png);
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
}
#huelle #mitte #mitteobenabstand {
	height: 15%;
	width: 100%;
	background-image: url(Bilder/TransparentbildBB.png);
	background-repeat: repeat;
}
#huelle #mitte {
	clear: right;
	float: left;
	height: 100%;
	width: 42%;
}
#huelle #rechts {
	clear: right;
	float: right;
	height: 100%;
	width: 29%;
}
#huelle #mitte #mittezwischenrauam {
	height: 2%;
	width: 100%;
}
#huelle #mitte #mitteinhaltbox {
	height: 83%;
	width: 100%;
	overflow-y: scroll;
	background-image: url(Bilder/TransparentbildCC.png);
}
.textinderboxFett {
	font-family: Verdana, Geneva, sans-serif;
	color: #000;
	font-weight: bold;
	font-size: 102%;
}
#huelle #links #menuhuelle #dorisfeil {
	height: auto;
	width: 100%;
	text-align: left;
}
.dossi {
	clear: right;
	float: left;
	font-family: Verdana, Geneva, sans-serif;
	color: #000;
	font-weight: bolder;
	font-size: 0.97em;
	margin-left: 4%;
	line-height: 1.7em;
}
.menu {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 0.97em;
	font-weight: bolder;
	color: #FFF;
	margin-left: 1px;
	line-height: 1.7em;
	text-decoration: none;
}
#huelle #links #menuhuelle #menuinhalt {
	clear: right;
	float: left;
	height: auto;
	width: 50%;
}
</style>

<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<img alt="full screen background image" src="Bilder/stumpfD.jpg" id="full-screen-background-image" />
<div id="huelle">
    <div id="links">
      <div id="linksAbstandOben"></div>
      <div id="menuhuelle">
        <div id="dorisfeil"><span class="dossi">DORIS.FEIL</span>
          <ul id="navi">
  <li><a href="#" class="menu">MENU</a>
    <ul>
      <li><a href="#" class="menuliste">SLIDESHOW</a></li>
      <li><a href="#" class="menuliste">KUNSTPROJEKTE</a></li>
      <li><a href="#" class="menuliste">VERANSTALTUNGEN</a></li>
      <li><a href="#" class="menuliste">BIOGRAPHIE</a></li>
      <li><a href="#" class="menuliste">KONTAKT</a></li>
      <li><a href="#" class="menuliste">HOME</a></li>
    </ul>
  </li>
</ul></div>
      </div>
  </div>
    <div id="mitte">
      <div id="mitteobenabstand">
        <div id="mitteobenHeadline">KUNSTPROJEKTE</div>
      </div>
      <div id="mittezwischenrauam"></div>
      <div id="mitteinhaltbox">
        <div id="projektboxen">
          <div id="bilder"><img src="Bilder/DuneKlein.jpg" class="bilder1" /></div>
          <div class="textinderbox" id="text">
            <p><span class="textinderboxFett">Die große Düne</span><br />
              <br />
            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.<br />
            <br />
            <br />
            </p>
          </div>
        </div>
        
        
        <div id="projektboxen">
          <div id="bilder"><img src="Bilder/DuneKlein.jpg" class="bilder1" /></div>
          <div class="textinderbox" id="text">
            <p><span class="textinderboxFett">Die große Düne</span><br />
              <br />
            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.<br />
            <br />
            <br />
            </p>
          </div>
        </div>
        
        
        <div id="projektboxen">
          <div id="bilder"><img src="Bilder/DuneKlein.jpg" class="bilder1" /></div>
          <div class="textinderbox" id="text">
            <p><span class="textinderboxFett">Die große Düne</span><br />
              <br />
            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.<br />
            <br />
            <br />
            </p>
          </div>
        </div>
        
      </div>
</div>
    <div id="rechts"></div>

</div>
</body>
</html>

27.01.2012 14:47

2 Jörg Kruse

Toll, eine Regression im IE 9 :-\

Ich würde mal probieren, die line-height nicht nur für a:link, sondern auch für a:visited etc. oder ganz allgemein für a zu definieren.

27.01.2012 15:33

3 andehrl

Toll, eine Regression im IE 9 :-\

ja fand ich auch super.



Ich würde mal probieren, die line-height nicht nur für a:link, sondern auch für a:visited etc. oder ganz allgemein für a zu definieren.

ich habe die css wie du vorgeschlagen hast verändert. hat leider keinen effekt im ie gezeigt:

a:link {
	text-decoration: none;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 0.97em;
	font-weight: bolder;
	line-height: 1.7em;
}

a:visited {
	text-decoration: none;
	line-height: 1.7em;
}
a:hover {
	text-decoration: none;
	color: #E2E2E2;
	line-height: 1.7em;
}
a:active {
	text-decoration: none;
	line-height: 1.7em;
}

27.01.2012 21:58

4 Jörg Kruse

OK, dann würde ich stattdessen probieren, den Links in der Navigation ein "display:block" mitzugeben. Dann kannst du den Abstand mithilfe von padding realisieren. Das ist hier vielleicht unproblematischer als line-height

27.01.2012 23:34

5 andehrl

Zitat von Jörg
OK, dann würde ich stattdessen probieren, den Links in der Navigation ein "display:block" mitzugeben. Dann kannst du den Abstand mithilfe von padding realisieren. Das ist hier vielleicht unproblematischer als line-height

ich habe den einzelnen menüpunkten eine css zugewiesen mit der eigenschaft "display:block" und durch padding den abstand festgelegt. hatte leider auch nicht den gewünschten effekt.


<div id="menuhuelle">
        <div id="dorisfeil"><span class="dossi">DORIS.FEIL</span>
          <ul id="navi">
  <li><a href="#" class="menu">MENU</a>
    <ul>
      <li><a href="#" class="menuliste">SLIDESHOW</a></li>
      <li><a href="#" class="menuliste">KUNSTPROJEKTE</a></li>
      <li><a href="#" class="menuliste">VERANSTALTUNGEN</a></li>
      <li><a href="#" class="menuliste">BIOGRAPHIE</a></li>
      <li><a href="#" class="menuliste">KONTAKT</a></li>
      <li><a href="#" class="menuliste">HOME</a></li>
    </ul>
  </li>
</ul></div>
      </div>

.menu {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 0.97em;
	font-weight: bolder;
	color: #FFF;
	margin-left: 1px;
	text-decoration: none;
	display: block;
}

.menuliste {
	color: #FFF;
	display: block;
	padding-top: 1em;
}

29.01.2012 17:06

6 Jörg Kruse

Ich hab mal etwas getestet. Wenn .menu eine Hintergrundfarbe oder ein Hintergrundbild erhält, scheint der Bug nicht mehr aufzutreten. Dummerweise funktioniert dies nicht mit einem "background-color:transparent". Aber vielleicht kannst du dort ein volltransparentes Hintergrundbild einbinden?

29.01.2012 18:17

7 andehrl

Zitat von Jörg
Ich hab mal etwas getestet. Wenn .menu eine Hintergrundfarbe oder ein Hintergrundbild erhält, scheint der Bug nicht mehr aufzutreten. Dummerweise funktioniert dies nicht mit einem "background-color:transparent". Aber vielleicht kannst du dort ein volltransparentes Hintergrundbild einbinden?

das hab ich auch schon versucht. mit einem volltransparenten bild funktioniert es auch nicht.

29.01.2012 19:04

8 andehrl

Zitat von andehrl
Zitat von Jörg
Ich hab mal etwas getestet. Wenn .menu eine Hintergrundfarbe oder ein Hintergrundbild erhält, scheint der Bug nicht mehr aufzutreten. Dummerweise funktioniert dies nicht mit einem "background-color:transparent". Aber vielleicht kannst du dort ein volltransparentes Hintergrundbild einbinden?

das hab ich auch schon versucht. mit einem volltransparenten bild funktioniert es auch nicht.

ich habe gestern mit einem transparenten png-bild versucht das problem zu lösen. gerade habe ich auf einer anderen site gesehen, daß menüs dort mit transparenten gifs hinterlegt wurden.
und siehe da ... mit einem volltransparenten gif-bild funktioniert das menu auf meiner seite jetzt auch im ie9.

danke dir vielmals für deine hilfe :-)

29.01.2012 20:20

Beitrag schreiben (als Gast)

Die Antwort wird nach der Überprüfung durch einen Moderator freigeschaltet.





[BBCode-Hilfe]