homepage Welcome to WebmasterWorld Guest from 54.196.206.80
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Subscribe to WebmasterWorld
Home / Forums Index / Browsers / Firefox Browser Usage and Support
Forum Library, Charter, Moderators: incrediBILL

Firefox Browser Usage and Support Forum

    
Firefox Viewing Problem.help needed
orlando web design




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

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]

 

orlando web design




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

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]

tedster




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

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.

rocknbil




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

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

orlando web design




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

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]

tedster




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

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.

kaled




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

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.

rocknbil




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

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.

orlando web design




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

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

tedster




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

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?

orlando web design




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

@ Tedster I'm using IE 8 to test.

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

tedster




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

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.

orlando web design




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

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]

orlando web design




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

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

orlando web design




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

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

tedster




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

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.

orlando web design




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

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.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Browsers / Firefox Browser Usage and Support
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About
© Webmaster World 1996-2014 all rights reserved