IE Slidedownmenü Problem

Status
Nicht offen für weitere Antworten.

grX

Grünschnabel
Alloah, hab atm. folgendes Problem:
Unter FF und Opera is es absolut kein Problem, aber wenn ichs beim Internet Explorer probier...(wunder wunder) dann gehts net ^^

und zwar:
ich hab hier ein unter nem Banner 4 Menüpunkte. Unter den Menüpunkten (das is jetzt nur bei IE so, FF und Opera Version schaut anders aus, aber das is ja jetzt net von Belangen...) is ne Tabelle, die mit den restlichen Menüunterpunkten dynamisch / statisch gefüllt wird. Aber halt nur eine Spalte. Die Tabellen Elemente sind normalerweise wegen "overflow:none" nicht sichtbar, aber wenn man über das Header Element "hovert" dann, ham wir "overflow:visible" und man sieht das gesamte Menü. So, jetzt is das ja noch net das Problem, denn das sogar! Allerdings, wenn ich jetzt im IE vom Headerelement zum 1. Subelement wechseln will, dann is der Hover Effekt nimma da und die table is wieder "overflow:none"...bei FF und Opera das allerdings....naja...hoffe ihr könnt mir helfen =)

Hier ma die Navi
PHP:
<div id="menuebox">
	...
<!-- menue -->
<!-- Der folgende Block bedient nur IEs!
	 Durch diese Redundanz vermeiden wir den Einsatz von Javascript. -->
<!--[if IE]>
	<div class="stupidie">
		<a class="auss" href="#"><span class="menutag">IGOR inside</span>
			<table>
				<tr>
					<td>
						<a class="inn" href="index.php?t=shnews">News</a>
						<?
						include("inc/dbConnect.inc.php");
						$statement="SELECT * FROM cat1";
						$res=mysql_query($statement);
						while($row=mysql_fetch_array($res)) {
						?>
						<a class="inn" href="index.php?t=shcontent&conid=<?echo $row[conid]?>&c=1"><?echo $row[h1]?></a>
						<?
						}
						?>
					</td>
				</tr>
			</table>
		</a>
		<a class="auss" href="#"><span class="menutag">Infoservice</span>
			<table>
				<tr>
					<td>
						<a class="inn" href="index.php?t=shnl">Newsletter</a>
			      <a class="inn" href="">Anwenderforum</a>
						<a class="inn" href="index.php?t=shim">Infomail</a>
						<a class="inn" href="index.php?t=aefly">Ärzte Flyer</a>
					</td>
				</tr>
			</table>
		</a>
		<a class="auss" href="#"><span class="menutag">Anwendung</span>
			<table>
				<tr>
					<td>
						<a class="inn" href="#">Chondrozyten</a>
						<a class="inn" href="#">Knie/Patella</a>
						<a class="inn" href="#">Nase</a>
						<a class="inn" href="#">Kiefer</a>
						<a class="inn" href="#">Myoblasten</a>
						<a class="inn" href="#">Harinkontinenz</a>
					</td>
				</tr>
			</table>
		</a>
		<a class="auss_rechts" href="#"><span class="menutag">Kunde & Partner</span>
			<table>
				<tr>
					<td>
						<a class="inn" href="#">Vertriebspartner</a>
						<a class="inn" href="#">Referenzlister der Kunden</a>
						<a class="inn" href="#">Kooperationen</a>
						<a class="inn" href="#">Innovacell (Innsbruck)</a>
					</td>
				</tr>
			</table>
		</a>
	</div>
<![endif]-->
</div>


und das dazugehörige CSS, das mit
<!--[if IE 6]>
<style type="text/css">@import url(css/theme_ie.css);</style>
<style type="text/css">@import url(css/navi_ie.css);></style>
<![endif]-->

importiert wird

PHP:
#menue {
	display:none;
}
.stupidie {
	display: block;
	position: absolute;
	top: 5px;
	left: 0;
	z-index: 1000;
}

a.auss {
	float: left;
	width:195px;
	height: 20px;
	margin-right:6px;
	overflow: hidden;
	display: block;
	font-weight: bold;
	text-align: center;
	text-decoration: none;
	font-size: 12pt;
	background-color:#a6c9dc;
	color: #35889a;
	z-index: 1000;
}
a:hover.auss {
	overflow: visible;
	background-color: #a6c9dc;
	color:#c41300;
	z-index: 1000;
}
a:hover.auss table {
	width:195px;
	display:block;
	border-collapse:collapse;
	z-index: 1000;
}

a.auss_rechts {
	float: left;
	width:197px;
	height: 20px;
	overflow: hidden;
	display: block;
	font-weight: bold;
	text-align: center;
	text-decoration: none;
	font-size: 12pt;
	background-color:#a6c9dc;
	color: #35889a;
	z-index: 1000;
}
a:hover.auss_rechts {
	overflow: visible;
	background-color: #a6c9dc;
	color:#c41300;
	z-index: 1000;

}
a:hover.auss_rechts table {
	display: block;
	border-collapse: collapse;
	width:197px;
	z-index: 1000;
}

a.inn, a.inn_rechts{
	display:block;
	height:20px;
	text-decoration:none;
	text-align:justify;
	font-size:10pt;
	font-weight:normal;
	cursor: default;
	background-color:#dee8f2;
	color: #35889a;
	border: 1px solid #DDD;
	padding-left:10px;
	margin-left:2px;
	padding-top:2px;
	padding-bottom:2px;
	z-index: 1000;
}
a:hover.inn, a:hover.inn_rechts{
	position: relative;
	display: block;
	z-index: 1000;
}
span.menutag {
	display: block;
	cursor: default;
	z-index: 1000;
}
 
Ich hab mal die Code-Schnipsel in einem Testdokument eingefügt und das Menü erfolgreich im IE 6.0 getestet - siehe Anhang.

Nach eigener Aussage von grX funktioniert das Menü im Firefox und Opera, nur wird dort wohl ein anderes HTML-Markup und Stylesheet eingesetzt.

Vielleicht zeigt er uns ja noch den restlichen Quellcode (HTML + CSS) des Dokuments?
 

Anhänge

  • 27111attachment.jpg
    27111attachment.jpg
    44,8 KB · Aufrufe: 17
wie schauts aus mit dem IE 7, ich hab da so meine Probleme, aber vielleicht liegts ja nur an meinem html oder css:
Code:
#menue 
   {
   display:none
   }

.stupidie 
   {
   display:block;
   position:absolute;
   top:10px;
   left:10px;
   z-index:200px;
   }
      
a.auss1    
{
   border-bottom:1px solid #ffffff;
   border-right:1px solid #ffffff; 
   float:left;
   width:140px;
   height:15px;
   overflow:hidden;
   display:block;
   font-weight:400;
   text-align:center;
   text-decoration:none;
   background-color:#800080;
   color:#ffffff; 
   text-decoration:none
   }

a:hover.auss1 
{
   overflow:visible;
   background-color:#800080;
   color:#ffffff;
   }

a:hover.auss1 table 
               {
   display:block;
   margin-top:3px;
   background-color:#800080;
   color:#C0C0C0;
   }

a.inn
{
   display:block;
   width:130px;
   padding:2px;
   font-size:100%; 
   font-weight:normal;
   text-align:center;
   text-decoration:none;
   border-bottom:1px solid #ffffff;
   background-color:#ffffff;
   color:#808080;
   }
            
a:visited.inn 
               {
   background-color:#ffffff;
   color:#808080;
   }

a:hover.inn    
   {
   position:relative;
   background-color:#C0C0C0;
   color:#ffffff;
   }

span.menutag
   {
   display:block;
   cursor:default;
   }




HTML:
Code:
<div class="stupidie">
<a class="auss1" target="_top" href="http://www.onlinehelp.awa2000.de/index.html"><span class="menutag">Onlinehilfe</span>
<table><tr><td>
<a class="inn" href="http://www.onlinehelp.awa2000.de/onlinehelp.htm#ErsteSchritte" target="Hauptframe" onclick="FrameAendern(´http://www.onlinehelp.awa2000.de/onlinehelp_navi.htm´, ´Navigationsframe´)">Erste Schritte</a>
 
Im IE 6.0 funktioniert es einwandfrei, nur solltest du im Script das ´ durch ein ' ersetzen:

Code:
<div class="stupidie">
<a class="auss1" target="_top" href="http://www.onlinehelp.awa2000.de/index.html"><span class="menutag">Onlinehilfe</span>
<table><tr><td>
<a class="inn" href="http://www.onlinehelp.awa2000.de/onlinehelp.htm#ErsteSchritte" target="Hauptframe" onclick="FrameAendern('http://www.onlinehelp.awa2000.de/onlinehelp_navi.htm', 'Navigationsframe')">Erste Schritte</a>
    </div>

Zum IE7 kann ich dir leider nichts sagen, da ich ihn auf meinen System nicht installiert habe. Er steht nämlich erst ab WinXP zur Verfügung, und ich arbeite unter Win2000.
 
Im IE6 alles einwandfrei, aber wie gesagt im IE 7 kann man das Untermenü nicht mehr anklicken. Im Firefox lässt sich das Menü auch nicht bedienten :-(
 
Das Menü ist Klasse, nur im Firefox steht das Navigationsmenü mitten drin und ich kann es mit css nicht ändern

Code:
<div class="menu">

<ul>
<li><a class="hide" href="../menu/index.html">DEMOS</a> <!--[if lte IE 6]>
<a href="../menu/index.html">DEMOS
<table>
	<tr>
		<td><![endif]-->
		<ul>
			<li>
			<a href="../menu/zero_dollars.html" title="The zero dollar ads page">zero dollars</a></li>
			<li>
			<a href="../menu/embed.html" title="Wrapping text around images">wrapping text</a></li>
			<li><a href="../menu/form.html" title="Styling forms">styled form</a></li>
			<li>
			<a href="../menu/nodots.html" title="Removing active/focus borders">active focus</a></li>
			<li>
			<a class="hide" href="../menu/hover_click.html" title="Hover/click with no active/focus borders">HOVER/CLICK &gt;</a>
			<!--[if lte IE 6]>
			<a class="sub" href="../menu/hover_click.html" title="Hover/click with no active/focus borders">HOVER/CLICK &gt;
			<table>
				<tr>
					<td><![endif]-->
					<ul>
						<li><a href="../menu/form.html" title="Styling forms">styled form</a></li>
						<li>
						<a href="../menu/nodots.html" title="Removing active/focus borders">active focus</a></li>
						<li>
						<a href="../menu/hover_click.html" title="Hover/click with no active/focus borders">hover/click</a></li>
					</ul><!--[if lte IE 6]></td>
				</tr>
			</table></a><![endif]--></li>
			<li>
			<a href="../menu/shadow_boxing.html" title="Multi-position drop shadow">shadow boxing</a></li>
			<li>
			<a href="../menu/old_master.html" title="Image Map for detailed information">image map</a></li>
			<li>
			<a href="../menu/bodies.html" title="fun with background images">fun backgrounds</a></li>
			<li><a href="../menu/fade_scroll.html" title="fade-out scrolling">fade scrolling</a></li>
			<li>
			<a href="../menu/em_images.html" title="em size images compared">em sized images</a></li>
		</ul><!--[if lte IE 6]></td>
	</tr>
</table></a><![endif]--></li>

<li><a class="hide" href="index.html">MENUS</a>

<!--[if lte IE 6]>
<a href="index.html">MENUS
<table><tr><td>
<![endif]-->

	<ul>
	<li><a href="spies.html" title="a coded list of spies">spies menu</a></li>
	<li><a href="vertical.html" title="a horizontal vertical menu">vertical menu</a></li>
	<li><a href="expand.html" title="an enlarging unordered list">enlarging list</a></li>
	<li><a href="enlarge.html" title="an unordered list with link images">link images</a></li>
	<li><a href="cross.html" title="non-rectangular links">non-rectangular</a></li>
	<li><a href="jigsaw.html" title="jigsaw links">jigsaw links</a></li>
	<li><a href="circles.html" title="circular links">circular links</a></li>
	</ul>

<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->

</li>

<li><a class="hide" href="../layouts/index.html">LAYOUTS</a>

<!--[if lte IE 6]>
<a href="../layouts/index.html">LAYOUTS
<table><tr><td>
<![endif]-->

	<ul>
	<li><a href="../layouts/bodyfix.html" title="Cross browser fixed layout">Fixed 1</a></li>
	<li><a href="../layouts/body2.html" title="Cross browser fixed layout">Fixed 2</a></li>
	<li><a href="../layouts/body4.html" title="Cross browser fixed layout">Fixed 3</a></li>
	<li><a href="../layouts/body5.html" title="Cross browser fixed layout">Fixed 4</a></li>
	<li><a href="../layouts/minimum.html" title="A simple minimum width layout">minimum width</a></li>
	</ul>

<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->

</li>

<li><a class="hide" href="../boxes/index.html">BOXES</a>

<!--[if lte IE 6]>
<a href="../boxes/index.html">BOXES
<table><tr><td>
<![endif]-->

	<ul>
	<li><a href="spies.html" title="a coded list of spies">spies menu</a></li>
	<li><a href="vertical.html" title="a horizontal vertical menu">vertical menu</a></li>
	<li><a href="expand.html" title="an enlarging unordered list">enlarging list</a></li>
	<li><a href="enlarge.html" title="an unordered list with link images">link images</a></li>
	<li><a href="cross.html" title="non-rectangular links">non-rectangular</a></li>
	<li><a href="jigsaw.html" title="jigsaw links">jigsaw links</a></li>
	<li><a href="circles.html" title="circular links">circular links</a></li>
	</ul>

<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->

</li>

<li><a class="hide" href="../mozilla/index.html">MOZILLA</a>

<!--[if lte IE 6]>
<a href="../mozilla/index.html">MOZILLA
<table><tr><td>
<![endif]-->

	<ul>
	<li><a href="../mozilla/dropdown.html" title="A drop down menu">drop down menu</a></li>
	<li><a href="../mozilla/cascade.html" title="A cascading menu">cascading menu</a></li>
	<li><a href="../mozilla/content.html" title="Using content:">content:</a></li>
	<li><a href="../mozilla/moxbox.html" title=":hover applied to a div">mozzie box</a></li>
	<li><a href="../mozilla/rainbow.html" title="I can build a rainbow">rainbow box</a></li>
	<li><a href="../mozilla/snooker.html" title="Snooker cue">snooker cue</a></li>
	<li><a href="../mozilla/target.html" title="Target Practise">target practise</a></li>
	<li><a href="../mozilla/splittext.html" title="Two tone headings">two tone headings</a></li>
	<li><a href="../mozilla/shadow_text.html" title="Shadow text">shadow text</a></li>
	</ul>

<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->

</li>

<li><a class="hide" href="../ie/index.html">EXPLORER</a>

<!--[if lte IE 6]>
<a href="../ie/index.html">EXPLORER
<table><tr><td>
<![endif]-->

	<ul>
	<li><a href="../ie/exampleone.html" title="Example one">example one</a></li>
	<li><a href="../ie/weft.html" title="Weft fonts">weft fonts</a></li>
	<li><a href="../ie/exampletwo.html" title="Vertical align">vertical align</a></li>
	</ul>

<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->

</li>

<li><a class="hide" href="../opacity/index.html">OPACITY</a>

<!--[if lte IE 6]>
<a href="../opacity/index.html">OPACITY
<table><tr><td>
<![endif]-->

	<ul>
	<li><a href="../opacity/colours.html" title="colour wheel">opaque colours</a></li>
	<li><a href="../opacity/picturemenu.html" title="a menu using opacity">opaque menu</a></li>
	<li><a href="../opacity/png.html" title="partial opacity">partial opacity</a></li>
	<li><a href="../opacity/png2.html" title="partial opacity II">partial opacity II</a></li>
	<li><a class="hide" href="../menu/hover_click.html" title="Hover/click with no active/focus borders">&lt; HOVER/CLICK</a>

    <!--[if lte IE 6]>
    <a class="sub" href="../menu/hover_click.html" title="Hover/click with no active/focus borders">&lt; HOVER/CLICK
    <table><tr><td>
    <![endif]-->

		<ul class="left">
			<li><a href="../menu/form.html" title="Styling forms">styled form</a></li>
			<li><a href="../menu/nodots.html" title="Removing active/focus borders">active focus</a></li>
			<li><a href="../menu/hover_click.html" title="Hover/click with no active/focus borders">hover/click</a></li>
		</ul>

	<!--[if lte IE 6]>
	</td></tr></table>
    </a>
    <![endif]-->

	</li>
	</ul>

<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->

</li>
</ul>

</div>
 
Dann entferne mal den rotmarkierten Teil aus dem Stylesheet:

Code:
.menu {font-family: arial, sans-serif; width:750px; position:relative; margin:0; font-size:11px; margin:2px 0 100px 0; z-index:100;}
 
Guten Morgen,

den Fehler hab ich nun behoben, aber wie kann ich nun die Zeilenhöhe der Navigation verändern. Wenn ich height und line-height von 20px auf 15px ändere funktioniert das Menü nicht mehr. Das Menüfeld klappt zwar auf, aber ich kann nichts aus dem Untermenü anwählen, es verschwindet sofort wieder.

Code:
/* common styling */
.menu {font-family: verdana,arial, sans-serif; width:1000px; position:relative;font-size:10px; top:0px; margin:0px; 100px; z-index:100;}
.menu ul li a, .menu ul li a:visited {display:block; text-decoration:none; color:#000000;width:130px; border:1px solid #808080;-->height:15px<--; text-align:center; color:#FFFFFF;background:#800080; -->line-height:15px<--; font-size:10px; overflow:hidden; padding-left:4px; padding-right:4px; padding-top:1px; padding-bottom:1px}
.menu ul {padding:0; margin:0;list-style-type: none; }
.menu ul li {float:left; margin-right:1px; position:relative;}
.menu ul li ul {display: none;}
 
Status
Nicht offen für weitere Antworten.
Zurück