Welcome to WebmasterWorld Guest from 184.73.126.70

Forum Moderators: incrediBILL

Message Too Old, No Replies

Firefox Viewing Problem.help needed

   
4:21 pm on Jan 30, 2010 (gmt 0)

5+ Year Member



Hi all..

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]

4:30 pm on Jan 30, 2010 (gmt 0)

5+ Year Member



umm no url's?

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">&nbsp; </td>
<td width="160">&nbsp; </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>&nbsp; </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">&nbsp;&nbsp;</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]

6:42 pm on Jan 30, 2010 (gmt 0)

WebmasterWorld Senior Member tedster is a WebmasterWorld Top Contributor of All Time 10+ Year Member



Please tell us what is happening differently when viewed in Firefox.

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.

7:03 pm on Jan 30, 2010 (gmt 0)

WebmasterWorld Senior Member rocknbil is a WebmasterWorld Top Contributor of All Time 10+ Year Member



^ ^ Agreed - and right off the bat, it will fail without a proper doctype declaration - looks like you can easily use HTML4.01 strict or transitional, or html 5.

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. :-)

7:30 pm on Jan 30, 2010 (gmt 0)

5+ Year Member



Thanks for the input...

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]

10:05 pm on Jan 30, 2010 (gmt 0)

WebmasterWorld Senior Member tedster is a WebmasterWorld Top Contributor of All Time 10+ Year Member



The code you posted has two tables - the visible form inputs are in one table, and that table is nested within a layout table for the page. Are these aligning differently in different browsers?

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.

11:53 pm on Jan 30, 2010 (gmt 0)

WebmasterWorld Senior Member kaled is a WebmasterWorld Top Contributor of All Time 10+ Year Member



There is one absolute golden rule for all problems where code behaves unexpectedly - simplify it.

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.

3:19 am on Jan 31, 2010 (gmt 0)

WebmasterWorld Senior Member rocknbil is a WebmasterWorld Top Contributor of All Time 10+ Year Member



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.

3:48 am on Jan 31, 2010 (gmt 0)

5+ Year Member



@rocknbil I added:

<!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.

4:27 am on Jan 31, 2010 (gmt 0)

WebmasterWorld Senior Member tedster is a WebmasterWorld Top Contributor of All Time 10+ Year Member



What change makes Firefox view correctly?

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?

5:24 pm on Jan 31, 2010 (gmt 0)

5+ Year Member



@ Tedster I'm using IE 8 to test.

[edited by: tedster at 5:27 pm (utc) on Jan. 31, 2010]

5:56 pm on Jan 31, 2010 (gmt 0)

WebmasterWorld Senior Member tedster is a WebmasterWorld Top Contributor of All Time 10+ Year Member



It sounds more and more like a standards issue, especially the white line, which I assume shows between two table cells. I'd suggest learning more about Quirks Mode versus Standards Mode [webmasterworld.com] which is often at the root of such problems.

If you are testing online with IE8, an understanding of Compatiblity View [webmasterworld.com] may also be valuable for you.

6:05 pm on Jan 31, 2010 (gmt 0)

5+ Year Member



tedster...

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]

7:22 pm on Jan 31, 2010 (gmt 0)

5+ Year Member



I managed to fix the first issue by setting a style within the table and use <style="padding-top:-1px;>

The 2nd line doesn't seem to want to play ball though

7:31 pm on Jan 31, 2010 (gmt 0)

5+ Year Member



I take that back, adding the padding code fixed it in FF & IE8 & Chroms, but in IE 5,6,7 the same white line appears

arrrrgh

8:25 pm on Jan 31, 2010 (gmt 0)

WebmasterWorld Senior Member tedster is a WebmasterWorld Top Contributor of All Time 10+ Year Member



OK, it sounds like your hot on the trail. It sounds like something is forcing a table cell to be slightly larger than the Flash object it contains, and so a white background is showing through. Could you fix the cross-browser look of the page simply by declaring a background color for the table cell that matches?

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.

8:45 pm on Jan 31, 2010 (gmt 0)

5+ Year Member



Good idea in theory except the table sits over another table which has an image rather than a solid background color.

I guess I'm not really clear on the difference between quirks "coding" and standards. I tried using the strict doc type (full) but this made the page layout look worse.