Dropdown-Menü verrutscht bei Browserverkleinerung

KleinerEisbaer · #1 (**permalink**) 12.11.2007, 10:06

Hallo Zusammen,

ich habe ein Dropdownmenü erstellt. Dieses ist waagerecht zwischen Kopf und Content der Website aufgebaut.
Wenn ich nun den Browser verkleinere wird die Menüleiste umgebrochen, was natürlich ziemlich besch*** aussieht.
Ich hatte mir jetzt schon einige Tips mit 'min-width' etc. eingeholt, aber alles was ich ausprobiert habe funktioniert letztlich NICHT im IE 6.

Also, ich bin noch schwer auf der Suche nach einer Lösung zu diesem Problem!

Hier erst mal der Quellcode ( in Gänze, zum evtl. Kopieren ):

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style text="text/css"> 
*{ margin: 0;
padding: 0; }

html,body { 	margin:0;
		padding:0;
		height:100%;
		font-family: sans-serif;
		overflow:hidden;
	/*	font-family: Arial, Verdana, Helvetica; */}

#header {       height: 15%; 
		border-width: 1px;
		border-style: solid;
		border-color: black;
	  } 
 
#menuleiste {   height: 5%;
		border-width: 1px;
		border-style: solid;
		border-color: black;
		min-width: 875px;
		white-space: nowrap; }

#right {        width: 25%;
		height: 75%;
		border-width: 1px;
		border-style: solid;
		border-color: black;
		float: right;
		margin-left: 0;
		margin-left:-3px; }

#content {      height: 75%;
		border-width: 1px;
		border-style: solid;
		border-color: black;
		overflow:auto; }

#footer {       height: 5%;
		border-width: 1px;
		border-style: solid;
		border-color: black; } 

	                         
#menu { height: 100%; list-style-type:none; list-style-position:inside; margin:0px 0 0px 0px; padding:0;}
#menu li {height: 100%; float:left; padding:0; margin:0 5px 0 0; position:relative; width:170px; z-index:100;}
#menu li dl {height: 100%; position:absolute; top:0; left:0; padding:0; margin: 0;}
#menu li a, #menu li a:visited {height: 100%; text-decoration:none; padding:0; margin: 0;}
#menu li dd {display:none;}
#menu li:hover, #menu li a:hover {border:0;}
#menu li:hover dd, #menu li a:hover dd {display:block;}
#menu li:hover dl, #menu li a:hover dl {padding-bottom:20px;}                                  
#menu table {height: 100%; border-collapse:collapse; padding:0; margin: 0px; font-size:1em;}
#menu tr {height: 100%;}
#menu dl {height: 100%; width: 170px; margin: 0; padding: 0;}
#menu dt { height: 100%; margin:0; padding: 0px; font-size: 1.2em; color: #444444; }
#menu .first { height: 100%; background: #9AC0CD top left; text-align:center;}
#menu dd { color: #444444; font-size: 1.0em; background-color: #CCCCFF; padding:1px; padding-left:5px; margin: 0;}
#menu .zwischenueberschrift { font-size: 1.1em; color: #444444; background-color: #99CCCC; padding-left:5px; margin: 0;}
.gallery dt a, .gallery dt a:visited {color:#444444;}
.gallery dd a, .gallery dd a:visited {color:#444444; text-decoration:none; display:block; 
background: #CCCCFF; }
.gallery dd a:hover {background: #9AC0CD; color:#444444;}
.topll { position: absolute; right: 0px;} 
		
</style>
<!--[if lte IE 6]>
<style type="text/css">
#menu dd a, #menu dd a:visited { height:1%; }
</style>
<![endif]-->
</head>

<body>

<div id="header">
Header
</div>

<div id="menuleiste">
<ul id="menu">
	<li> 
	<!--[if lte IE 6]><a href="#nogo"><table cellspacing="0" cellpadding="0"><tr><td><![endif]-->
	<dl class="gallery">
	<dt class="first"><a href="Aktuell/index.html">Aktuell</a></dt>
	<dd><a href="Aktuell/nachrichten.html">Nachrichten</a></dd>
	<dd><a href="Aktuell/newsletter.html">Newsletter</a></dd>
	<dd><a href="Aktuell/stellenangebote.html">Stellenangebote</a></dd>
	<dd><a href="Aktuell/ausblicke.html">Ausblicke</a></dd>
	</dl>
	<!--[if lte IE 6]></td></tr></table></a><![endif]-->
	</li>
	
	
	<li>
	<!--[if lte IE 6]><a href="#nogo"><table cellspacing="0" cellpadding="0"><tr><td><![endif]-->
	<dl class="gallery">	
	<dt class="first"><a href="Unternehmen/index.html">Unternehmen</a></dt>
	<dd class="zwischenueberschrift">Unternehmen</dd>
	<dd><a href="Aktuell/nachrichten.html">XXXXXXXXXXXXXX</a></dd>
	<dd><a href="Aktuell/nachrichten.html">Presse</a></dd>
	<dd><a href="Aktuell/nachrichten.html">Referenzen</a></dd>
	<dd><a href="Aktuell/nachrichten.html">Stellenangebote</a></dd>
	<dd class="zwischenueberschrift">Service</dd>
	<dd><a href="Aktuell/nachrichten.html">XXXXXXXXXXXXXX</a></dd>
	<dd><a href="Aktuell/nachrichten.html">XXXXXXXXXXXXXX</a></dd>
	<dd><a href="Aktuell/nachrichten.html">XXXXXXXXXXXXXX</a></dd>
	<dd class="zwischenueberschrift">Support</dd>
	<dd><a href="Aktuell/nachrichten.html">XXXXXXXXXXXXXX</a></dd>
	<dd><a href="Aktuell/nachrichten.html">XXXXXXXXXXXXXX</a></dd>
	<dd><a href="Aktuell/nachrichten.html">XXXXXXXXXXXXXX</a></dd>
	</dl>
	<!--[if lte IE 6]></td></tr></table></a><![endif]-->
	</li>


	<li>
	<!--[if lte IE 6]><a href="#nogo"><table cellspacing="0" cellpadding="0"><tr><td><![endif]-->
	<dl class="gallery">
	<dt class="first"><a href="Loesungen/index.html">L&ouml;sungen</a></dt>
	<dd class="zwischenueberschrift">L&ouml;sungen</dd>
	<dd><a href="Aktuell/nachrichten.html">XXXXXXXXXXXXXX</a></dd>
	<dd><a href="Aktuell/nachrichten.html">XXXXXXXXXXXXXX</a></dd>
	<dd><a href="Aktuell/nachrichten.html">XXXXXXXXXXXXXX</a></dd>
	<dd><a href="Aktuell/nachrichten.html">XXXXXXXXXXXXXX</a></dd>
	<dd class="zwischenueberschrift">Erweiterungen</dd>
	<dd><a href="Aktuell/nachrichten.html">XXXXXXXXXXXXXX</a></dd>
	<dd><a href="Aktuell/nachrichten.html">XXXXXXXXXXXXXX</a></dd>
	<dd><a href="Aktuell/nachrichten.html">XXXXXXXXXXXXXX</a></dd>
	<dd><a href="Aktuell/nachrichten.html">XXXXXXXXXXXXXX</a></dd>
	<dd class="zwischenueberschrift">Anwendungen</dd>
	<dd><a href="Aktuell/nachrichten.html">FastTrack - Revenue</a></dd>
	<dd><a href="Aktuell/nachrichten.html">FastTrack - Quality</a></dd>
	<dd><a href="Aktuell/nachrichten.html">OrderTracking</a></dd>
	</dl>
	<!--[if lte IE 6]></td></tr></table></a><![endif]-->
	</li>
	
	<li>
	<!--[if lte IE 6]><a href="#nogo"><table cellspacing="0" cellpadding="0"><tr><td><![endif]-->
	<dl class="gallery">
	<dt class="first"><a href="Spezialthemen/index.html">Spezialthemen</a></dt>
	<dd><a href="Aktuell/nachrichten.html">XXXXXXXXXXXXXX</a></dd>
	<dd><a href="Aktuell/nachrichten.html">XXXXXXXXXXXXXX</a></dd>
	<dd><a href="Aktuell/nachrichten.html">Reach</a></dd>
	<dd><a href="Aktuell/nachrichten.html">XXXXXXXXXXXXXX</a></dd>
	<dd><a href="Aktuell/nachrichten.html">Validierung</a></dd>
	</dl>
	<!--[if lte IE 6]></td></tr></table></a><![endif]-->
	</li>
	
	<li>
	<!--[if lte IE 6]><a href="#nogo"><table cellspacing="0" cellpadding="0"><tr><td><![endif]-->
	<dl class="gallery">
	<dt class="first"><a href="Partner/index.html">Partner</a></dt>
	<dd><a href="Aktuell/nachrichten.html">XXXXXXXXXXXXXX</a></dd>
	<dd><a href="Aktuell/nachrichten.html">XXXXXXXXXXXXXX</a></dd>
	<dd><a href="Aktuell/nachrichten.html">XXXXXXXXXXXXXX</a></dd>
	<dd><a href="Aktuell/nachrichten.html">XXXXXXXXXXXXXX</a></dd>
	<dd><a href="Aktuell/nachrichten.html">XXXXXXXXXXXXXX</a></dd>
	<dd><a href="Aktuell/nachrichten.html">XXXXXXXXXXXXXX</a></dd>
	<dd><a href="Aktuell/nachrichten.html">XXXXXXXXXXXXXX</a></dd>
	<dd><a href="Aktuell/nachrichten.html">XXXXXXXXXXXXXX</a></dd>
	<dd><a href="Aktuell/nachrichten.html">XXXXXXXXXXXXXX</a></dd>
	<dd><a href="Aktuell/nachrichten.html">XXXXXXXXXXXXXX</a></dd>
	</dl>
	<!--[if lte IE 6]></td></tr></table></a><![endif]-->
	</li>
</ul>
</div>

<div id="right">&nbsp;</div>

<div id="content">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In malesuada porta urna. Etiam lacinia, tortor sed placerat venenatis, ipsum purus egestas augue, ut vehicula diam elit in sapien. Aenean posuere interdum arcu. Nullam molestie molestie sapien. Praesent vitae leo. Integer tellus. Praesent mollis sem ultrices risus aliquam tristique. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum ultrices leo sit amet justo. Vestibulum enim purus, lobortis vitae, dapibus vel, lobortis ac, dui. Nam nisi. Fusce cursus tincidunt diam. Donec ac risus ac lacus rhoncus dignissim. Vestibulum velit. Etiam tempus aliquet magna. Sed elementum. 

Pellentesque fringilla massa at ligula. Etiam viverra, felis vel auctor facilisis, odio eros consectetuer ligula, in aliquam augue ligula eget enim. Ut ut nibh non massa fermentum euismod. Nam facilisis. Ut a velit non augue ultricies aliquet. In nunc nisl, feugiat sit amet, pellentesque sit amet, pretium quis, orci. Pellentesque vulputate, est ac vulputate porta, tellus orci accumsan magna, ac tristique est eros sed nisi. Cras consectetuer. Suspendisse potenti. Donec vulputate ultricies justo. Vivamus congue mi. 

Fusce nisl. Quisque pretium ultricies magna. Phasellus sed diam. Nunc lacus nibh, lobortis vitae, condimentum at, lacinia id, diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse potenti. Vivamus lectus risus, hendrerit ac, consequat vel, placerat dignissim, turpis. Aenean consequat elit eu dolor. In sodales, sem vel rutrum pellentesque, dolor nisi imperdiet mauris, eget blandit tellus quam quis nisi. Donec justo augue, pulvinar accumsan, tempus sed, semper quis, ipsum. In hac habitasse platea dictumst. Duis nonummy felis et nisi. Nunc consequat mi vitae leo. Quisque at mauris vel odio posuere sollicitudin. 

Pellentesque tincidunt ipsum quis nulla. Quisque ornare mi sit amet urna. Nullam posuere urna sed magna. Duis pulvinar odio non magna. 

</div>       

<div id="footer">Footer</div>
 
</body>
</html>

Vorschläge, Tips, Hinweise sind herzlich willkommen!

VIELEN DANK schon mal!!

fricca · #2 (**permalink**) 12.11.2007, 10:21

*entfernt* Die Lösung wurde bereits an mehreren anderen Orten genannt.

Was genau hast du daran nicht verstanden?

overflow:hidden für html und body? Bravo! So macht man eine Seite unbenutzbar.

KleinerEisbaer · #3 (**permalink**) 12.11.2007, 13:02

Zitat:

Zitat von fricca

*entfernt* Die Lösung wurde bereits an mehreren anderen Orten genannt.

Aber wo denn?

Zitat:

Was genau hast du daran nicht verstanden?

Wo Du mich da hinverlinkt hast, steht auf jeden Fall KEINE Antwort!

Zitat:

overflow:hidden für html und body? Bravo! So macht man eine Seite unbenutzbar.

Entschuldige, aber warum so aggressiv? Ich bin doch nur ein Forummitglied auf der Suche nach einer Antwort.

Zu Deinem Multiposting-Vorwurf: ich werde dem gleich mal nachgehen und noch mal schauen. Ich habe zumindest nicht mit Absicht unterschiedliche Foren benutzt!

Trotzdem schönen Gruß !

fricca · #4 (**permalink**) 12.11.2007, 13:14

Zitat:

Zitat von KleinerEisbaer

Aber wo denn?

In mindestens zwei anderen Foren, in denen du deine Frage auch gepostet hast.

Zitat:

Entschuldige, aber warum so aggressiv?

Weil dein wiederholtes Multiposting trotz Hinweis auf Lernresistenz und Ignoranz schließen lässt.
Dass es "nicht absichtlich" war, kannst du nach dem Hinweis nicht mehr ernsthaft behaupten wollen.

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
CSS Dropdown Menü: Hover-Effekt auch wenn Maus im Untermenü ist	Sp33dy G0nz4l3s	CSS	2	12.06.2010 17:38
Darstellungsproblem	flohpapa	CSS	3	16.12.2009 08:55
DropDown Menü verschwindet	andre-ne	CSS	2	18.11.2009 10:44
dropdown menü einbauen	PatrickM	CSS	6	07.01.2008 16:13
Mysteriöses in CSS Dropdown Menü	ph!L	CSS	3	21.07.2006 12:31