CSSisyphus Posted July 29, 2009 Share Posted July 29, 2009 Good day.I'm wrestling a quirk with the latest FF; and just need a wee bit of assistance to "get over the hump."I'm having a spot of trouble getting FF 3+ to recognize the conventional HTML <table width="100%"> and <td width="N%"> tag specs, and was wondering if there was a standard, straightforward CSS solution which would be recoginzed by FF 2+ and IE 6+.For the record, all works well for FF 2.x and IE with the conventional markup. I knew that I was in trouble here when giving the <td> element a class tag and calling it out in the stylesheet (td.classname) wouldn't allow me to set attributes for the element.Any help is appreciated.Thank you. Link to comment Share on other sites More sharing options...
dsonesuk Posted July 29, 2009 Share Posted July 29, 2009 could you supply code, there should not be a problem setting table width in FF or IE, so there may a conflict in the css and html that is causing the problem. Link to comment Share on other sites More sharing options...
CSSisyphus Posted July 29, 2009 Author Share Posted July 29, 2009 @dsonesuk:Thanks for helping out here.Here's the table setup which is giving me grief: <table width="100%" CELLSPACING="5" CELLPADDING="15" BORDER="0"><tr><td valign=top width=10%><H2>News</H2><br>some content</td><td valign=top width=80%><div id="AJAXtext" align="justify"></div></td><td valign=top width=10%><H2>Other</H2><br>some content</td></tr></table> "AJAXtext" is the center table data div to which is fed changing text content via an external AJAX script.In FF 2.x and IE 6 the "AJAXtext" td region remains stable between these dynamic updates. In FF 3+ the "AJAXtext" td region temporarily collapses widthwise during transition from one text content change to the next; dragging the rightside td along with it...No (working) CSS is currently provided in/for this table.Any ideas?Thanks again. Link to comment Share on other sites More sharing options...
Ingolme Posted July 29, 2009 Share Posted July 29, 2009 Try putting quotation marks around your table cell attributes. Link to comment Share on other sites More sharing options...
dsonesuk Posted July 29, 2009 Share Posted July 29, 2009 sorry have not got FF2.x to test, but there should not be a problem.<html><head><title>Untitled Document</title><script type="text/javascript">/*<![CDATA[*//*---->*//*--*//*]]>*/</script> <style type="text/css">.table1 { width: 100%; border: 0px solid #000;}.table1 td { border: 0px solid #000; vertical-align:top;}.table1 td.left, .table1 td.right{width: 10%; border: 0px solid #000;}.table1 td.middle {width: 80%;} #AJAXtext {text-align:justify;}</style></head><body><table class="table1" cellspacing="5" cellpadding="15"><tr><td class="left"><h2>News</h2><br />some content</td><td class="middle"><div id="AJAXtext">Â </div></td><td class="right"><h2>Other</h2><br />some content</td></tr></table></body></html> Link to comment Share on other sites More sharing options...
CSSisyphus Posted July 29, 2009 Author Share Posted July 29, 2009 @Ingolme:Thanks for the tip. Tried that; no soap . . .@dsonesuk:Thanks for the codeblock. I'll give it a whirl and report back.BTW -- what is <script type="text/javascript">/*<![CDATA[*//*---->*//*--*//*]]>*/</script> ????Thanks again . . . Link to comment Share on other sites More sharing options...
dsonesuk Posted July 29, 2009 Share Posted July 29, 2009 JavaScript and CDATA checkout http://www.giantisland.com/Resources/JavaS..._and_CDATA.aspx Link to comment Share on other sites More sharing options...
CSSisyphus Posted July 29, 2009 Author Share Posted July 29, 2009 @dsonesuk:Thanks for the JS/CDATA link :)Just took your CSS and modified HTML over to my "crash test dummy" for a spin.Results are the same as with the original markup: The middle section still collapses on FF 3+.This is all well-formed code: What's happening here???Thanks again -- Link to comment Share on other sites More sharing options...
Ingolme Posted July 29, 2009 Share Posted July 29, 2009 How is the content being changed? Are you clearing the content before updating it? Link to comment Share on other sites More sharing options...
dsonesuk Posted July 29, 2009 Share Posted July 29, 2009 is it possible to get all the coding, it looks as though something is changing width or creating/removing some cell (tr or td) that interferes with the tables setup? Link to comment Share on other sites More sharing options...
CSSisyphus Posted July 29, 2009 Author Share Posted July 29, 2009 @Ingolme:I don't think that clearing before load is the problem; as this issue is in evidence from fresh loadup BEFORE any other content has found its way into the div; and even if the ajax feed is completely disabled...Thanks again @dsonesuk:The neat code example (unadapted) which you've posted here does indeed seem to work properly in the offending browser. Hmmmm...I'm working on this problem between two systems right now -- I'll try to dig out the worm and get back as soon as I know something. Link to comment Share on other sites More sharing options...
CSSisyphus Posted July 29, 2009 Author Share Posted July 29, 2009 @dsonesuk:I've isolated the problem --Here's the code which doesn't work in FF 3+: <html><head><title>Untitled Document</title><script type="text/javascript">/*<![CDATA[*//*---->*//*--*//*]]>*/</script><style type="text/css">.table1 { width: 100%; border: 0px solid #000;}.table1 td { border: 0px solid #000; vertical-align:top;}.table1 td.left, .table1 td.right{width: 10%; border: 0px solid #000;}.table1 td.middle {width: 80%;}#AJAXtext {text-align:justify;}#wrapper { position: absolute;}</style></head><body><div id="wrapper"><table class="table1" cellspacing="5" cellpadding="15"><tr><td class="left"><h2>News</h2><br />some content</td><td class="middle"><div id="AJAXtext">Â </div></td><td class="right"><h2>Other</h2><br />some content</td></tr></table></div></body></html> Now, the question is why does my call to "position: absolute;" for the wrapper div break your page's table in FF 3+ and nowhere else Thanks again for all of your help Link to comment Share on other sites More sharing options...
dsonesuk Posted July 29, 2009 Share Posted July 29, 2009 you are using position: absolute, and have not supplied a width for wrapper, so it shrinks to the smallest value it can compress the table to with its content.table shrinks with in div with "position:absolute" using position relative; causes it to expand to full width. Link to comment Share on other sites More sharing options...
CSSisyphus Posted July 29, 2009 Author Share Posted July 29, 2009 @dsonesuk:Thanks again.min-width still allows the problem to exist: min-width: 780px; ???Position: relative helps FF3+; but now min-width: 780px; is not honored by IE!Aaaaaaah!!!(I seem to remember a biblical story about this type of confusion) Thanks again for going 'round with me here . . . Link to comment Share on other sites More sharing options...
dsonesuk Posted July 29, 2009 Share Posted July 29, 2009 try using width: 98%; (absolute) for #wrapper as 100% expands it to far for FF,O,Chrome, and you get scrollbar at bottom.use below for IE (note not checked in IE8) BELOW css styling.<!--[if IE]><link rel="stylesheet" type="text/css" media="screen" href="resources/css/ie7.css" /><style type="text/css">#wrapper { width: 100%;}</style><![endif]-->tried in FF3.0.12, IE6 & 7, Chrome, and Opera Link to comment Share on other sites More sharing options...
CSSisyphus Posted July 30, 2009 Author Share Posted July 30, 2009 @dsonesuk:Thanks again for the help and testing through this bug/problem with me. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.