No replies
chocko609
chocko609's picture
Offline
newbie
Australia
Last seen: 8 years 49 weeks ago
Australia
Timezone: GMT+11
Joined: 2011-02-15
Posts: 6
Points: 8

Hello,

I have a problem with a site I'm building. In FireFox (v3.6.15) on my index page http://www.frcclothing.com.au/dev/index.html the top graphic and nav bar are slightly too far to the right of centre whereas on my other two pages http://www.frcclothing.com.au/dev/jim_tsitas_biography.html and http://www.frcclothing.com.au/dev/formgenerator/forms/contact.html, everything lines up OK. I've also noticed that the whole center div seems to move to the left a little on the two correctly displaying pages compared to the index page.

When I test the site in IE8 the problems are reversed ie. the index page displays correctly and the other two pages incorrectly.

The link to the style sheet is http://www.frcclothing.com.au/dev/jim-styles.css

The code for the pages and style sheet is below.

Index Page (displays correctly in IE8, incorrectly in FF)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
 
<html>
<head>
<title>Jim's Gym - Boxing Training :: Geelong, Werribee, Lara</title>
 
						 <meta name="keywords" content="boxing training, geelong, lara, werribee">
 
						 <meta name="description" content="Jim's Gym specialises not only in boxing training for aspiring fighters but anyone 
						 who would like to improve their fitness and health.">
 
						 <link rel="stylesheet" type="text/css" href="jim-styles.css">
 
</head>
 
 
<body>
 
			<div id="text_container">
 
			<div id="header"></div>
					 <div id="nav">
		 			 			<table class="tableNav"><tr class="tableNav">
		 						<td class="tableNav"><a href="index.html">Home</a></td>
		 						<td class="tableNav">Button 2</td>
		 						<td class="tableNav">Button 3</td>
		 						<td class="tableNav"><a href="jim_tsitas_biography.html">About Jim</a></td>
		 						<td class="tableNav"><a href="/dev/formgenerator/forms/contact.html">Contact Us</a></td>
		 						</tr>
		 						</table>
		 				</div>
 
						<span class="greyheading">Jim's Gym Boxing Training</span><br>
									 <img class="image_right" src="images/jims_boxing_gym.jpg" height="267" width="355" alt="Jim's Boxing Gym">
									 <p>
									 Here at Jim's Gym we offer professional boxing training for amateur fighters of all ages.
									 We also offer group and one on one training for fitness, weight loss and general good 
									 health.
									 <br><br>
									 Boxing training is one of the best all over body workouts you can get, it's great 
									 cardiovascular training and will build your general fitness and stamina as 
									 well as boost your self confidence and it's the most fun you'll have exercising!
									 <br><br>
									 We're situated in Lara which makes our location convenient for anyone from the Geelong 
									 region, as well as Werribee and Hoppers Crossing.
									 <br><br>
									 All sessions are conducted in our recently built gym where you can learn all the 
									 traditional boxing skills and techniques as well as strength training and physical 
									 conditioning. Whether you're male or female, kids or adults, Jim's Gym can help you achieve
									 all your personal fitness goals.</p>
 
									 		 	<div id="footer">
											 			<table class="tableFoot"><tr class="tableFoot">
														<td class="tableFoot"></td>
														<td class="tableFoot"><a href="index.html">Home</a>&nbsp;&nbsp;|</td>
														<td class="tableFoot">Button 2&nbsp;&nbsp;|</td>
														<td class="tableFoot">Button 3&nbsp;&nbsp;|</td>
														<td class="tableFoot">Button 4&nbsp;&nbsp;|</td>
														<td class="tableFoot"><a href="/dev/formgenerator/forms/contact.html">Contact Us</a></td>
														<td class="tableFoot"></td>
														</tr>
														</table>
												</div>
 
 
			</div>			
 
 
</body>
</html>

Contact Page (displays correctly in FF, incorrectly in IE8)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
 
<html>
<head>
<title>Jim's Gym - Boxing Training :: Geelong, Werribee, Lara</title>
 
						 <meta name="keywords" content="boxing training, geelong, lara, werribee">
 
						 <meta name="description" content="Jim's Gym specialises not only in boxing training for aspiring fighters but anyone 
						 who would like to improve their fitness and health.">
 
						 <link rel="stylesheet" type="text/css" href="http://www.frcclothing.com.au/dev/jim-styles.css">
 
</head>
 
 
<body>
 
			<div id="text_container">
 
			<div id="header"></div>
					 <div id="nav">
		 			 			<table class="tableNav"><tr class="tableNav">
		 						<td class="tableNav"><a href="http://www.frcclothing.com.au/dev/index.html">Home</a></td>
		 						<td class="tableNav">Button 2</td>
		 						<td class="tableNav">Button 3</td>
		 						<td class="tableNav"><a href="http://www.frcclothing.com.au/dev/jim_tsitas_biography.html">About Jim</a></td>
		 						<td class="tableNav"><a href="/dev/formgenerator/forms/contact.html">Contact Us</a></td>
		 						</tr>
		 						</table>
		 				</div>
 
						<span class="greyheading">Contact Us At Jim's Gym</span><br>
									 <p>
									 If you have any questions about our programs at Jim's Gym then please get in touch with 
									 us. Our contact details, email form and gym address are below:
									 <br><br>
									 <b>Jim's Gym</b><br>
									 <b>Phone:</b> 0411 354 279<br>
									 <b>Address:</b> 495 Bacchus Marsh Road, Lara, 3212<br>
									 </p>
									 <form enctype='multipart/form-data' action='process.php' method='post'>
									 <p>
 
									 <label for="user">Name:</label>
									 <input type="text" name="Name" value="" /><br>
 
									 <label for="emailaddress">Email Address:</label>
									 <input type="text" name="Emailaddress" value="" /><br>
 
									 <label for="enquiry">Enquiry:</label>
									 <textarea name="Enquiry"></textarea><br>
 
									 <input type="submit" name="submitbutton" id="submitbutton" value="Submit Form" /> 
									 <input type=reset value='Clear Form' id="clearbutton" />
 
									 </p>
									 </form>	
 
									<br>
			 						<span class="greyheading">Map</span><br>
									<img src="/dev/images/gym_map.jpg" alt="Jim's Gym Map" style="padding: 2px; border-style: solid; border-width: 1px; height: 383px; width: 561px; align: center;">
									<br><br>
 
 
									 		 	<div id="footer">
											 			<table class="tableFoot"><tr class="tableFoot">
														<td class="tableFoot"></td>
														<td class="tableFoot"><a href="index.html">Home</a>&nbsp;&nbsp;|</td>
														<td class="tableFoot">Button 2&nbsp;&nbsp;|</td>
														<td class="tableFoot">Button 3&nbsp;&nbsp;|</td>
														<td class="tableFoot">Button 4&nbsp;&nbsp;|</td>
														<td class="tableFoot"><a href="/dev/formgenerator/forms/contact.html">Contact Us</a></td>
														<td class="tableFoot"></td>
														</tr>
														</table>
												</div>
 
 
			</div>			
 
 
</body>
</html>

Style Sheet

body {margin: 0px; /* This leaves no white space at any of the sides */
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 100%; /* Percentage size used for accessibility*/
	color: black; /* Set default colour */
	text-align: center;
	min-width: 800px;
	height: 100%;
	background: #404040 url(images/800w_bg.jpg) repeat-y center top;
						 			}
 
 
	#center {
					 			width: 100%;
									}
 
 
	#footer {
  clear: both;
				 						}
 
 
	#header {
					 			background: url(images/top_header.jpg);
								background-repeat: no-repeat;
					 			width: 725px;
								height: 120px;
								margin-left: auto;
								margin-right: auto;
								top: 0px;
										}
 
 
	#nav		{
					 			width: 723px;
								height: 30px;
								background: #808080;
								margin-left: auto;
								margin-right: auto;
								border-top: 1px solid black;
								border-bottom: 1px solid black;
								border-left: 0px;
								border-right: 0px;
								padding: 1px;
										}
 
	#text_container {
								width: 723px;
								background: white;
								margin-left: auto;
								margin-right: auto;
										}
 
 
	#footer {
					 			width: 724px;
								height: 35px;
								margin: auto;
								background: white;
								float: left;
										}
 
 
	.greyheading	{
								color: #808080;
								font-weight: bold;
								font-size: 14pt;
								font-family: helvetica, arial, sans-serif;
								text-align: center;
										}
 
	.image				{padding: 3px;
										}
 
	.image_right	{padding: 3px;
								float: right;
										}
 
 
	.tableNav {
						 	  border: 0px;
								border-collapse: collapse;
								margin: auto;
										}
 
	.tableNav tr {
						 		padding: 3px;
										}
 
	.tableNav td {
							 	height: 19px;
								width: 80px;
							 	padding: 5px;
								font-size: 80%;
								text-align: center;
								color: white;
								border: solid white 1px;
								background: url(images/navbutton_bg.jpg);
										}
 
	.tableBio			{
								 		border: 0px;
										border-collapse: separate;
										margin: left;
										padding: 5px;
														}
 
	.tableBio th	{
								 		border: 0px;
										height: 19px;
										width: 120px;
										padding: 2px;
										font-size: 80%;
										text-align: left;
										color: black;
										background: #808080;
													 	}
 
	.tableBio tr	{
								 		padding: 0px;
														 }
 
	.tableBio td	{
								 		border: 0px;
								 		height: 19px;
										width: 120px;
										padding: 2px;
										font-size: 80%;
										text-align: left;
										color: black;
										background: #C0C0C0;
													 		}
 
 
	.tableFoot {
						 	  border: 0px;
								border-collapse: collapse;
								margin: auto;
								padding: 10px;
								background: #808080;
										}
 
	.tableFoot tr {
						 		padding: 10px;
										}
 
	.tableFoot td {
						 		height: 25px;
								width: 70px;
							 	padding: 0px;
								font-size: 60%;
								text-align: center;
								color: white;
								border-top: 0px;
								border-bottom: 0px;
								border-left: 0px;
								border-right: 0px;
										}
 
		p {
    	 					font-size: 9pt; 
    						font-family: verdana, arial, sans-serif; text-align: justify; padding: 3px;}
 
		/* Formatting for contact form */
		label {
								float: left;
								width: 140px;
								font-weight: bold;
								text-align: left}	
 
		textarea{
						 		float: left;
						 		width: 250px;
								height: 150px}	
 
		input, textarea{
					 			float: left;
					 			width: 180px;
								margin-bottom: 5px}
 
 
		#submitbutton{
		margin-left: 140px;
		margin-top: 5px;
		width: 90px}
 
		#clearbutton{
		margin-left: 15px;
		margin-top: 5px;
		width: 90px}
 
		br{
		clear: left}
 
		/* Link Formatting */
		A:link {text-decoration: none; color: #FFFFFF;}
		A:visited {text-decoration: none; color: #FFFFFF;}
		A:active {text-decoration: none;}
		A:hover {text-decoration: none; color: #404040;}	

Many thanks,
Chocko.