nav menu css op iphone en ipad aligned niet, in IE en safari prima

[oompie8874]

Hallo, is er iemand die mij kan helpen met iets waar ik mn kop over breek

De site is al live echter wanneer de site wordt geopend via een iphone of ipad browser plakt hij de contact button onder de navigatie bar.
Is hier een snelle fix voor? Ik zie het niet meer en ik erger me er aan dat ik dit niet kan oplossen

Alvast hartelijk dank voor diegene die mij het licht laat zien

css:

@charset "UTF-8";
/* CSS Inside Disign*/
		#main {
	margin: auto;
	width: 1003px;
	height: 800px;
	top: 30px;
	}
		#header {
	position: absolute;
	width: 100%;
	height: 100px;
	line-height:15px;
	position:relative;
	z-index:10;
	}
		#links {
	float: left;
	width: 307px;
	height: 500px;
	padding-top: 0px;
	} 
		#rechts {
	float: left;
	width: 696px;
	height: 500px;
	padding-top: 0px;
	}
		#text layer {
  	opacity: .4;
  	filter: alpha(opacity=40);
	}
		#text {
	font-size: 11px;
	color: #000;
	opacity: 1;
	filter: alpha(opacity=100);
	}		
	#text_nieuws {
	font-size: 11px;
	color: #000;
	opacity: 1;
	filter: alpha(opacity=100);
	width:500px;
	}
		#text layer {
    opacity: .15;
	filter: alpha(opacity=15);
	}
		#text layer nieuws{
    opacity: .15;
	filter: alpha(opacity=15);
	}
		#footer {
	float: left;
	width: 1003px;
	height: 20px;
	text-align: right;
	}
		body, div, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, img, form, fieldset, input, textarea, blockquote {
	margin: 0;
	padding: 0;
	border: 0;
	}
		body {
	font-family: Arial;
	font-size: 11.7px;
	line-height: 50px;
	}
		nav {
	margin: 100px auto; 
	text-align: center;
	}
		nav ul ul {
	display: none;
	}
		nav ul li:hover > ul {
	display: block;
	float:center;
	}
		nav ul {
	background: #bebec2;
	list-style: none;
	position: relative;
	}
	nav ul:after {
	content: "";
	clear: both;
	display: block;
	}
		nav ul li {
	float: left;
	box-sizing: inherit;
	}
		nav ul li:hover a {
	color: #eb9c33;
	}	
		nav ul li a {
	display: block; 
	padding: 35px 40px;
	color: #fff; 
	text-decoration: none;
	
	}	
		nav ul ul {
	position: absolute; top: 100%;
	color: #000;
	}
		nav ul ul li {
	float: none;	
	position: static;
	font-family: Arial;
	font-size: 10px;
	line-height: 18px;
	margin-top: -18px;
	z-index: 3;
	background: #5f5f6a;
	}
		nav ul ul li a {
	padding: 10px 10px;
	color: #5f5f6a;
	}	
		nav ul ul li a:hover {
	float: center;	
	color: #fff;
	}
		
	nav ul ul ul {
	border: solid 1;margin-top:5px; position: absolute; left: 100%; top:0;color: #fff;
	}

 

[lord4163]

Probeer je header eens wat kleiner te maken, bijvoorbeeld 800px.

 

[oompie8874]

De menu balk hoort precies even breed te zijn als de pagina.. Wanneer ik hem 800px maak dan loopt het niet meer gelijk?

 

[lord4163]

Nee de header is nu 1003px zie #main. Als je die verkleint en de padding in nav ul li a van 40 naar bijvoorbeeld 30 zet.

 

[oompie8874]

Onwijs bedankt! ik heb de padding naar 30 gezet en inderdaad ruimte genoeg Nogmaals hartelijk dank!