background in Google Chrome not working

**sharrison09** · 07-08-2010, 07:49 PM

So I'm working on my website (http://oberlindesign.zxq.net/greyellow/tableindex.html) and I'm not sure if it's just my computer but I'm using Google Chrome and the background color won't show up. If I go into IE it shows up how it should, but it won't in Chrome.

Here's part of my CSS:



body {

    font: Georgia;

    font-size: 12px;

    color: #a7a7a7;

    background-color: #717576;

    align:justify;

    text-align: center;

}

**azoomer** · 07-08-2010, 08:18 PM

try to change
<body background="#717576">
to
<body>
the way the background color is written in the body tag is not valid.
It should work if you delete it and only use the stylesheet.
I don't know: align:justify
and I think you might be better off without it. Try

Code:

body {
font: Georgia;
font-size: 12px;
color: #a7a7a7;
background-color: #717576;
text-align: center;
}

instead

**sharrison09** · 07-08-2010, 08:39 PM

Oh, those things were just me fooling around trying to get it to work, but even with those fixed it still isn't working.

**sharrison09** · 07-08-2010, 09:02 PM

I made a quick fix for now by just putting a div layer below everything that fills the entire background, but if somebody could find what's wrong that would be really good

**azoomer** · 07-08-2010, 09:27 PM

I noticed that you have html comments at the top of your stylesheet.



I would think it is better to use css comments, you know those that look like this

/* here is a comment and some copyright info */

not sure if that makes any difference though, but I would try to change that.

**azoomer** · 07-08-2010, 09:59 PM

Okay i downloaded you page and I have made a few changes so that it will be more valid. There were a few errors preventing it from working properly. Here is the html

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Oberlin Design: design2 Table layout</title>
<link rel="stylesheet" type="text/css" href="odgreyellowtable.css">
</head>
<body>
<div class="wrapper">
<table>
<tr><td colspan=3 class="header">
<img src="http://oberlindesign.zxq.net/greyellow/header1.jpg" alt="Oberlin Design Greyellow Header" align=left><p>
This is the welcome text for Oberlin Students for Art and Design; Oberlin Design. words and more words go here for ever and ever and ever and more and more words and wait could it be? even more words. that should be about enough. </p>
</td></tr>
<tr><td class="divider" colspan=3>
<br><hr><br>
</td></tr>
<tr><td class="contentBox">
<P>member bios</p>
</td>
<td class="contentBox">
<P>upcoming projects</p>
</td>
<td class="contentBox">
<P>application process</p>
</td>
</tr>
<tr><td class="divider" colspan=3>
<br><hr><br></td></tr>
<tr><td colspan=3 class="header">
<P>footer goes here with contact information</p>
</td></tr>
</table>
</div>
</body>
</html>

and here is the revised css

Code:

/*
  your contact info
*/

body { 
        font-family:Georgia, "Times New Roman", Times, serif;
	font-size: 12px;
        color: #a7a7a7;
	background: #717576;
	text-align: center;
}

p {
  	color: #a7a7a7;
	font-family: Georgia;
	font-size:12px;
}

div.wrapper {
        margin-left : 10%;
        margin-right : 10%;
}

table, tr, td {
	padding: 15px;
	border: 0;
	margin: 10px;
	border-spacing:20px;
}

td.divider {
        background: #717576;
	margin-top: 10px;
	margin-bottom: 10px;
	text-align: center;
}

td.header {
        background: #626666;
	border:0px;
}

td.contentBox {
        background: #626666;
	border: 0px;
	border-spacing:20px;
	width: 33%;
}

hr {
         color: #ece87d;
	 background-color: #ece87d;
	 width: 65%;
	 height: 5px;
	 border-style: dotted;
	 border: 1pt dotted #ece87d;
}

this will validate ( totalvalidator) and does not throw css errors in the firefox console so it's a better starting point.
I can see that it is not looking exactly the same now but you can tweak it from there. Now you have things working with the background anyway. I suggest using the validator regularly as you go along it is helpful in getting things right. I might also have made some mistakes though, I normally don't do tables.
If you plan for an important website that you will be spending a lot of time on you might save yourself some trouble in the long run if you change the layout from being table based to using divs instead.

**sharrison09** · 07-09-2010, 03:24 AM

I searched some of the other CSS Help Forums out on other sites and I came across the solution. For anyone else who wants the answer all I did was insert

Code:

html {height:100%}

in the CSS and it solved my lack-of-background-color problem in Chrome and works now.

Thank you azoomer for your patience and help!

**tomywie** · 07-09-2010, 01:24 PM

If the color is not websecure you could also as an alternative add a 1px image of the same color that repeats itself.

Code:

body {
  background: #717576 url('http://i29.tinypic.com/29xasyt.jpg') 0 0 repeat;
  font: 12px Georgia;
  color: #a7a7a7;
  text-align: center;
  margin: 0;
  padding: 0;
}

And by the way, I think that the design of your site looks really good

Best regards from Toby

Thread: background in Google Chrome not working

Thread Tools

Search Thread

background in Google Chrome not working

The Following User Says Thank You to azoomer For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions