Background werkt prima in IE en Firefox, niet in Chrome

Status
Niet open voor verdere reacties.
R

Ruud85

Nieuwe gebruiker
Lid geworden
3 apr 2012
Berichten
4
Beste forumleden,

Ik liep bij het ontwerpen van een site tegen het volgende aan: de achtergrond van mijn website laadt zeer vreemd, want in IE en Firefox wordt de background image gewoon goed weergegeven, maar in Chrome verschilt het eigenlijk per keer.. soms laadt Chrome de afbeelding voor de helft en soms iets verder, maar nooit helemaal. Wanneer je echter met de muis boven de Google + button hovert, herstelt de achtergrond zich en wordt deze helemaal weergegeven. Heel apart, denk ik.

Voor de duidelijkheid: mijn achtergrond bestaat uit een gif-bestand dat ik met repeat-y over de hele lengte trek. Je ziet duidelijk dat de linkse "lijn" wel wordt weergegeven, maar de rechtse niet.

Mijn HTML is valid, mijn css bestand voor de pagina zelf ook. Alleen bij de css voor het menu kom ik (afhankelijk van de instellingen van de validator op 1 (wanneer in geen specifieke css versie kies) of meerdere fouten (als ik de standaard 2.1 kies). Echter, hier ligt het probleem niet aan, want als ik de menu.css eruit haal, geeft hij nog steeds hetzelfde problem.

Ik kom er maar niet achter of de fout bij mij ligt of dat het aan Chrome ligt.


Voor een werkend voorbeeld: www.avaio.nl/test2/index.php
de css files:
www.avaio.nl/test2/style.css
www.avaio.nl/test2/menu.css

Kunnen jullie mij misschien helpen? Wellicht zien jullie in een oogopslag wat ik verkeerd doe, ik heb na uren proberen nog geen vooruitgang geboekt helaas. Hieronder (voor het gemak) mijn html en css:

index.php html

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>test</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<link href="style.css" rel="stylesheet" type="text/css" />
<link href="menu.css" rel="stylesheet" type="text/css" />
<!-- Start slider head -->
<style type="text/css">a#vlb{display:none}</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<!-- End slider head -->
</head>
<body>
<div class="container">
<div class="header">
	<div class="logo">Logo hier</div>
	<div class="menu">
			<div class="wrapper_menu menu_light_theme"><!-- BEGIN MENU WRAPPER -->
    <ul class="menu menu_lightblue"><!-- BEGIN MENU -->
       <li><a class="drop" href="index.php">Home</a></li>
        <li class="nodrop"><a href="#">Diensten</a></li>
        <li class="nodrop"><a href="#">Over Ons</a></li>
	<li class="nodrop right"><a href="#">Contact</a></li>
    </ul><!-- END MENU -->
</div><!-- END MENU WRAPPER -->
	</div>
	<div class="imageslide"></div>
</div>
<div class="middle">
	<div class="blocks">
		<div class="blockleft">
			<div class="inbl">
				<img src="img/banner.jpg" alt="" style="float:left;" />
				<div class="inbltext">slogan <img src="img/arrow.gif" alt="" /></div>
			</div>
		</div>
		<div class="blockright">
			<div class="incontent">
			<h3>Bedrijf</h3>
			<img src="img/dotted_line.gif" alt="" />
			<br /><br />
			Straat<br />
			Plaats<br />
			Telnr<br />
			Email<br />
			</div>
		</div>
	</div>
	<div class="content">
		<div class="contentleft">
			Content
		</div>
		<div class="contentright">
			<div class="incontent">
			<h3>Kop 2</h3>
			<img src="img/dotted_line.gif" alt="" />
			<br /><br />
			Tekst
			</div>
		</div>
		<div class="socialmedia">
			<a href="#" title=""><img src="img/twitter.png" width="20" alt="" /></a> <a href="#" title=""><img src="img/facebook.png" width="20" alt="" /></a> <a href="#" title=""><img src="img/linkedin.png" width="20" alt="" /></a>
			<!-- Plaats deze tag waar u de +1-knop wilt laten renderen. -->
			<g:plusone size="medium" annotation="none"></g:plusone>
			<!-- Plaats deze renderaanroep waar van toepassing. -->
			<script type="text/javascript">
			  window.___gcfg = {lang: 'nl'};
			
			  (function() {
			    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
			    po.src = 'https://apis.google.com/js/plusone.js';
			    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
			  })();
			</script>
		</div>
	</div>
</div>
<div class="footer">
&copy; 2012 | Alle rechten voorbehouden
<div class="footer-right"><a href="index.php" title="">Home</a> | <a href="#" title="algemene voorwaarden clientflow">Algemene Voorwaarden</a> | <a href="#" title="Sitemap">Sitemap</a></div>
</div>
</div>
</body>
</html>

style.css:
Code: 
html {
	padding:0;
	margin:0 auto;
	width:950px;
}
body {
	margin:0;
	padding:0;
	width:100%;
	font:normal 12px/1.8em Arial, Verdana, sans-serif;
	background: #f8f8f8 url(img/bodybackground.gif) repeat-y top left;
}

.container {
	width:930px;
	padding:0 25px 0 30px;
}

h1 {
	margin:0;
	padding:15px 0 0;
	color:#636363;
	font:bold 38px/1.2em Arial, Helvetica, sans-serif;
	letter-spacing:-2px;
	text-align:center;
}
h1 a, h1 a:hover {
	color:#636363;
	text-decoration:none;
}
h1 span {
	color:#d58c19;
}
h1 small {
	padding:0 10px;
	font:normal 12px/1.2em Arial, Helvetica, sans-serif;
	letter-spacing:normal;
}
h2 {
	font:normal 22px Arial, Helvetica, sans-serif;
	padding:6px 0 5px 0;
	margin:0;
	color:#595959;
}
h3 {
	display:block;
	font:bold 14px Arial, Helvetica, sans-serif;
	margin:0 0 3px 0;
	color:#e46f04;
}

/* top page styling */
.header { 
	height: 115px;
	padding-top:10px;
}
.logo {
	height: 65px;
}
.menu {
	height: 60px;
}
.imageslide {
	height: 0px;
}

/* middle page styling */
.middle {
	min-height: 500px;
}
.blocks {
	min-height: 180px;
	margin-bottom: 10px;
	overflow:hidden;
}
.blockleft {
	height: 180px;
	width: 712px;
	float: left;
	border: 1px solid #cbcbcb;
	padding: 3px;
}
.blockright {
	height: 180px;
	width: 190px;
	float: right;
	border: 1px solid #cbcbcb;
	margin-left:10px;
	padding: 3px;
}
.inbl {
	min-height:180px;
	margin: 3px;
	border: 0px solid #cbcbcb;
	background: url(img/bg_gradient.gif) repeat-x bottom left;
	position: relative;
}
.inbltext {
	position: absolute;
	bottom: 6px;
	right: 10px;
	color: #3b3b3b;
	font: bold 13px/1.5em Arial, Verdana, sans-serif;
}
.incontent {
	min-height:160px;
	margin: 3px;
	padding: 6px;
	border: 0px solid #cbcbcb;
	background: url(img/bg_gradient.gif) repeat-x bottom left;
	color: #585858;
}
.content {
	min-height: 300px;
	padding: 5px 0 5px 5px;
	border: 0px solid #cbcbcb;
	font:normal 12px/1.5em Arial, Verdana, sans-serif;
	color:#2a2a2a;
	overflow: hidden;
	position: relative;
}
.contentleft {
	width: 712px;
	float: left;
	border: 0px solid #cbcbcb;
}
.contentright {
	width: 190px;
	float:right;
	border: 1px solid #cbcbcb;
	margin-bottom: 15px;
	padding: 3px;
}
.socialmedia {
	position: absolute;
	bottom: 10px;
	right: 10px;
	height:20px;
	float:right;
}

/* footer styling */
.footer {
	border-top: 1px solid #cbcbcb;
	margin: 7px 0 10px 0;
	padding-top:5px;
	font:normal 11px/1.2em Tahoma, Verdana, sans-serif;
	color:#b4b4b4;
}
.footer-right {
	float:right;
	color:#b4b4b4;
}

/* algemene styling */

a{
	color:#6a675f;
	text-decoration:none;
}
a:hover {
	color:#fe9b00; 
	text-decoration:underline;
}
img {
	border: 0px;
}


.fr {
	float:right;
}
.numbers {
	font-weight:bold;
	color:#fe9b00;
	float:left;
	padding-right: 5px;
}


menu.css:
Code: 
.wrapper_menu{width:930px;margin:0 auto;display:block;position:relative;z-index:9999}
.wrapper_menu .menu{list-style:none;width:890px;margin:0 auto;height:33px;padding:0 20px 0 20px;-webkit-border-radius:10px;-moz-border-radius:10px;border-radius:10px}
.menu li{float:left;text-align:center;position:relative;margin-right:20px;margin-top:0px;border:none}
.menu li:hover{border-bottom:none;margin-right:19px; -webkit-border-radius:5px 5px 0 0;-moz-border-radius:5px 5px 0 0; border-radius:5px 5px 0 0}
.menu li.nodrop:hover{padding:4px 10px 4px 9px; -webkit-border-radius:5px;-moz-border-radius:5px; border-radius:5px}
.menu li.nodrop:hover a{padding:0}
.menu li a{color:#EEE;outline:0;padding:5px 10px 3px 10px;text-decoration:none;display:block;text-shadow:1px 1px 1px #000}
.menu li:hover a{text-shadow:none;position:relative;z-index:11;padding:4px 9px 4px 9px}
.menu li:hover div a{display:inline}
.menu li .drop,.menu li:hover .drop{padding-right:27px}
.menu li.right{float:right;right:0;margin-right:0}
.menu li.right:hover{margin-right:-1px}
.menu .dropdown_1column,.menu .dropdown_2columns,.menu .dropdown_3columns,.menu .dropdown_4columns,.menu .dropdown_5columns{margin:4px auto;left:-999em;position:absolute;padding:10px;text-align:left;-webkit-border-radius:0 5px 5px 5px;-moz-border-radius:0 5px 5px 5px;border-radius:0 5px 5px 5px}
.menu .dropdown_1column{width:145px}
.menu .dropdown_2columns{width:300px}
.menu .dropdown_3columns{width:455px}
.menu .dropdown_4columns{width:610px}
.menu .dropdown_5columns{width:765px}
.menu li:hover .dropdown_1column,.menu li:hover .dropdown_2columns,.menu li:hover .dropdown_3columns,.menu li:hover .dropdown_4columns,.menu li:hover .dropdown_5columns{left:-1px;top:25px}
.menu li .align_right{ -webkit-border-radius:5px 0 5px 5px;-moz-border-radius:5px 0 5px 5px; border-radius:5px 0 5px 5px}
.menu li:hover .align_right{left:auto;right:-1px;top:25px}
.menu .col_1,.menu .col_2,.menu .col_3,.menu .col_4,.menu .col_5,.menu .col_6{float:left;margin-left:10px}
.menu .col_1{width:145px}
.menu .col_2{width:300px}
.menu .col_3{width:455px}
.menu .col_4{width:610px}
.menu .col_5{width:765px}
.menu .col_6{width:920px}
.menu .firstcolumn{margin-left:0;clear:left}
.menu p,.menu ul,.menu li,.menu h2,.menu h3{font-size:14px;font-family:Arial,Helvetica,sans-serif;line-height:21px;text-align:left}
.menu p{font-size:12px;line-height:18px;margin:0;margin-bottom:10px;text-shadow:1px 1px #000}
.menu .strong{font-weight:bold}
.menu .italic{font-style:italic}
.menu h2,.menu h3{text-shadow:1px 1px #000;margin-top:7px}
.menu h2{font-weight:400;font-size:21px;margin-bottom:18px;padding-bottom:11px}
.menu h3{font-weight:600;font-size:14px;margin-bottom:14px;padding-bottom:7px}
.menu li:hover div a{text-decoration:none;text-shadow:none;border:none;padding:0}
.menu .pusher{margin-top:18px}
.menu .help,.menu .favorite,.menu .mail,.menu .print{padding-left:36px;margin-bottom:18px}
.menu .help{background:url("img/help.png") no-repeat 0 2px}
.menu .favorite{background:url("img/favorite.png") no-repeat 0 2px}
.menu .mail{background:url("img/mail.png") no-repeat 0 2px}
.menu .print{background:url("img/print.png") no-repeat 0 2px}
.menu .imgshadow_dark,.menu .imgshadow_light{padding:4px;margin-top:5px}
.menu .img_left{width:auto;float:left;margin:2px 15px 5px 0}
.menu .img_right{width:auto;float:right;margin:2px 0 5px 15px}
.menu li .black_box,.menu li .dark_grey_box{color:#eee;text-shadow:1px 1px 1px #000;padding:4px 6px 4px 6px; -webkit-border-radius:5px;-moz-border-radius:5px; border-radius:5px}
.menu li ul{list-style:none;padding:0;margin:0 0 12px 0}
.menu li ul li{font-size:12px;line-height:24px;position:relative;text-shadow:1px 1px 1px #000;padding:0;margin:0;float:left;text-align:left;width:145px}
.menu li ul li a{padding:0}
.menu li ul li:hover{background:none;border:none;padding:0;margin:0}
.menu li .greybox li{margin:0 0 4px 0;padding:4px 6px 4px 6px;width:131px; -webkit-border-radius:5px;-moz-border-radius:5px; border-radius:5px}
.menu li .greybox li:hover{padding:4px 6px 4px 6px;margin:0 0 4px 0}
.menu li .plus li{margin:0 0 4px 0;padding:0 0 0 21px;width:109px}
.menu li .plus li:hover{padding:0 0 0 21px;margin:0 0 4px 0}
.menu li ul.social{list-style:none;margin:0;padding:0}
.menu li ul.social li{padding-top:5px;margin:0 12px 12px 0;float:left;position:relative;display:inline;width:32px}
.menu li ul.social li img{border:none}
.menu li ul.social li:hover{padding-top:5px;margin:-1px 12px 12px 0}
.menu li ul.social li span{display:none}
.menu .levels,.menu .levels ul{padding:0;margin:0;list-style:none}
.menu li:hover .levels a{display:block}
.menu .levels a{display:block;width:10em}
.menu .levels li{float:left;width:150px}
.menu .levels li ul{position:absolute;top:-23px;margin:15px 0 0 4px;padding:6px; -webkit-border-radius:5px;-moz-border-radius:5px; border-radius:5px;left:-999em}
.menu .levels li:hover ul ul,.menu .levels li:hover ul ul ul{left:-999em}
.menu .levels li:hover ul,.menu .levels li li:hover ul,.menu .levels li li li:hover ul{left:142px}
.contact_form label,.contact_form legend{font-size:12px;font-family:Arial,Helvetica,sans-serif}
.contact_form legend{margin-bottom:10px}
.contact_form{display:block;margin-bottom:10px}
.contact_form label{display:inline-block;float:left;height:36px;line-height:36px;width:80px;font-size:12px}
.contact_form input,.contact_form textarea,.contact_form select{font-family:Arial,Helvetica,sans-serif;font-size:12px;width:200px;padding:5px;margin:7px 0; -webkit-border-radius:3px;-moz-border-radius:3px; border-radius:3px} 
.contact_form textarea{resize:none} 
.contact_form .required{color:#C00}
.contact_form .form_buttons{margin:4px 0 0 80px}
.contact_form input.button{width:80px;margin-right:10px;cursor:pointer;padding:4px 7px 4px 7px}
.contact_form .special{display:none}
.contact_form .error,.contact_form .sent{font-size:11px;padding:2px 5px 2px 5px;text-shadow:none;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px}
.contact_form .error{background:#FBE5E2;border:#F2A197 solid 1px;color:#992213}
.contact_form .sent{background:#E1F8CB;border:#C6D880 solid 1px;color:#37620d}
.menu_light_theme ul li:hover,.menu_light_theme ul li.nodrop:hover{-webkit-border-radius:5px;-moz-border-radius:5px; border-radius:5px; background:#eee;border-top:1px solid #f07e03;}
.menu_light_theme ul li:hover a{color:#161616;border:1px solid #EEE}
.menu_light_theme ul li .drop,.menu_light_theme .menu li.noactive .drop{ -webkit-border-radius:5px;-moz-border-radius:5px; border-radius:5px; background:url("img/arrow_down0.png") no-repeat right 13px}
.menu_light_theme ul li:hover .drop{background:url("img/arrow_down1.png") no-repeat right 12px}
.menu_light_theme ul .dropdown_1column,.menu_light_theme ul .dropdown_2columns,.menu_light_theme ul .dropdown_3columns,.menu_light_theme ul .dropdown_4columns,.menu_light_theme ul .dropdown_5columns,.menu_light_theme ul .levels li ul{background:#eee;border:1px solid #444;}
.menu_light_theme ul p,.menu_light_theme ul h2,.menu_light_theme ul h3,.menu_light_theme ul li ul li{text-shadow:1px 1px 1px #FFF}
.menu_light_theme ul h2,.menu_light_theme ul h3{border-bottom:1px solid #888}
.menu_light_theme ul .imgshadow_light{background:#FFF;border:1px solid #777;-webkit-box-shadow:0 0 5px #666;-moz-box-shadow:0 0 5px #666;box-shadow:0 0 5px #666}
.menu_light_theme ul li .black_box{color:#fff;text-shadow:1px 1px 1px #000;background-color:#333;-webkit-box-shadow:inset 0 0 3px #000;-moz-box-shadow:inset 0 0 3px #000;box-shadow:inset 0 0 3px #000}
.menu_light_theme ul li .dark_grey_box{color:#fff;text-shadow:1px 1px 1px #000;background-color:#555;-webkit-box-shadow:inset 0 0 3px #111;-moz-box-shadow:inset 0 0 3px #111;box-shadow:inset 0 0 3px #111}
.menu_light_theme ul li .greybox li{background:#F4F4F4;border:1px solid #bbb}
.menu_light_theme ul li .greybox li:hover{background:#fff;border:1px solid #aaa}
.menu_light_theme ul li .plus li{background:url("img/plus.png") left 6px no-repeat}
.menu_light_theme ul .levels a.parent,.menu_light_theme ul .levels a.parent:hover{background:url("img/arrow_right1.png") right center no-repeat}
.menu_light_theme ul .contact_form input:focus,.menu_light_theme ul .contact_form textarea:focus,.menu_light_theme ul .contact_form select:focus,.menu_light_theme ul .contact_form input:hover,.menu_light_theme ul .contact_form textarea:hover,.menu_light_theme ul .contact_form select:hover{box-shadow:rgba(0,0,0,0.7) 0 0 3px;-moz-box-shadow:rgba(0,0,0,0.7) 0 0 3px;-webkit-box-shadow:rgba(0,0,0,0.7) 0 0 3px; border:1px solid #333}
.menu_light_theme ul .contact_form input,.menu_light_theme ul textarea,.menu_light_theme ul select{color:#FFF;background-color:#222;border:1px solid #0A0A0A}
.menu_light_theme ul .contact_form input.button{background-color:#1E1E1E;border:1px solid #0A0A0A;color:#ccc}
.menu_light_theme ul .contact_form input.button:hover{color:#eee;background-color:#222;border:1px solid #000}
.menu_light_theme .menu li:hover div a{border-bottom:none}
.menu_light_theme .menu li.noactive a{color:#eee}
.menu_lightblue{background: #e9a329 url(img/menubg.png) top left no-repeat;} 
.wrapper_menu_full .menu_lightblue{border-bottom:1px solid #fff}
.menu_light_theme .menu_lightblue li:hover div a{color:#2f3835}
.menu_light_theme .menu_lightblue li:hover div a:hover{color:#2f3835}
.menu_light_theme .menu_lightblue li ul li a:hover{color:#2f3835}
.menu li.noactive,.menu li.noactive:hover{background:none;border:none;margin-right:20px}
.menu li.noactive a{padding:5px 27px 3px 10px;text-shadow:1px 1px 1px #000;border-bottom:none}
.menu li.noactive.right{margin-right:0}

Alvast bedankt voor jullie hulp!
 
Laatst bewerkt:
Zoals ik al aangeef, is de html valide (gechecked dus ook) en de style.css eveneens. Het tweede css bestand voor mn menu is niet geheel valide, maar zelfs als ik die uit de pagina laat doet het probleem zich voort.
 
Hoi Ruud85,
Inderdaad een rare gewaarwording dat Chrome het niet goed doet. Op moment dat je over de Google+ knop hovert, verschijnt er onderin ook nog een horizontale scrollbar: alsof er aan de rechterkant nog meer op de pagina zit. Verlaat je de hover, dan is de scrollbar ook weer weg (terwijl de rechterkant van de pagina-background wel zichtbaar blijft).
Ga je tegelijkertijd met een hover met de pijltjesknop naar rechts, dan blijkt er aan de rechterkant alleen maar lege ruimte te zitten.

Ik vermoed dat het aan de breedte-constructie van de pagina ligt:
Code: 
html:         width:         950px;
body:         width:  100% = 950px; 
body bg-img:  breedte:       988px;
#container:   padding-right:  25px;
#container:   padding-left:   30px;
#container:   width:         930px;
#contaner incl.padding:      985px;


Zowel de html-breedte als de body-breedte zijn smaller dan de container, en ik denk dat Chrome daar niet tegen kan.
Maar als je het als volgt doet, gaat het wel goed (en kan ook de hele #container gemist worden):
Code: 
html {
	height: 100%;
	padding-bottom: 1px;
	background: #f8f8f8 url(img/bodybackground.gif) repeat-y 50% 0;
}
body {
	width: 930px;
	padding: 0 30px;
	margin: 0 auto;
	font: normal 12px/1.8em Arial, Verdana, sans-serif;
}
  • Test: avaio-nw.htm
    Hieruit is de <div id="container"> gesloopt; voor de rest qua html en css identiek.
  • Meteen xhtml-Strict van gemaakt voor de beste cross-browser resultaten.
  • Nu doet ook IE7 het goed (daarin stond de pagina links ipv gecentreerd).

Met vriendelijke groet,
CSShunter
 
Wow, het werkt nu volledig naar behoren! Hartstikke bedankt csshunter! :thumb: Ik heb alleen wel de html padding-bottom:1px; weggehaald, omdat dit ervoor zorgde dat ik permanent een verticale scrollbalk voor die ene pixel kreeg. Dat ik dit heb weggehaald heeft neem ik aan geen gevolgen?

Ik geloof je meteen als je zegt dat strict tot betere/gelijkere cross-browser resultaten leidt, dus gebruik ik voortaan xhtml-strict. Wel zie ik nu dat de inhoud van mijn menu blokken rechts anders / meer uitgerekt is... daar ga ik even mee puzzelen om dat weer terug te krijgen. :cool:
 
Laatst bewerkt:
Hoi Ruud,
Ik heb alleen wel de html padding-bottom:1px; weggehaald, ... heeft neem ik aan geen gevolgen?
Klik om te vergroten...
Toch wel! :P
Die ene px (en de altijd-scrollbar-rechts) staat er niet toevallig, maar doelbewust. Is er in gezet om geen springende pagina's te krijgen bij een wisseling tussen een korte pagina en een pagina met veel content waarin je moet scrollen.



============
... de inhoud van mijn menu blokken rechts anders / meer uitgerekt is...
Klik om te vergroten...
Even het tweede <br>'retje onder het stippellijntje weghalen.

Met vriendelijke groet,
CSShunter
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan