Joni: div grösse wird automatisch geändert!

Hallo zusammen

Habe gerade die Navigation meiner neuen Webseite gebastelt. Dazu hatte ich im CSS File unter "body", ausversehen "overflow: hidden" stehen gehabt. Nun, beim füllen der Webseite stellte ich es auf "overflow:visible", damit ich auch scrollen kann und den inhalt sehen kann. Vorher hat alles schön funktioniert aber nun wird die Navigation, beim darüberfahren mit der Maus, leicht nach Links bzw. rechts verschoben.
Das Problem wird gelöst, wenn man "overflow:" auf "auto" stellt. Die Nebenwirkungen sind allerdings dann, dass die breite der Fusszeile nicht mehr mit dem Wrapper übereinstimmt.
Am besten ihr stellt dies kurz nach...

Keine Ahnung wie ich dieses Problem lösen könnte...
Ihr vieleicht? Wäre super!

Gruss
Joni

ps: Hier das ganze HTML & CSS zum Nachbauen...

  
<!DOCTYPE html>  
<html>  
<head>  
  
<title>Portfolio</title>  
  
</head>  
  
<body>  
	<!-- Auf jeder Seite -->  
	<div id="navigation">  
		<a href="de/index.htm"><img id="logo" src="" alt="Logo"/></a>  
		<a class="navigation" href="" style="margin-left: 20%">startseite</a>  
		<span class="navigation">&raquo; portfolio</span>  
		<a class="navigation" href="">über mich</a>  
		<a class="navigation" href="">kontakt</a>  
	</div>	  
	<div id="language">  
		<span class="language" style="line-height: 35px;">DE</span><br>  
		<a class="language" href="">EN</a><br>  
		<a class="language" href="">FR</a>  
	</div>  
	  
	<!-- Seitenspezifischer Inhalt -->  
	<div id="wrapper">  
		<div style="width: 49%;  position: relative; float: left; background-color: #ddd; height: 1500px; margin-top: 2%"></div>  
		<div style="width: 49%;  position: relative; float: right; background-color: #ddd; height: 1500px; margin-top: 2%"></div>  
		  
	</div>  
	  
	<!-- Auf jeder Seite -->  
	<a class="feedback" href="">feedback</a>  
	<div id="footer">  
		<span class="footer">&copy; 2013 FIRMENNAME&nbsp;&nbsp;&nbsp;-&nbsp;&nbsp;&nbsp; Alle Rechte vorbehalten.</span>  
		<a class="footer" href="">Impressum</a>  
		<a class="footer" href="">AGB</a>  
		<a class="footer" href="">FAQ</a>  
	</div>  
</body>  
</html>  

  
/* Allgemeines */  
  
*{margin: 0px; padding: 0px; border: 0px;}  
  
html, body		{  
				width: 100%;  
				height: 100%;  
				overflow: visible;  
				}  
  
body			{  
				background-color: #f5f5f5;  
				font-family: calibri; font-weight: lighter;  
				}  
				  
				  
				  
/* ALLGEMEINE MOUSE-OVER EFFEKTE */				  
div#navigation, div#language, a.feedback, div#footer {  
				opacity: 0.65;	  
				font-family: dicotlight;  
				background-color: black;  
				position: fixed;  
				z-index: 2;  
				  
				transition: all 0.3s;  
				-ms-transition: all 0.3s;  
				-moz-transition: all 0.3s;  
				-webkit-transition: all 0.3s;  
				-o-transition: all 0.3s;  
				}		  
div#navigation:hover, div#language:hover, a.feedback:hover, div#footer:hover {  
				opacity: 0.8;  
				}	  
	  
  
	  
a.navigation, span.navigation, a.feedback, a.language, span.language, a.footer, span.footer{  
				color: white;  
				}				  
a.navigation:hover, a.feedback:hover, a.language:hover, a.footer:hover{  
				color: orange;  
				}  
				  
				  
				  
/*---  HEADER MIT NAVIGATION UND LOGO ---*/		  
div#navigation	{  
				width: 70%;  
				max-width: 1800px;  
				height: 40px;  
				left: 15%;  
				margin-top: 0px; top: -5px;  
				border-bottom-left-radius: 3px;  
				border-bottom-right-radius: 3px;  
				}  
				  
div#navigation:hover	{  
				top: 0px;  
				}				  
  
a.navigation, span.navigation	{  
				width: 10%;  
				height: 100%;		  
				position: relative;  
				margin-left: 3%;  
				float: left;  
				font-size: 20px;  
				text-decoration: none;  
				text-align: center;  
				vertical-align: middle;  
				line-height: 45px;  
				background-color: transparent;  
				}	  
				  
a.navigation	{  
				transition: margin 0.3s;  
				-ms-transition: margin 0.3s;  
				-moz-transition: margin 0.3s;  
				-webkit-transition: margin 0.3s;  
				-o-transition: margin 0.3s;  
				}	  
				  
a.navigation:hover	  
				{  
				margin-top: -5px;  
				}	  
				  
span.navigation		  
				{  
				border-left: 1px dashed #222;  
				border-right: 1px dashed #222;  
				color: orange;  
				}  
												  
img#logo			{  
				width: 180px;  
				position: relative;  
				margin-left: 5%;  
				float: left;  
				z-index: 3;  
				overflow: hidden;  
				box-shadow: 0px -1px 5px #1a1a1a;  
				border-bottom-left-radius: 3px;  
				border-bottom-right-radius: 3px;  
				}	  
				  
				  
				  
/*---  WRAPPER (INHALT) ---*/					  
div#wrapper		{  
				width: 63.5%;  
				max-width: 1500px;  
				margin-left: 18.5%;  
				margin-top: 85px;  
				background-color: transparent;  
				}  
				  
				  
/*---  SPRACHE VERSTELLEN SCHALTFLÄCHE ---*/						  
div#language		{  
				width: 35px;  
				height: 35px;  
				float: right;  
				top: 0px;  
				right: 0px;  
				overflow: hidden;  
				text-align: center;  
				border-bottom-left-radius: 5px;  
				}	  
				  
div#language:hover	{  
				height: 115px;  
				top: 0px;				  
				}  
				  
a.language, span.language		{  
				font-family: dicotlight;  
				vertical-align: middle;  
				font-size: 12px;  
				text-decoration: none;  
				}	  
  
  
				  
/*---  FEEDBACK SCHALTFLÄCHE ---*/				  
a.feedback	  
				{  
				width: 150px;  
				height: 40px;  
				float: right;	  
				top: 45%; right: -60px;  
				overflow: hidden;  
				text-align: center;	  
				text-decoration: none;  
				font-size: 20px;	  
				line-height: 35px;  
				border-top-left-radius: 3px;  
				border-top-right-radius: 3px;  
				  
				transform: rotate(-90deg);  
				-ms-transform: rotate(-90deg);  
				-moz-transform: rotate(-90deg);  
				-webkit-transform: rotate(-90deg);  
				-o-transform: rotate(-90deg);  
				}	  
  
				  
  
/*---  FOOTER MIT COPYRIGHT ---*/			  
div#footer	{  
				width: 63.5%;  
				max-width: 1500px;	  
				height: 35px;  
				margin-left: 18.5%;  
				bottom: -5px;  
				border-top-left-radius: 3px;  
				border-top-right-radius: 3px;  
				}  
				  
div#footer:hover	{  
				bottom: 0px;  
				}  
				  
a.footer, span.footer		{  
				margin: 5px; margin-left: 10px;  
				float: left;  
				text-decoration: none;  
				font-family: dicotlight;  
				font-size: 12px;  
				border-top-left-radius: 3px;  
				border-top-right-radius: 3px;  
				}  
				  
a.footer		{  
				margin-right: 15px;  
				float: right;  
				}  

  1. Om nah hoo pez nyeetz, Joni!

    Habe gerade die Navigation meiner neuen Webseite gebastelt.

    Am besten ihr stellt dies kurz nach...

    nö. Verlinke die Seite.

    Matthias

    --
    1/z ist kein Blatt Papier.

  2. Was man nicht alles macht für eine Antwort ;-)

    Kann dir zurzeit leider nur ein  HTML File anbieten:
    Download HERE
    --> Zum downloaden den kleinsten aller (scheiss mühsamen) Download-Links auswählen.

    Gruss Jonas

    1. Sorry, hab noch was vergessen:

      Das Problem taucht nur im Firefox auf.