...

View Full Version : Page formatting incorrectly in Firefox after making W3C compliant



subdigital
03-22-2005, 03:50 AM
I used the Tidy firefox extension to validate the html in a page I am developing. The page used to look okay in Firefox and IE, but now it only works in IE (which is a bit backwards, but oh well)

Anyway, to get the page to validate I removed a lot of the height attributes of the table tags and removed the bgcolor of the tables (used css in place of these)

I have an image showing the differences.

http://subdigital.zapto.org/imgshare/ie_firefox_diff.gif

Here's the html (with some minor php embedded):




<?php

//includes
include("inc/application.inc.php");
include("inc/functions.inc.php");
include("inc/db.inc.php");

?>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional //EN" >
<html>
<head>
<title>template</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" >
<link href="styles.css" rel="stylesheet" type="text/css" >
</head>
<body style="background-color:RoyalBlue; margin-top:0; margin-left:0;">
<!-- ImageReady Slices (template.psd) -->

<table width="100%" style="background-color: RoyalBlue;" cellspacing="0" cellpadding="1">
<tr>
<td style="width:auto"></td>
<td style="background-color:#333333;" align="center" width="803">
<table id="Table_01" bgcolor="#FFFFFF" width="801" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="2" rowspan="2" style="height:33px; width: 86px;">
<img src="images/header_background.gif" width="86" height="33" alt=""></td>
<td colspan="3">
<img src="images/header_background-03.gif" width="85" height="16" alt=""></td>
<td colspan="2" rowspan="2">
<img src="images/header_background-04.gif" width="86" height="33" alt=""></td>
<td rowspan="3">
<img src="images/header_background-05.gif" width="101" height="60" alt=""></td>
<td rowspan="3">
<img src="images/header_background-06.gif" width="6" height="60" alt=""></td>
<td rowspan="3">
<img src="images/header_background-07.gif" width="101" height="60" alt=""></td>
<td rowspan="3">
<img src="images/header_background-08.gif" width="6" height="60" alt=""></td>
<td rowspan="3">
<img src="images/header_background-09.gif" width="101" height="60" alt=""></td>
<td rowspan="3">
<img src="images/header_background-10.gif" width="6" height="60" alt=""></td>
<td rowspan="3">
<img src="images/header_background-11.gif" width="101" height="60" alt=""></td>
<td colspan="3" rowspan="3">
<img src="images/header_background-12.gif" width="121" height="60" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="16" alt=""></td>
</tr>
<tr>
<td>
<img src="images/header_background-13.gif" width="21" height="17" alt=""></td>
<td>
<a href="index.php"><img src="images/logo2.gif" width="49" height="17" border=0 alt=""></a></td>
<td>
<img src="images/header_background-15.gif" width="15" height="17" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="17" alt=""></td>
</tr>
<tr>
<td rowspan="2">
<img src="images/header_background-16.gif" width="25" height="37" alt=""></td>
<td colspan="5" rowspan="2">
<a href="index.php"><img src="images/logo1.gif" border=0 width="217" height="37" alt=""></a></td>
<td rowspan="2">
<img src="images/header_background-18.gif" width="15" height="37" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="27" alt=""></td>
</tr>
<tr>
<td rowspan="2" align="center" valign="middle" style="background-image:url(<?php getImage('AboutUs'); ?>);">
<?php getTabLink('AboutUs'); ?>
<td rowspan="2">
<img src="images/header_background-20.gif" width="6" height="33" alt=""></td>
<td rowspan="2" align="center" valign="middle" style="background-image:url(<?php getImage('Communities'); ?>);">
<?php getTabLink('Communities'); ?>
</td>
<td rowspan="2">
<img src="images/header_background-22.gif" width="6" height="33" alt=""></td>
<td rowspan="2" align="center" valign="middle" style="background-image:url(<?php getImage('Properties'); ?>);">
<?php getTabLink('Properties'); ?>
</td>
<td rowspan="2">
<img src="images/header_background-24.gif" width="6" height="33" alt=""></td>
<td rowspan="2" align="center" valign="middle" style="background-image:url(<?php getImage('ContactUs'); ?>);">
<?php getTabLink('ContactUs'); ?>
</td>
<td rowspan="2">
<img src="images/header_background-26.gif" width="6" height="33" alt=""></td>
<td rowspan="2" align="center" valign="middle" style="background-image:url(<?php getImage('Legal'); ?>);">
<?php getTabLink('Legal'); ?>
</td>
<td rowspan="2">
<img src="images/header_background-28.gif" width="14" height="33" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="10" alt=""></td>
</tr>
<tr>
<td colspan="2" rowspan="2">
<img src="images/header_background-29.gif" width="86" height="28" alt=""></td>
<td colspan="3" rowspan="2">
<img src="images/header_background-30.gif" width="85" height="28" alt=""></td>
<td colspan="2" rowspan="2">
<img src="images/header_background-31.gif" width="86" height="28" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="23" alt=""></td>
</tr>
<tr>
<td>
<img src="images/index_31.gif" width="101" height="5" alt=""></td>
<td>
<img src="images/index_32.gif" width="6" height="5" alt=""></td>
<td>
<img src="images/index_33.gif" width="101" height="5" alt=""></td>
<td>
<img src="images/index_34.gif" width="6" height="5" alt=""></td>
<td>
<img src="images/index_35.gif" width="101" height="5" alt=""></td>
<td>
<img src="images/index_36.gif" width="6" height="5" alt=""></td>
<td>
<img src="images/index_37.gif" width="101" height="5" alt=""></td>
<td colspan="3">
<img src="images/index_38.gif" width="121" height="5" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="5" alt=""></td>
</tr>
<tr>
<td colspan="18" height=502 width=800 align="center" valign="top">
<Table border=0 style="height:90%;" width="98%">
<tr>
<td>

<!-- main page body -->
<?php

if(isset($_GET['s']))
{
switch($_GET['s'])
{
case "AboutUs": include("aboutus.php"); break;
case "Communities": include("subdivisions.php"); break;
case "ContactUs": include("contact.php"); break;
case "Legal": include("legal.php"); break;
default:
include("titlepage.php"); //if the section is malformed
}
}
else
include("titlepage.php"); //if there is no section given

?>
</td>
</tr>
</Table>

<!-- end of main page body -->
</td>
</tr>
<tr>
<td>
<img src="images/spacer.gif" width="25" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="61" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="21" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="49" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="15" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="71" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="15" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="101" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="6" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="101" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="6" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="101" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="6" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="101" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="6" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="101" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="14" height="1" alt=""></td>
<td></td>
</tr>
<tr>
<td colspan="18">
<hr size="1" style="color:#CCCCCC">
</td>
</tr>
<tr>
<td colspan="18" align="center" class="bodytext"><b></b>
</td>
</tr>
</table>
</td>
<td style="width:auto;"></td>
</tr>
</table>
<!-- End ImageReady Slices -->
</body>
</html>


This has been a major thorn in my side for the past few days, I would love a 2nd (or third/fouth) pair of eyes on the html to help me pinpoint it.

Thanks a bunch.

_Aerospace_Eng_
03-22-2005, 05:43 AM
do you have a link anywhere? the problem could reside in the css but it would help to see the problem in action

subdigital
03-22-2005, 06:44 AM
live example (http://test.bdrealty.com)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum