• Some users have recently had their accounts hijacked. It seems that the now defunct EVGA forums might have compromised your password there and seems many are using the same PW here. We would suggest you UPDATE YOUR PASSWORD and TURN ON 2FA for your account here to further secure it. None of the compromised accounts had 2FA turned on.
    Once you have enabled 2FA, your account will be updated soon to show a badge, letting other members know that you use 2FA to protect your account. This should be beneficial for everyone that uses FSFT.

Simple HTML site not displaying correctly.

Snotrocket

Snotrocket

Supreme [H]ardness
2FA
Joined
Dec 28, 2004
Messages
6,079
So I've made a simple HTML site for myself and a couple friends for our tractor hobby. The main page is at http://www.casecoltingersoll.com

The problem I'm having is on the main page where my text and 2 pictures are there is supposed to be an off white back round. It displays fine in IE and Chrome but doesn't display correctly in Firefox. What am I doing wrong?

For the record I know just enough to be dangerous about web site design and programming.
 
:p Yeah i see that. My host has been having problems with my server for the last several days. No sooner do I post this thread and it's down again.
 
looks like in the bgcolor attribute in the table is missing a pound sign before the color code
 
mine37388 said:
looks like in the bgcolor attribute in the table is missing a pound sign before the color code
Click to expand...

He's referring to:
Code: 
  <table width="866" height="694" border="1" [B]bgcolor="fefacd"[/B]>

Should be:
Code: 
  <table width="866" height="694" border="1" [B]bgcolor="[COLOR=red]#[/COLOR]fefacd"[/B]>
 
Hope ya don't mind, I rewrote some of your code ;)

I wrote it in tableless XHTML 1.0 with some CSS3. If you view it in a browser which supports CSS3 (firefox, chrome, opera, safari) it will have nice rounded corners on your center box with the text. If you view it in IE they will be square.

It validates as XHTML 1.0 Strict so you shouldn't have any issues with clients not seeing it correctly.
http://validator.w3.org/check?uri=h...e=Inline&group=0&user-agent=W3C_Validator/1.1

Here's your code (index.html)
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Case Colt Ingersoll</title>

<style type="text/css">
body{
	background: #DD3109;
	font-family: Tahoma,Geneva,Kalimati,sans-serif;
	font-size:13px;
	font-weight:normal;
	padding:5px 5px 5px 5px;
	margin:20px 0 0 0;
	}
	
.clr{
	clear: both;
	}
	
.container{
	margin: auto;
	width: 900px;
	}
	
.container .header p,
.table_right p{
	text-align: center;;
	color: #FFFF00;
	font-size: 18px;
	}
	
.container .header p a{
	color: #FFFF00;
	text-decoration: none;
	}
	
.container .header p a:hover{
	text-decoration: underline;
	}
	
.table_left{
	float: left;
	background-color: #FEFACD;
	min-height: 600px;
	width: 435px;
	border: 2px solid #000000;
	border-radius: 10px;
	padding: 15px 5px 0 5px;
	}
	
.table_right{
	float: left;
	background-color: #FEFACD;
	min-height: 600px;
	width: 435px;
	border: 2px solid #000000;
	border-radius: 10px;
	padding: 15px 5px 0 5px;
	}
</style>
</head>

<body>
<div class="container">
	<div class="header">
		<p><img alt="Site Logo" src="http://www.casecoltingersoll.com/site_logo.gif" /></p>
		<p><a href="http://www.casecoltingersoll.com/forum">Click Here to Visit our Forum</a></p>
		<p><a href="http://www.casecoltingersoll.com/forum/ucp.php?mode=register">Register Here</a></p>
	</div>
	
	<div class="content">
		<div class="table_left">
			<p><strong>Medicine for your ailing Colt, Case, or Ingersoll Garden Tractor.</strong></p>
			<p>That's what you will find when you join this forum. Whether your problem is with the hydraulic system, engine, trans-axle, steering or an attachment; you will find the information and help you seek right here.</p>
			<p>This site is dedicated to keeping as many Colt, Case and Ingersoll garden tractors, yard tractors and lawn tractors running and serving the needs of their owners. We also assist those in the collector hobby who are working diligently to restore these tractors to their former glory so that they may remind others of an era in American history that appears to be slipping away. If this sounds like the sort of place that you've been looking for, take a look at what we have to offer. If you like what you see join the group. Participate in some conversations. Review the extensive manuals section. Ask questions. Once you join, you will be e-mailed information that is essential for you to review in advance of posting on the site. We do this for the express purpose of keeping the messages on the forum board focused on the more technical issues of these tractors. Whether you are a new owner or a long-time owner, you will undoubtedly find a wealth of information all by yourself in our extensive Technical Section that is not available anywhere else. That is but one of the things that sets this site apart from the rest out there.</p>
		</div>
		<div class="table_right">
		<p><img alt="Tractor Picture" src="http://www.casecoltingersoll.com/mainpage446.jpg" /></p>
		<p><img alt="Tractor Picture 2" src="http://www.casecoltingersoll.com/1965%20Colt%20Deluxfrontpage.jpg" /></p>
		</div>
		<div class="clr"></div>
	</div>
</div>
</body>
</html>
 
Forgot to add, you can see a working demo here:

http://effecthost.com/tractor

If ya don't like it let me what you want to change and I'd be more than happy to help ya out.

After a solid 12 hours of PHP coding all day, some xhtml/css is very relaxing :D
 
Interesting. I just may use that! I'm going to have to increase the font size as most of my members are older and complain about the small text. :D
 
Code: 
.container .header p,
.table_right p{
	text-align: center;;
	color: #FFFF00;
	font-size: 18px;
	}

Controls the font size for the yellow text.

If you want to make the text on the left bigger, just add

Code: 
font-size: 18px;

line into the .table_left class, then adjust it as you need.
 
Hey Snotrocket,
I am not sure if you are still looking for input but here are my 2 cents. I actually like the layout. There are some images that do not have the "ALT" attribute which is used for SEO and accessibility:

- jic_small.gif
- backsq.gif
- cornertractor.jpg

Also, there are plenty of deprecated "<font>" tags and your website is missing language declaration. To get more data regarding these issues I utilized iwebchk.com a comprehensive website analyzer.
 
You must log in or register to reply here.
Back
Top