Building a site for a class and need a little help

Get Started
1

I’m building a pretty basic site with html and css for a class and I ran into a little problem. It looks okay on Safari but on Firefox my background doesn’t show up. Can someone look at my code and tell me what I’ve done wrong?

Here is the home page 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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Thad's Review of the Functionality of Bass Fishing Websites</title>
<meta name="description" content="Thad's review on how different bass fishing sites function./>
<meta name="keywords" content="bass, fishing, site, reviews, web, design"/>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
	<div id="header">
		<a href="index.html"><img src="logo.png" alt= "Thad's Reviews of Bass Fishing Sites" />  </a>
	</div>
	<div id="nav">
		<h2>Navigation</h2>
		<ul>
<li><a href="index.html">Home</a></li>
<li><a href="review1.html">BassResource</a></li>
<li><a href="review2.html">Tackle Tour</a></li>
<li><a href="review3.html">BassMaster</a></li>

</ul>

	</div>
	<div id="main">
		<p>This review site was designed to discuss the functionality of bass fishing websites. 
Outside of school I spend a lot of time bass fishing. I am the president of 
the Fishing Club at Radford University. I have also spent a lot of time learning about web 
design so the two go hand in hand for me. 
	    </p>
		
		<p>
		sdfsdf
		</p>
		
		<p>
		sdfsdf
		</p>
		
		<p>
		sdfsdf
		</p>
		
        </div>
	<div id="footer">
	  <div align="center">
	 		
	 		contact
			
	  </div>
  </div>
</div>
</body>
</html>

Here is my css file:

body {
background-image:url('bg_box.png');
background-repeat:repeat;
font-size:12px;
font-family:Verdana, Arial, Helvetica, sans-serif;
}
div#wrapper {
width: 800px;
background-color:#FFFFFF;
margin-top: 50px;
margin-bottom: 50px;
margin-left: auto;
margin-right: auto;
padding: 0px;
border: thin solid #000000;
}
div#header {
padding: 0px;
margin: 0px;
text-align: center;
background-color:#000;
color:#900000;
border: none;
}
div#nav {
width: 25%;
padding: 10px;
margin-top: 1px;
float: left;
border-right:dotted;
}
div#main {
margin-left: 30%;
margin-top: 1px;
padding: 10px;
}
div#footer {
padding: 15px;
margin: 0px;
border-top: thin solid #000000;
}

a:link {color:#B00000; text-decoration:none;}
a:visited {color:#900000; text-decoration:none;}
a:hover {color:#D00000; text-decoration:underline;}  
a:active {color:#900000; text-decoration:none;} 

img { border: none; }
2

Hi Twells. Welcome to SP. Your post got my attention because I’ve designed a number of sites for classes, some good, some not so hot. :slight_smile:

Your site is interesting. It’s designed almost like a business card or a resume/CV. I like it.

Your problem is that the background color in your wrapper is overriding your background image.

Here’s one solution:

body {
	font-size:12px;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	background: #fff url("bg_box.png") repeat;
}

div#wrapper {
	width: 760px;
	margin: 50px auto;
	padding: 0px;
	border: thin solid #000000;
}

I changed your width to 760px because if you’re going to keep it narrow enough for 800x600 displays, you might as well narrow it even further and eliminate the horizontal scrollbar that a small display will have. I also tightened up your background element to combine the individual CSS commands, and your margin commands.

Also, if you take the background element out of the body and put it in the wrapper, the background image only appears within the wrapper: an interesting effect that you might like.

You have a couple of other issues, particularly using div align="center", a deprecated HTML command that doesn’t work in all browsers. Try assigning a particular class to your HTML element that you want centered and using CSS to center it. Like so:

<div id="footer" class="center">
	<p>contact</p>
</div>

.center {
    text-align: center;
    margin: 0 auto;
}

You have a couple of validation issues, too, but overall, you’ve got a nice design here. I’d like to see it, with the accompanying graphics, when you’ve got it up and running.

(Also, I’m one of those in here who always ask why folks use XHTML Transitional when they, IMO, should be using HTML Strict. Your call, obviously, but I always throw that out there.)

Thanks for posting!

3

Thanks for the help. I made your changes but I don’t think that is what I want with the background. It did not make my background image show up in Firefox. All it did was take my white background out of my wrapper. See, I have a checkered background and then I have a wrapper with a white background so you can read my content. It looks fine in Safari.

What should I put to validate it? I just used what our professor showed us.

4

Try this:

body {
	font-size:12px;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	background: #fff url("bg_box.png") repeat;
}

div#wrapper {
	width: 500px;
	background: #fff;
	margin: 50px auto;
	padding: 0px;
	border: thin solid #000000;
}

That puts the background image in the body, but the white BG color in the wrapper overrides it. (You also might consider using a light, light gray, such as #fafafa, to enhance visibility. A lot of people have trouble reading black text on a white background.)

I’m looking at it in Opera, which is pretty standards-compliant, but it displays the same in Firefox. Someone more knowledgeable than myself can perhaps explain why it appears “properly” in Safari (it shouldn’t).

You can validate your code by uploading the file here.

Tell your professor to quit using XHTML Transitional. :slight_smile:

5

Okay, I did that and it still doesn’t show up right. I finished my site for this assignment and I have it up on the server.

http://www.radford.edu/twells15/coms326/reviews/index.html

My background doesn’t show up in Firefox and I used the alignment code you said to use but it doesn’t work in Firefox. Neither does the code I used to float my images on the home page.

Here is the final css code I used:

body {
    font-size:12px;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    background: #fff url("bg_box.png") repeat;
}
 
div#wrapper {
    width: 760px;
    background: #fff;
    margin: 50px auto;
    padding: 0px;
    border: thin solid #000000;
}
div#header {
padding: 0px;
margin: 0px;
text-align: center;
background-color:#000;
color:#900000;
border: none;
}
div#nav {
width: 25&#37;;
padding: 10px;
margin-top: 1px;
float: left;
border-right:dotted;
}
div#main {
margin-left: 30%;
margin-top: 1px;
padding: 10px;
}
div#footer {
padding: 15px;
margin: 0px;
border-top: thin solid #000000;
}

a:link {color:#B00000; text-decoration:none;}
a:visited {color:#900000; text-decoration:none;}
a:hover {color:#D00000; text-decoration:underline;}  
a:active {color:#900000; text-decoration:none;} 

.center {
    text-align: center;
    margin: 0 auto;
}


.thumbnail {
	float:left;
	width:250px;
	height:193px;
	margin:5px;
}

.thumbnailright {
	float:right;
	width:250px;
	height:193px;
	margin:5px;
}
6

It doesn’t work in Opera, either, though I don’t see a reason why it shouldn’t. You might check to see if the bg_box.png image is actually in the same folder as your HTML page, or if you’ve named it correctly. The floats work fine in Opera.

There are a few other tweaks I’d advise making, but let’s figure this background image issue out first.

7

The float is working now in Firefox. I don’t know what was going on. My background is in the right folder. I mean it shows up fine in Safari.

8

I think Safari is working off the cache. I go to this URL, which should display the background image:

http://www.radford.edu/twells15/coms326/reviews/bg_box.png

and get nothing.

9

Sorry, I don’t think I was clear. I believe Safari has the image stored in its cache, and even though the image isn’t in the folder, Safari is using the cached image. Clear Safari’s cache and view the site again. I think you’ll see what I mean. The next step is to find that background image and make sure it’s in the proper folder.

Meanwhile, I did something kinda cool with your design, I think. Shows how many different ways you can go with the same basic concept.

10

My image is in the right folder. You can see it here:

http://www.radford.edu/twells15/coms326/reviews/bg_box.png

11

It doesn’t show for me at all in Opera or IE. Firefox tells me it can’t be displayed because it contains errors. I don’t have Safari on this machine, so I can’t check there. Seems there’s a problem with the image itself. Can you try a different image?

12

Finally got it to work. That image was corrupt some how. I’ve never had that problem. Thanks for all your help

13

Thad, glad to do it. The corrupt image problem happens from time to time. Any other questions, please feel free to post them.