Menu Chrome en Safari fix

Status
Niet open voor verdere reacties.
S

slabbetje

Gebruiker
Lid geworden
5 mei 2007
Berichten
290
Beste helpers,

Ik ben voor een klant bezig met een website er zit alleen nog een kleine bug in het menu waar ik gewoon maar niet uitkom...
Ik heb een menu met hieronder een flashbanner alleen in chrome & safari word het sub menu uitgelijnt aan het hoofditem
dit is bij dit menu niet de bedoeling maar moet over de copmlete breedte van mijn div gaan.
met andere woorden het vak schuift er half naast :)

Code: 
/*********************************************************************************************
						RESIZE
*********************************************************************************************/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}
:focus {
	outline: 0;
}
body {
	line-height: 1;
	color: black;
	background: white;
	overflow-x:		hidden;
}
ol, ul {
	list-style: none;
}
table {
	border-collapse: separate;
	border-spacing: 0;
}
caption, th, td {
	text-align: left;
	font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: "";
}
blockquote, q {
	quotes: "" "";
}

a {
	text-decoration:			none;
}

/*********************************************************************************************
						BASICS
*********************************************************************************************/
html, body {
	height: 						100%;
}

body {
	font-family: 					"Trebuchet MS", "Verdana", sans-serif;
	font-size: 						11px;
}

#wrapper {
	margin: 						0 auto -196px;
	min-height: 					100%;
	height: 						auto !important;
}

#push {
	height: 						180px;
}

#footer {
	background:						#000000 url('zwartebalk_mid.png') top left repeat-x;
	bottom: 						0;
	clear: 							both;
	color:							#FFFFFF;
	font-size: 						11px;
	height: 						180px;
	margin-top: 					16px;
	width: 							100%;
}

.clear
{
	clear:							both;
}

/*********************************************************************************************
						TYPOGRAFIE
*********************************************************************************************/
h1
{
	color:							#3f3f3f;
	font-size:						14pt;
	height:							34px;
	border-bottom:					1px #bbbbbb solid;
}

h1.twitter
{
	background:						url('twitter.png') no-repeat top right;
	margin-bottom:					5px;
}

h1.title
{
	color:							#6a6a6a;
	font-size:						20pt;
	height:							52px;
	background:						url('nieuws_schaduw.png') no-repeat 0px 44px;
	border:							0px;
}

p {
	margin-top:						14px;
	margin-bottom:					14px;
}

a {
	color:							#74b11a;
	font-weight:					bold;
}

.gray, .gray a {
	color:							#b5b5b5;
}

.gray_padding, .gray_padding a {
	position:						relative;
	color:							#b5b5b5;
	top:							2px;
}

.green_right {
	float:							right;
	color:							#74b11a;
	font-weight:					bold;
	padding-top:					10px;
}

/*********************************************************************************************
						HEADER
*********************************************************************************************/

#header 
{
	position:						relative;
	min-height:						100px;
	width:							100%;
	border-bottom:					1px #d4d4d4 solid;
	background:						#f4f4f4 url('header_mid.png') repeat-x;	
}

#header_left
{
	position:						absolute;
	float:							left;
	width:							110px;
	min-height:						100px;
	background:						red url('header_left.png');
}

#header_right
{
	position:						absolute;
	float:							right;
	right:							0px;
	width:							110px;
	min-height:						100px;
	background:						red url('header_right.png');
}

#header_center
{
	position:						relative;
	float:							left;
	min-width:						960px;
	width:							960px;
	left:							50%;
	margin-left:					-480px;
}

#logo
{
	position:						relative;
	display:						block;
	float:							left;
	width:							142px;
	height:							62px;
	margin-top:						25px;
	z-index:						2;
}

/*********************************************************************************************
						HEADER
*********************************************************************************************/
#logo
{
	position:						relative;
	z-index:						1;
}

#menu
{
	position:						relative;
	margin-top:						75px;
	min-height:						30px;
	z-index:						2;
}

#menu ul, #menu li
{
	margin:							0;
	padding:						0;
}

#menu ul li
{
	position:						relative;
	display:						inline;
	margin:							5px;
	margin-left:					30px;
	padding:						5px;
	z-index:						5px;
	border:							1px transparent solid;
	color:							#818181;
}

#menu ul li a {
	color:							#818181;
}

#menu ul li:hover, #menu ul li.selected
{
	background:						url('menu_center.png') top left;
	border:							1px #ace536 solid;
	-moz-border-radius: 			5px;
	-webkit-border-radius: 			5px;
	border-radius:					5px;
}

#menu ul li:hover, #menu ul li.selected, #menu ul li a:hover
{
	color:							white;
}

#menu ul li ul
{
	position:						absolute;
	width:							960px;
	padding-top:					20px;
	z-index:						300;
}

#menu ul li ul li
{
	display:						list-item;
	position:						relative;
	border-top:						0px;
	border-bottom:					0px #d4d4d4 solid;
	border-left:					0px #d4d4d4 solid;
	border-right:					0px #d4d4d4 solid;
	padding:						0;
	margin:							0;
	background:						#f4f4f4;
	z-index:						1;
}
#menu ul li ul li a
{
	color:							#818181;
}

#menu ul li ul li:hover
{
	border-top:						0px;
	border-bottom:					0px #d4d4d4 solid;
	border-left:					0px #d4d4d4 solid;
	border-right:					0px #d4d4d4 solid;
	background:						#f4f4f4;
	-moz-border-radius: 			0px;
	-webkit-border-radius: 			0px;
	border-radius:					0px;	
}

.menutext
{
	padding-left:					180px;
	padding-right:					180px;
	padding-top:					15px;
	padding-bottom:					15px;
	color:							#b5b5b5;
}
/*********************************************************************************************
						BANNER ROTATOR
*********************************************************************************************/
#banner {
	width:							100%;
	height:							294px;
	background:						url('groene_gradient.png') top center no-repeat;
	z-index:						1;
}

#cu3er-container {
	position:						absolute;
	min-width:						960px;
	width:							960px;
	left:							50%;
	margin-left:					-480px;
	outline:						0;
}

/*********************************************************************************************
						AANMELDEN BALK
*********************************************************************************************/
#aanmelden {
	position:						relative;
	min-width:						960px;
	width:							960px;
	left:							50%;
	margin-left:					-480px;
	height:							84px;
	background:						url('zwartebalk_boven.png') repeat-x;
}

#aanmelden_left {
	position:						relative;
	float:							left;
	min-width:						15px;
	height:							51px;
	top:							15px;
	left:							27px;
	color:							white;
	text-transform:					uppercase;
	font-size:						16pt;
	line-height:					51px;
}

#aanmelden_right {
	position:						relative;
	float:							right;
	top:							15px;
	right:							27px;
	width:							188px;
	height:							51px;
	color:							#1a0404;
	background:						url('aanmelden.png') no-repeat;
}

.aanmeld_text a {
	color:							#1a0404;
}

.aanmeld_text {
	position:						relative;
	text-transform:					uppercase;
	font-size:						14pt;
	margin-left:					14px;
	top:							17px;
}

/*********************************************************************************************
						UW BEVIND ZICH HIER LINKS
*********************************************************************************************/
#navigator {
	position:						relative;
	width:							960px;
	height:							30px;
	left:							50%;
	margin-left:					-480px;	
	
	/**background:						red;/**/
}

.navigator_text_left {
	float:							left;
	padding-top:					10px;
	padding-left:					27px;
	color:							#74b11a;
	font-weight:					bold;
}

.navigator_text_right {
	float:							right;
	padding-top:					10px;
	padding-right:					27px;
	padding-left:					27px;
	color:							#74b11a;
	font-weight:					bold;
	text-align:						right;
	text-transform:					uppercase;
}

.navigator_text_inloggen {
	background:						url('login.png') no-repeat 0px 2px;
	padding-left:					15px;
}

/*********************************************************************************************
						CONTAINER
*********************************************************************************************/
#container {
	position:						relative;
	min-width:						960px;
	width:							960px;
	left:							50%;
	margin-left:					-480px;
	background:						url('grijsvlak_mid.png') repeat-y;
}

#container_top {
	position:						relative;
	margin-bottom:					-63px;
}

#container_center {
	position:						relative;
	padding-left:					27px;
	padding-right:					27px;
	padding-bottom:					15px;
}

#container_bottom {
	position:						relative;
	margin-bottom:					30px;
}

/*********************************************************************************************
						INDELING PAGINAS
*********************************************************************************************/
#content {
	float:							left;
	width:							565px;
	min-height:						60px;
	
	/**background:						red;/**/
}

#sidebar {
	float:							right;
	width:							265px;
	min-height:						60px;
	
	/**background:						red;/**/
}

/*********************************************************************************************
						MEDEDELINGEN
*********************************************************************************************/

.mededelingItem {
	width:							100%;
	margin-top:						20px;
	border-bottom:					1px #cecece solid;
	font-size:						10pt;
	text-align:						justify;
	color:							#616161;
}

.mededelingItem h3
{
	color:							#76b911;
	font-size:						12pt;
}

.mededelingItem small
{
	font-size:						7pt;
	color:							#a4a4a4;
}

.mededelingData
{
	text-align:						right;
	padding-right:					15px;
	margin-bottom:					5px;
}

.mededelingBronnen
{
	text-align:						left;
	padding-left:					0px;
	font-size:						7pt;
}

.mededelingBronnen hr
{
	border:							0px;
	height:							1px;
	background:						#cecece;
}

.imgloader
{
	float:					left;
	background:				#FFFFFF url('loader.gif') no-repeat 50% 50% !important; 
	min-width:				245px;
	min-height:				150px;
	display:				block;
	margin-bottom:			8px; 
	margin-right:			18px;
}

/*********************************************************************************************
						QUOTE
*********************************************************************************************/

.quote {
	position:						relative;
	min-width:						265px;
	min-height:						164px;
	width:							265px;
	height:							164px;
	background:						url('quote_van_de_dag_1.png') no-repeat;
	margin-top:						25px;
	margin-bottom:					25px;
}

.quote h2 {
	position:						relative;
	color:							white;
	font-size:						16pt;
	padding-left:					42px;
	padding-top:					10px;
}

.quote .quote_text {
	padding-top:					15px;
	padding-left:					15px;
	padding-right:					15px;
	height:							70px;
	color:							white;
	font-size:						9pt;
	/**background:						red;/**/
}

.quote .quote_auth {
	padding-top:					0px;
	padding-left:					15px;
	height:							20px;
	color:							#3e5f0c;
	font-weight:					bold;
	/**background:						white;/**/
}

.quote .quote_link {
	background:						url('quote_van_de_dag_2.png') no-repeat 98% 0;
	height:							22px;
	padding-top:					10px;
	font-size:						8pt;
}

.quote .quote_link a {
	color:							#737373;
	text-decoration:				underline;
}

#footer_container {
	position:						relative;
	min-width:						960px;
	width:							960px;
	left:							50%;
	margin-left:					-480px;
	padding-left:					27px;
	padding-right:					27px;
	top:							20px;
	bottom:							20px;
	font-size:						8pt;
}

#footer_container th {
	font-size:						12pt;
	padding-bottom:					10px;
}

#footer_container td {
	font-size:						10pt;
}

#footer_container table {
	margin-bottom:					27px;
}


/*********************************************************************************************
						CONTACT FORM
*********************************************************************************************/

@charset "utf-8";
fieldset {    
float: left;    
clear: left;    
width: 100%;    
margin: 0 0 1.5em 0;    
padding: 0;  
border:0; 
}  
legend {   
margin-left: 1em;   
color: #000000;   
font-weight: bold;  
}  
fieldset ol {   
padding: 1em 1em 0 1em;   
list-style: none;  
}  
fieldset li {    
float: left;    
clear: left;    
width: 100%;    
padding-bottom: 1em;   
}  
.submit {    
float: left;    
width: auto;    
border: 0 none #FFF;    
padding-left: 5em;   
}
label {    
display: block;
float: left;    
width: 11em;    
margin-right: 2em;    
text-align: right;
font-family:"Trebuchet MS"; 
font-size:13px;
color:#666666 ;
vertical-align:middle;
}
input.required {
	background-image:url(invulbalk.png);
	background-repeat:no-repeat;
	width:339px;
	border:none;
	font-family:"Trebuchet MS"; 
	font-size:13px;
	color:#666666;
	display: inline-block;
}
input.required email{
	background-image:url(invulbalk.png);
	background-repeat:no-repeat;
	width:339px;
	border:none;
	font-family:"Trebuchet MS"; 
	font-size:13px;
	color:#666666;
	display: inline-block;	
}
input.text {
	background-image:url(invulbalk.png);
	background-repeat:no-repeat;
	width:339px;
	border:none;
	font-family:"Trebuchet MS"; 
	font-size:13px;
	color:#666666;
	display: inline-block;
}
textarea {
	background-image:url(Bericht_textvak.png);
	background-repeat:no-repeat;
	width:339px;
	height:175px;
	border:none;
	font-family:"Trebuchet MS"; 
	font-size:13px;
	color:#666666 ;
	
}
select {
	background-image:url(invulbalk.png);
	background-repeat:no-repeat;
	width:339px;
	border:none;
	font-family:"Trebuchet MS"; 
	font-size:13px;
	color:#666666 ;
}
input.checkbox{
	background-image:url(invulbalk.png);
	background-repeat:no-repeat;
	border:none;
	font-family:"Trebuchet MS"; 
	font-size:13px;
	color:#666666;
	display: inline-block;
}
.check {
	font-size:8px;
	color:#666666;
    word-spacing: normal;
}

PHP: 
<body>
<!--
	WRAP CONTAINER
	Deze DIV zorgt ervoor dat de footer sticky blijft...
-->
	<div id="wrapper">
		<!----------------- HEADER ----------------->
		<div id="header">
			<div id="header_left"></div>
			<div id="header_center">
				<div id="logo"> <img src="<?php echo $Preset?>Content/Template/logo.png" alt="In2Health" /> </div>
				<div id="menu">				
					<ul>
						<li><a href="<?php echo FULL_PATH.URL_BASE;?>">Home</a>
						</li>
						
						<li><a href="<?php echo FULL_PATH.URL_BASE;?>/Artikelen">Artikelen</a>
							<ul>
								<li><div class="menutext">
									<b><a href="<?php echo FULL_PATH.URL_BASE;?>/Artikelen/Andere invalshoeken">Andere invalshoeken</a></b><br/>
									<br/>
									<b><a href="<?php echo FULL_PATH.URL_BASE;?>/Artikelen/Sport">Sport</a></b><br/>
									<br/>
									<b><a href="<?php echo FULL_PATH.URL_BASE;?>/Artikelen/Vitaminen en Mineralen">Vitaminen en Mineralen</a></b><br/>
									<br/>
									<b><a href="<?php echo FULL_PATH.URL_BASE;?>/Artikelen/Hoe werkt voeding">Hoe werkt voeding</a></b><br/>
								</div></li>
							</ul>
						</li>
						
						<!--<li><a href="*/forum/index.php">Forum</a>
						</li>-->
						
						<!--<li>Recepten
						</li>
						
						<li>Voedingsmeter
						</li>-->
						
						<li><a href="<?php echo FULL_PATH.URL_BASE;?>/Nieuwsbrief/Index">Nieuwsbrief</a>
							<!--<ul>
								<li><div class="menutext">
									<a href="<?php echo FULL_PATH.URL_BASE;?>/Contact/Redactie">Redactie</a><br/>
									<a href="<?php echo FULL_PATH.URL_BASE;?>/Contact/Adverteren">Adverteren</a><br/>
									<a href="<?php echo FULL_PATH.URL_BASE;?>/Contact/Reageren">Reageren</a><br/>
									<a href="<?php echo FULL_PATH.URL_BASE;?>/Contact/Index">Registratie</a><br/>						
								</div></li>
							</ul>-->
						</li>
					</ul>				
				</div>
			</div>
			<div id="header_right"></div>
			<div class="clear"></div>
		</div>
		<!----------------- BANNER ROTATOR ----------------->
		<div id="banner">
			<div id="cu3er-container">
				<a href="http://www.adobe.com/go/getflashplayer">
					<img src="http://www.adobe.com/Content/Template/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />
				</a>
			</div>	
		</div>		
		<!----------------- AANMELDEN BALK ----------------->
		<div id="aanmelden">
		
			<div id="aanmelden_left">
				Bezig met gezondheid, Altijd op de hoogte blijven?
			</div>
			
			<div id="aanmelden_right">
				<span class="aanmeld_text"><a href="<?php echo FULL_PATH.URL_BASE;?>/Nieuwsbrief/Index">meld je hier aan</a></span>
			</div>		
			<div class="clear"></div>
		</div>
		
		<!----------------- UW BEVIND ZICH HIER ----------------->
		<div id="navigator">
			<div class="navigator_text_left">
				<?php echo $Bevind;?>
			</div>
			
			<div class="navigator_text_right">
				<!--<span class="navigator_text_inloggen"><a href="">Aanmelden/Inloggen</a></span>-->
			</div>
			<div class="clear"></div>			
		</div>
		
		<!----------------- CONTAINER ----------------->
		<div id="container">
			<div id="container_top"><img src="<?php echo $Preset?>Content/Template/grijsvlak_boven.png" alt="" /></div>
			<div id="container_center">	 
					<!----------------- CONTENT ----------------->					
					<?php
						$request = $Site-> Url-> request();
						$get = $Site->Url->get();
						
						if ( is_dir('Pages/'.$request."/") )
						{
							if ( isset($get) && $get)
							{
								if (@file_exists('Pages/'.$request.'/'.$get.'.php'))
								{
									include 'Pages/'.$request.'/'.$get.'.php';
								} else {
									include 'Pages/404.php';
								}
							} else {
								if (@file_exists('Pages/'.$request.'/Index.php'))
								{
									include 'Pages/'.$request.'/Index.php';
								} else {
									include 'Pages/404.php';
								}
							}					
						} else if ( !is_dir('Pages/'.$request."/") && file_exists('Pages/'.$request.'.php') ) 
						{
							include 'Pages/'.$request.'.php';
						} else {
							include 'Pages/404.php';
						}
					?>
				
					<div class="clear"></div>
			</div>
			<div id="container_bottom"><img src="<?php echo $Preset?>Content/Template/grijsvlak_onder.png" alt="" /></div>
		</div>		
		<!-- 
			WRAPPER PUSHEN
			Deze div is nodig om de overige ruimte te pushen voor de scollbar etc.
		-->
		<div id="push"></div>
	</div>
<!--
	FOOTER
	Deze Div word dor de wrapper sticky aan de onderkant van het scherm
-->	
	<div id="footer">
		<div id="footer_container">

			<!--<table width="100%">
				<tr>
					<th>Contact</th>
					<th>Recepten</th>
					<th>Forum</th>
					<th>Links</th>
				</tr>
				<tr>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
				<tr/>
				<tr>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
				<tr/>
				<tr>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
				<tr/>
				<tr>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
				<tr/>
				<tr>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
				<tr/>
			</table>-->
			Copyright in2health.nl 2010, All rights reserved
		</div>
	</div>
</body>

Zou iemand even naar mijn css kunnen kijken en wat ik eventueel fout doe??
 
Laatst bewerkt:
De volledige css aub. De oorzaak van het probleem kan elders te vinden zijn in plaats van in het menu.
En liefst nog een online voorbeeld.
Mvg
Defietser
 
Aub het hele css bestand :)...

edit Ben er ook net achter dat IE7 ook problemen heeft met de banner dat het menu onder de banner komt...
 
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan