Forum Moderators: open
I'm building this webpage for a client who only wants tables (no CSS boo!) and I cannot get this page to view correctly in Firefox but it looks fine in IE & Chrome.
[no urls please]
If I adjust it to look fine in FF then it looks incorrect in Chrome & IE..
Anyone has fix ideas? It's pretty simple code but I'm not a tables guy, only CSS.
Thanks in advance
[edited by: incrediBILL at 4:26 pm (utc) on Jan. 30, 2010]
[edit reason] removed URL, see TOS #13 [webmasterworld.com...] [/edit]
Ok code below:
<html>
<head>
<title>Example</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<div align="center">
<table id="Table_01" width="960" height="1201" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="11">
<img src="images/offeringpage2sliced_01.jpg" width="960" height="13" alt=""></td>
</tr>
<tr>
<td colspan="3" rowspan="2">
<img src="images/offeringpage2sliced_02.jpg" width="349" height="118" alt=""></td>
<td colspan="2"><a href="http://www.eduplex.org" target="_blank"><img src="images/offeringpage2sliced_03.jpg" alt="" width="226" height="80" border="0"></a></td>
<td colspan="6" rowspan="2">
<img src="images/offeringpage2sliced_04.jpg" width="385" height="118" alt=""></td>
</tr>
<tr>
<td colspan="2">
<img src="images/offeringpage2sliced_05.jpg" width="226" height="38" alt=""></td>
</tr>
<tr>
<td colspan="8">
<img src="images/offeringpage2sliced_06.jpg" width="923" height="58" alt=""></td>
<td colspan="3" rowspan="5">
<img src="images/offeringpage2sliced_07.jpg" width="37" height="606" alt=""></td>
</tr>
<tr>
<td colspan="2" rowspan="2">
<img src="images/offeringpage2sliced_08.jpg" width="54" height="357" alt=""></td>
<td bgcolor="#000066" td colspan="2">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="446" height="265" xcodebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0">
<param name="movie" value="http://eduplex.us/uploads/C2/Shack2Offer.swf" />
<param name="loop" value="false" /><param name="quality" value="high" />
<param name="wmode" value="transparent" />
<embed src="http://example.org/uploads/C2/Shack2Offer.swf" width="446" height="265" wmode="transparent" quality="high" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object></td>
<td colspan="4" rowspan="2">
<img src="images/offeringpage2sliced_10.jpg" width="423" height="357" alt=""></td>
</tr>
<tr>
<td colspan="2">
<img src="images/offeringpage2sliced_11.jpg" width="446" height="91" alt=""></td>
</tr>
<tr>
<td colspan="8">
<img src="images/offeringpage2sliced_12.jpg" width="923" height="27" alt=""></td>
</tr>
<tr>
<td rowspan="5">
<img src="images/offeringpage2sliced_13.jpg" width="39" height="627" alt=""></td>
<td colspan="7">
<img src="images/offeringpage2sliced_14.jpg" width="884" height="164" alt=""></td>
</tr>
<tr>
<td colspan="5" rowspan="2">
<img src="images/offeringpage2sliced_15.jpg" width="622" height="207" alt=""></td>
<td bgcolor="#000066">
<form onSubmit="return emailCheck(this.email.value)" method="post" name="emailform" action="thanks.aspx">
<table cellspacing="0" cellpadding="2" width="34%">
<tr>
<td width="59"> </td>
<td width="160"> </td>
</tr>
<tr>
<td style="width: 59px; font-family: Verdana; color: #ffffff; font-size: 10pt; font-weight: bold" align="right">Name: </td>
<td><input style="width: 160px" id="Text1" maxlength="50" name="name" autocomplete="OFF" type="text" /> </td>
</tr>
<tr>
<td style="width: 59px; font-family: Verdana; color: #ffffff; font-size: 10pt; font-weight: bold" align="right">Email: </td>
<td><input style="width: 160px" id="Text2" maxlength="50" name="email" autocomplete="OFF" type="text" /> </td>
</tr>
<tr>
<td> </td>
<td align="right"><input style="border-bottom: #ffffff 1px solid; border-left: #ffffff 1px solid; background-color: #676767; color: #ffffff; border-top: #ffffff 1px solid; border-right: #ffffff 1px solid" id="Submit1" value="Submit" type="submit" /> </td>
</tr>
<tr>
<td style="font-family: Verdana; color: #ffffff; font-size: 10pt; font-weight: bold" colspan="2" align="center"><span style="font-size: 6pt"> </span> <br />
<span style="font-weight: normal">For your free preview video & <br />
Audiocast, please fill out form </span> </td>
</tr>
</table>
<input value="2" type="hidden" name="CPID" /> <input value="1" type="hidden" name="ESCode" /> <input value="home" type="hidden" name="tv" />
</form>
<td colspan="3" rowspan="2">
<img src="images/offeringpage2sliced_17.jpg" width="37" height="207" alt=""></td>
<td rowspan="4">
<img src="images/offeringpage2sliced_18.jpg" width="34" height="463" alt=""></td>
</tr>
<tr>
<td><a href="http://example.org/offers/privacy.html" target="_blank"><img src="images/offeringpage2sliced_19.jpg" alt="" width="228" height="26" border="0"></a></td>
</tr>
<tr>
<td colspan="8">
<img src="images/offeringpage2sliced_20.gif" width="886" height="132" alt=""></td>
<td rowspan="2">
<img src="images/offeringpage2sliced_21.jpg" width="1" height="256" alt=""></td>
</tr>
<tr>
<td colspan="8">
<img src="images/offeringpage2sliced_22.jpg" width="886" height="124" alt=""></td>
</tr>
<tr>
<td>
<img src="images/spacer.gif" width="39" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="15" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="295" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="151" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="75" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="86" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="228" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="34" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="2" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="34" height="1" alt=""></td>
</tr>
</table>
</div>
</body>
</html>
[edited by: tedster at 6:35 pm (utc) on Jan. 30, 2010]
[edit reason] replaced domains in code with 'example' [/edit]
1) Sometimes the easiest way to debug a table layout is to temporarily set border="1" so you can see where the various table cells are being drawn.
2) Another useful approach to debugging any cross-browser problems is to make sure the mark-up validates first: W3C Validator - HTML [validator.w3.org]
If you try to fix a cross-browser display issue when there is invalid code, you may have an impossible job.
This is also most likely why you're not seeing the same things, no doctype or an invalid or half doctype throws the document into Quirks Mode as opposed to Standards Compliance Mode. In quirks mode, many CSS selectors and other things will fail. Often, without knowledge of S.C.M., developers will apply hacks and browser conditionals to get it to appear the same, when complete validation will negate the need for that.
Choosing the Best Doctype For Your Site [webmasterworld.com] will help you grok the concept, but a said, judging by your code, 4+ or 5 full doctype will work fine.
who only wants tables (no CSS boo!)
Well, you have CSS there - and you can move it into an external CSS file to clean house a bit to get rid of the inline white noise - but I'm sure you mean they want, for whatever whacko reason, tabled layout and not table-less layout. Tabled layout and CSS are not exclusive of each other.
Your client needs a bit of an education on document semantics and what tables are really for . . .
At any rate, welcome aboard. :-)
I ran through the W3c validator and most of the errors are due to the clients asp.net code. This page will become an aspx page but Im building it in html until they convert it.
I added <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> doc type to the top but it didnt fix anything.
I would attach screenshots but I can't do that here. Can't post a url so I can't really show you what's happening.
I cannot use an external stylesheet as the client has asked not so, something to do with his asp.net database.
The main problem I'm having is tables not aligning in FF correctly and there adding 2 white lines in the middle of the pages.
Thanks in advance for your help.
[edited by: tedster at 9:53 pm (utc) on Jan. 30, 2010]
[edit reason] No domain names - no hints! [/edit]
Getting tables to stay "rigidly" in place cross-browser can be very challenging. Every element needs to be pixel perfect in every dimension in the box model, with absolutely nothing left to the browser's discretion.
The first thing I'd do is write in strict HTML - not transitional. The next thing I would prefer to do is set all padding and margins to zero first. Then overwrite those zeroes by using the cascade to fix each element's padding and margins to the exact pixels you need. That's because different browsers can use different default values.
That approach is a whole lot easier with an external stylesheet, but if you must use only inline styles, then add an explicit style declaration for margin and padding to each and every element.
You need to create the simplest possible code that is problematic - you can then experiment and hopefully find a solution even if you can't find the cause.
Kaled.
I added <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> doc type to the top but it didnt fix anything.
Please see previous link to choosing doctypes - it didn't change anything because this is what's known as a half doctype and is still in quirks mode.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
didn't change anything...strict made it worse.
@Tedster... I'm not sure if the form table is causing the 2nd white line to appear. I've tried changing it but nothing seems to work.
Kaled: I've tried many approaches, when I change the code to make FF view correctly, it isn't right in IE & Chrome. Any advice?
Thanks to all.
Most of the time it's Firefox that works to W3C standards and you'll get best cross-browser results by starting in a standards compliant browser. Since you've spotted the tweak you need to make things look right in Firefox, let us know what it is and we might see a way to get IE to listen, too. By the way - what version of IE are you testing with?
[edited by: tedster at 5:27 pm (utc) on Jan. 31, 2010]
If you are testing online with IE8, an understanding of Compatiblity View [webmasterworld.com] may also be valuable for you.
A little more info:
I have figured out that it is the size of the flash object that is causing one of the white lines to appear
the code is:
<td bgcolor="#000066" colspan="2" margin="0px">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="446" height="259" style="padding="0px" margin="0px"
xcodebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0">
<param name="movie" value="http://eduplex.us/uploads/C1/Shack1Offer.swf" />
<param name="loop" value="false"/><param name="quality" value="high" />
<param name="wmode" value="transparent" />
<embed src="http://example.com/uploads/C1/Shack1Offer.swf" width="446" height="259" wmode="transparent" quality="high" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
</td>
When I adjust the height to 254 px in height instead of 259px, it views fine in FF but it too short in IE & Chrome. 259px is the height the flash object is supposed to be.
[edited by: tedster at 8:16 pm (utc) on Jan. 31, 2010]
[edit reason] switched to example.com [/edit]
The 2nd line doesn't seem to want to play ball though
arrrrgh
I still think your challenge may be a mix of quirks coding and standards code across the page. I also noticed that you are using some xhtml tag closings on an html doctype.
You may also want to have IE Conditional Comments [msdn.microsoft.com] in your tool kit - although I can't imagine you should need that in this case.
