Rodo Abad

Anyone of you guys having problems with your CSS backgrounds not displaying correctly especially if your page doesn’t fill the whole browser window? I had that problem with PGN’s Chatroom page. Here’s what it looks like, take a look.

You see what I mean? That’s going to suck if your background isn’t white just line mine. Here’s how to fix it.

My CSS file looks like this.

html {
	overflow-y: scroll;
}

body {
	height: 100%;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	background: #cccccc;
	color: #464646;
	margin: 0px;
}

Notice that I had the height: 100%; in body? Well it turns out that I need to put it in html as well to make it work under Chrome. Making my CSS look like this…

html {
	overflow-y: scroll;
	height: 100%;
}

body {
	height: 100%;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	background: #cccccc;
	color: #464646;
	margin: 0px;
}

Now everything works!

Tags: CSS

This entry was posted on Friday, June 4th, 2010 at 8:11 PM and is filed under HTML. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.