Tables and Internet Explorer

marcphisto

Hi all,

I am having a bit of trouble with some html code and it's frustrating the hell out of me.

Basically I have to make changes to this site that uses a whole load of tables for layout. The CMS is quite complicated and unnecessarily awkward but I can do nothing about that.

My problem is this. I am trying to line up elements in separate table cells (I didn't create the design) and everything lines up perfectly in Firefox and Opera but refuses to budge in IE. I have tried loads of different things but cannot get it to work in any way shape or form in IE.

The HTML/PHP code is

[php]
//////////////////////////////////////////////////////////////////////////
// hoist gear table
//
$sql = "SELECT `hoistpower` , `hoistgears` , `powersettings` , `numfalls` , `gearkg` , `gearmpersec` , `4powersettings` , `4gearkg` , `4gearmpersec`
FROM `cranegears`
WHERE id=$crane";
$result = mysql_query($sql) or die( mysql_error() );
$row = mysql_fetch_array($result);

$i=0;$j=0; //counters for

$numpowersettings = $row;
$numhoistgears = $row;
$numfalls = $row;

$hgwidth = '100';
$fallswidth = '30';
$gearwidth = '30';
$kgwidth = '150';
$mminwidth = '70';

if ( $numfalls == '4' )
{
$nfalls = "2/4";
$width = "630";
//$width2 = "480";
$width2 = $gearwidth + ($kgwidth * 2) + ($mminwidth * 2) + 20;

$geartable = "
<td width=\"$kgwidth\" class=\"blacktext\" style=\"text-align:center; border-bottom:1px solid #000000\">Kg</td>
<td width=\"$mminwidth\" class=\"blacktext\" style=\"text-align:center; border-bottom:1px solid #000000\">M/Min</td>
<td width=\"$kgwidth\" class=\"blacktext\" style=\"text-align:center; border-bottom:1px solid #000000\">Kg</td>
<td width=\"$mminwidth\" class=\"blacktext\" style=\"text-align:center; border-bottom:1px solid #000000\">M/Min</td>
</tr>

<tr><td colspan=\"7\">
";
}
else
{
$nfalls = "2";
$width = "550";
$width2 = $gearwidth + $kgwidth + $mminwidth;
$geartable = "
<td width=\"$kgwidth\" class=\"blacktext\" style=\"text-align:center; border-bottom:1px solid #000000\">Kg</td>
<td width=\"$mminwidth\" class=\"blacktext\" style=\"text-align:center; border-bottom:1px solid #000000\">M/Min</td>
</tr>

<tr><td colspan=\"5\">
";
}

// echo "hg $hgwidth f $fallswidth g $gearwidth kg $kgwidth mm $mminwidth w $width w2 $width2";

$powersettings = explode( '***' , $row );
$gearkg = explode( '***' , $row );
$gearmpersec = explode( '***' , $row );

$powersettings4 = explode( '***' , $row );
$gearkg4 = explode( '***' , $row );
$gearmpersec4 = explode( '***' , $row );

// print $powersettings[$i];
// print $numpowersetttings . "asd";

$hoistgear = "
<table width=\"$width\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\">
<tr>
<td width=\"$hgwidth\" class=\"blacktitle\" style=\"text-align:center; border-bottom:1px solid #000000\">Hoist Gear <br>(Kw)</td>
<td width=\"$fallswidth\" class=\"blacktext\" style=\"text-align:center; border-bottom:1px solid #000000\">Falls</td>
<td width=\"$gearwidth\" class=\"blacktext\" style=\"text-align:center; border-bottom:1px solid #000000\">Gear</td>
$geartable
";

for( $i=0; $i < $numpowersettings; $i++ )
{
$hoistgear .= "
<table border=\"0\" width=\"$width\" cellpadding=\"0\" cellspacing=\"0\">
<tr>
<td width=\"$hgwidth\" style=\"border-bottom:1px solid #dddddd\" valign=\"top\" class=\"blacktext\" align=\"center\"> $powersettings[$i]</td>
<td width=\"$fallswidth\" style=\"border-bottom:1px solid #dddddd\" valign=\"top\" class=\"blacktext\" align=\"center\"> $nfalls</td>
<td width=\"$width2\" style=\"border-bottom:1px solid #dddddd\" align=\"right\">";


if ( $numfalls == '4' )
{

for ( $j=0; $j<$numhoistgears; $j++ )
{
$temp = ($i * $numhoistgears) + $j;
$g = $j+1;
if ($gearkg[temp] == " ") { $gearkg[temp] = "_"; }
if ($gearkg4[temp] == " ") { $gearkg4[temp] = "_"; }
$hoistgear .= "
<table width=\"100%\" cellpadding=\"0\" cellspacing=\"0\" border=\"1\">
<tr>
<td width=\"$gearwidth\" class=\"blacktext\" align=\"center\">$g</td>
<td width=\"$kgwidth\" class=\"blacktext\" align=\"center\">$gearkg[$temp]</td>
<td width=\"$mminwidth\" class=\"blacktext\" align=\"center\">$gearmpersec[$temp]</td>
<td width=\"$kgwidth\" class=\"blacktext\" align=\"center\">$gearkg4[$temp]</td>
<td width=\"$mminwidth\" class=\"blacktext\" align=\"center\">$gearmpersec4[$temp]</td>
</tr>
</table>
";
}// end for
}// end if
else
{
for ( $j=0; $j<$numhoistgears; $j++ )
{
$temp = ($i * $numhoistgears) + $j;
$g = $j+1;
if ($gearkg[temp] == " ") { $gearkg[temp] = "_"; }
if ($gearkg4[temp] == " ") { $gearkg4[temp] = "_"; }
$hoistgear .= "
<table width=\"100%\" cellpadding=\"0\" cellspacing=\"0\" border=\"1\">
<tr>
<td width=\"$gearwidth\" class=\"blacktext\" align=\"center\">$g</td>
<td width=\"$kgwidth\" class=\"blacktext\" align=\"center\">$gearkg[$temp]</td>
<td width=\"$mminwidth\" class=\"blacktext\" align=\"center\">$gearmpersec[$temp]</td>
</tr>
</table>
";
}// end for
}// end else

$hoistgear .= "
</td>
</tr>
</table>
";
}

$hoistgear .= "
</td>
</tr>
</table>
";

?>


<html>
<head>
<!--<link rel="stylesheet" type="text/css" href="css/style.css">-->

<style>
.t
{
font-family:verdana;
font-size:9px;
border-right:1px solid #999999;
border-bottom:1px solid #999999;
text-align:center;
}
.tb
{
font-family:verdana;
font-size:9px;
border-right:1px solid #999999;
border-bottom:1px solid #999999;
font-weight:bold;
text-align:center;
}
</style>

</head>
<body style="margin:0px;">

<!--
<script type='text/javascript'>
function Go(){return}
</script>
<script type='text/javascript' src='js/exmplmenu_var.js'></script>
<script type='text/javascript' src='js/menu_com.js'></script>
-->
<table border="0" cellpadding="0" cellspacing="0" width="779" bgcolor="#ffffff">
<tr>
<td><img src="images/logo.gif" width="779" height="68" alt="Irish crane and lifting logo"></td>
</tr>
</table>

<table border="0" cellpadding="0" cellspacing="0" width="779" bgcolor="#000000">
<tr>
<td height="20"> </td>
</tr>
</table>
<br>

<table cellpadding="0" cellspacing="0" border="0" style="border:1px solid #666666">
<tr><td><?=$resultlist?><br><br></td></tr>
</table>
<br>

<table cellpadding="0" cellspacing="0" border="0" style="border:1px solid #666666">
<tr><td><?=$weight?><br><br></td></tr>
</table>
<br>

<table cellpadding="0" cellspacing="0" border="0" style="border:1px solid #666666">
<tr><td><?=$speeds?><br><br></td></tr>
</table>
<br>


<br style="page-break-before:always;">

<table border="0" cellpadding="0" cellspacing="0" width="779" bgcolor="#ffffff">
<tr>
<td><img src="images/logo.gif" width="779" height="68" alt="Irish crane and lifting logo"></td>
</tr>
</table>

<table border="0" cellpadding="0" cellspacing="0" width="779" bgcolor="#000000">
<tr>
<td height="20"> </td>
</tr>
</table>
<br>

<table width="550" cellpadding="0" cellspacing="0" border="0" style="border:1px solid #666666">
<tr>
<?=$heading?>
</tr>
</table>


<table width="550" cellpadding="0" cellspacing="0" border="0" style="border:1px solid #666666">
<tr>
<td>
<?=$hoistgear?>
</td>
</tr>
</table>
<br><br>

<table width="550" cellpadding="0" cellspacing="0" border="0" style="border:0px solid #666666">
<tr><td>For the Radius and Capacity Tables click <a href="datasheet2.php?crane=<?=$crane?>">here</a>.<br><br></td></tr>
</table>
<br><br><br><br>

</body>
</html>
[/php]

to view try this url

http://irishcranes.com/new-2-datasheet.php?crane=81

Like I said this has my head wrecked so if anyone has any ideas/suggestions they would be most appreciated.

Ph3n0m

first of all - it looks the exact same in Firefox as it does in IE

Look at the attachments

So what exactly do you need?

marcphisto

Forgive me I haven't explained myself properly.

If you look at the table which has a border on it. It appears under the headings Gear Kg M/Min

in Firefox this table fills out so that it lines up nicely under the headings. Whereas in Internet Explorer as you can see from the attachments it doesn't.

I have tried a variety of hacks and tricks but no matter what I do the table doesn't move in IE.

If I make changes they are visible in Firefox. All I want to do is make the table line up as it does in Firefox. Should be simple (and may well still be) but has me stumped

Ph3n0m

the problem is you have too many tables within tables, and its seems to be centered around the hoistgear part of the php output.

You basically need to visualise the last table with every element in its own cell rather then a colspan and then another table

Hoistgear needs to be changed from multiple tables to a single table that will do the following


Hoist
Gear
(Kw) Falls Gear Kg M/Min
37.5 2 1 10000 1.1/16.0
2 3200 3.3/50.0


etc

smeggle

i.e. box model problem? suppose you've tried using the tan hack in your css? opera/firefox will ignore it but i.e. will act on it and correct the problem.
Use divs - far less hassle and far easier to control via your css.

marcphisto

thanks peeps,

I gave up trying to fix it and just rewrote it more or less as Ph3n0m suggested.