Log in

View Full Version : 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

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.

<!-- here is the html comment -->

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

<!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

/*
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


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.


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