Menu wijkt af in chrome

Status
Niet open voor verdere reacties.
Q

Qlubbie

Gebruiker
Lid geworden
24 okt 2007
Berichten
16
Hallo,

Ik heb nu een menu in een header div en in chrome zit het menu 1 px hoger dan in FF en IE (de rest heb ik nog niet getest)
ik heb geen ruimte om het online te zetten dus de 4 images staan hier:
edit verwijderd.
en de code:
CSS:

Code: 
.orange { 
	color:#fe5800;
}

body { 
	margin:0; 
	padding:0; 
	font-size:11px; 
	line-height:16px; 
	font-family: Verdana, Arial;
	background-color: #232323;
}

#container {
	margin: 0 auto;
}

#header { 
	background: url(images/header_bckg.gif) repeat-x; 
	height:121px;
}

	#logo { 
		width:780px; 
		margin:0 auto; 
		padding:50px 0 0 20px; 
	}

		#logo a{ 
			color:#FFFFFF; 
			text-decoration:none; 
			font-weight:bold; 
			height:12px; 
			font-size:20px; 
			/*text-transform:uppercase;*/
		}

	#menu {
		color:#fff; 
		text-align:center; 
		margin-top:23px;
		height:31px;
	}

		#menu ul { 
			width:780px; 
			margin:0 auto;
			list-style:none; 
			padding:0; 
			text-align:left;
		}

		#menu ul li {
			display:inline;
		}

		#menu ul a { 
			display:block; 
			float:left; 
			font-weight:bold; 
			font-size:13px; 
			text-decoration:none; 
			color:#fff; 
			background:url(images/menu_enactive.gif) no-repeat bottom center; 
			padding:8px 10px; 
			width:118px; 
			text-align:center; 
			text-transform:capitalize;
		}

			#menu ul a:hover { 
				background:url(images/menu_over.gif) no-repeat bottom center; 
				color:#fe5800;
			}

			#menu ul a.active { 
				background:url(images/menu_active.gif) no-repeat bottom center; 
				color:#fff;
			}

			#menu ul a.active:hover { 
				background:url(images/menu_active.gif) no-repeat bottom center; 
				color:#fff;
			}

/*FOOTER*/
#footer {
	background:url(images/footer_bckg.gif) repeat-x #3f3e3e 0 2px; 
	height:76px; 
	margin-top:20px; 
	clear:both;
}

#left_footer { 
	float:left; 
	padding:40px 0 0 30px; 
	color:#FFFFFF; 
	font-weight:bold; 
	font-size:11px;
	/*text-transform:uppercase;*/
}

#left_footer a { 
	color:#FFFFFF;
}

#left_footer a:hover { 
	text-decoration:none;
}

#right_footer { 
	float:right;  
	padding:40px 30px 0 0; 
	color:#FFFFFF; 
	font-weight:bold; 
	font-size:11px; 
	text-align:right;
	/*text-transform:uppercase; */
}

#right_footer a { 
	color:#FFFFFF;
}

#right_footer a:hover { 
	text-decoration:none;
}

HTML:
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
	<title></title>
	<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
	<div id="container">
		<div id="header">
			<div id="logo"><a href="#"><span class="orange">Oranje</span> Boven</a></div>
			<div id="menu">
				<ul>
				<li><a href="#" class="active">Link1</a></li>
				<li><a href="#">Link2</a></li>
				<li><a href="#">Link3</a></li>
				<li><a href="#">Link4</a></li>
				</ul>
			</div>
		</div>
	</div>
</body>
</html>

Kan iemand mij helpen om dit te corrigeren?
Ben trouwens ook nog niet tevreden over de logo div. die heeft nu een padding, want als ik het met margin probeer klopt er niets van :S
 
Laatst bewerkt:
is er iets niet duidelijk of zit ik gewoon met een lastig probleem? Ik heb er nog steeds geen oplossing voor gevonden in ieder geval...
groeten,
Qlubbie
 
Wat betreft de verschillende weergave in Chrome en in Firefox denk ik niet dat daar een speciale oplossing voor is, browsers gaan nou eenmaal niet allemaal hetzelfde om met CSS, je zult een beetje moeten experimenteren met margins e.d om het goed te krijgen. :thumb:
 
Om dit echt helemaal gelijk te krijgen bij elke browser is het verstandig om bij elk veld eerst de waarde's te resetten...
Zo krijg je ook nooit het gezeur dat een browser standaard marges,paddings gaat gebruiken je hoeft dan eigenlijk alleen maar op de border te letten hieronder een stukje code waar al heel veel word gereset ;) gewoon helemaal boven aan je css zetten

Code: 
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;
}
 
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan