PDA

View Full Version : YAHOO.ext.BorderLayout problems with FF 2.0 & IE 6?



zzo
7 Dec 2006, 2:30 PM
First - THANKS for all the great work.

The exact same code works in Safari & FF 1.5.x (on Mac 10.4) & just gives a blue background (using your CSS) on FF 2.x (on Mac & Windows) & IE.
It complains about a </table> tag without a <tr> or something like that.



var layout = new YAHOO.ext.BorderLayout(
document.body,
{
west: {
split: true,
initialSize: 150,
titlebar: true,
collapsible: true,
minSize: 100,
maxSize: 200
},
center: {
autoScroll: true
}
}
);

layout.beginUpdate();
layout.add('west',
new YAHOO.ext.ContentPanel('nav',
{title: 'Navigation', fitToFrame:true, closable:false}));
layout.add('center', new YAHOO.ext.ContentPanel('content'));
layout.endUpdate();
},
...
YAHOO.ext.EventManager.onDocumentReady(YAHOO.top.Layout.init, YAHOO.top.Layout, true);



I get the same behavior with RC2 & RC3 yui-ext releases.
Is it just me?
thanks!!
Mark

jbowman
7 Dec 2006, 2:42 PM
can you post the whole page? I'm doing something similar and am having 0 problems. The only difference is I'm doing north, center, south.

zzo
7 Dec 2006, 3:25 PM
Oh the HTML:



<body>
<div id="container">
[% INCLUDE tickets/navigation %]
<div id="content" class="ylayout-inactive-content">
Loading tickets...
</div>
</div>

<script src="[% YUI_BASE_URL_PROD %][% YUI_UTILITIES %]"></script>
<script src="/js/yui-ext/yui-ext-debug.js"></script>
<script src="top_layout.js"></script>
<script src="top_controller.js"></script>
</body>
</html>


Here's the navigation page:



<div id="nav" class="ylayout-inactive-content">
<ul>
<a href="/tickets">Latest Tickets
<a href="/tb">Ticket Brower
<a href="/tb">Bulk
<a href="/radar">Radar
<a href="/actions">Create Ticket

<a href="http://gogogoggo">
User Guide
</a>

[/list]
</div>



There no <table> stuff anywhere in my HTML.
Pretty tame stuff & that's really all there is.

The top_layout.js code I pasted in my first post.
The controller stuff does some XMLHTTPRequest to update the layout but it doesn't get that far with FF 2.x & IE...

thanks,
Mark

jbowman
7 Dec 2006, 3:54 PM
Still not seeing anything that jumps out at me. One suggestion would be to view the page in firefox with firebug or the web developer extension installed. That way you can view the generated source and start trying to track down the problem in that.

You could also try including yui-ext.js, and see if there is a bug in the yui-ext-debug that needs to be addressed.

zzo
7 Dec 2006, 4:17 PM
same deal w/the non -debug version.
Guess I'll have to do some more serious debugging.
thanks,
Mark

tryanDLS
7 Dec 2006, 4:26 PM
Even tho your layout has no tables, it's possible that tables are rendered into the DOM to build the layout. You need to look at the generated HTML either with Firebug or something like the WebDeveloper extension which allows view generated source in addition to the generic view source.

I believe something was mentioned in a recent thread about FF conformance to the specs that dictated a change needs to be made to the table structure rendering.

jbowman
7 Dec 2006, 4:48 PM
So I took your source, and loaded it up. I think you're getting bad html from whatever it is you're loading into the center panel with the id 'content'.

Here's the full html generated by the script as you posted it. (with slight modifications for pointers to where I'm keeping javascript and css files). You'll find no tables in it at all. Thus, i really believe it's the content you're loading.

err my copy from firebug didn't grab the stuff in the head element, but really, that's not important (I just threw a style decleration in there for the yui-ext.css)



<html>
<head>
</head>
<body id="elgen-0" class="ylayout-container">
<div id="container"/>
<script src="/ci/js/build/yahoo/yahoo-min.js" type="text/javascript">
</script>
<script src="/ci/js/build/dom/dom-min.js" type="text/javascript">
</script>
<script src="/ci/js/build/event/event-min.js" type="text/javascript">
</script>
<script src="/ci/js/build/dragdrop/dragdrop-min.js" type="text/javascript">
</script>
<script src="/ci/js/build/animation/animation-min.js" type="text/javascript">
</script>
<script src="/ci/js/build/connection/connection-min.js" type="text/javascript">
</script>
<script src="/ci/js/build/container/container-min.js" type="text/javascript">
</script>
<script src="/ci/js/build/logger/logger-min.js" type="text/javascript">
</script>
<script src="/ci/js/cssquery.js" type="text/javascript">
</script>
<script src="/yui-ext/yui-ext.js" type="text/javascript">
</script>
<script type="text/javascript">
</script>
<div id="elgen-1" class="ylayout-panel ylayout-panel-west" style="left: 0px; visibility: visible; width: 148px; top: 0px; height: 381px;">
<div id="elgen-2" class="yunselectable ylayout-panel-hd ylayout-title-west" unselectable="on" style="display: block;">
<span class="yunselectable ylayout-panel-hd-text" unselectable="on">Navigation</span>
<div id="elgen-3" class="yunselectable ylayout-panel-hd-tools" unselectable="on">
<div id="elgen-4" class="ylayout-tools-button" style="display: none;">
<div class="ylayout-tools-button-inner ylayout-close"/>
</div>
<div id="elgen-6" class="ylayout-tools-button" style="visibility: visible;">
<div class="ylayout-tools-button-inner ylayout-collapse-west"/>
</div>
</div>
</div>
<div id="elgen-5" class="ylayout-panel-body" style="overflow: hidden; height: 359px; width: 148px;">
<div id="nav" class="ylayout-active-content" style="width: 148px; height: 359px;">
<ul>

Latest Tickets (/tickets)

<a href="/tickets"/>


<a href="/tb"/>


<a href="/tb"/>


<a href="/radar"/>


<a href="/actions"/>


[/list]
</div>
</div>
</div>
<div id="elgen-7" class="ylayout-collapsed ylayout-collapsed-west" style="visibility: hidden; left: -2000px; top: -2000px; width: 20px; height: 593px;">
<div class="ylayout-collapsed-tools">
<div id="elgen-8" class="ylayout-tools-button">
<div class="ylayout-tools-button-inner ylayout-expand-west"/>
</div>
</div>
</div>
<div id="elgen-1-split" class="ylayout-split ylayout-split-west ylayout-split-h" style="cursor: w-resize; left: 150px; top: 0px; visibility: visible; height: 383px;"/>
<div id="split-proxy9" style="position: absolute; visibility: hidden; z-index: 11001; background-color: rgb(170, 170, 170); cursor: w-resize; line-height: 0px; font-size: 0px;"/>
<div id="elgen-10" class="ylayout-panel ylayout-panel-center" style="left: 155px; top: 0px; width: 883px; height: 381px;">
</div>
</body>
</html>

zzo
7 Dec 2006, 4:57 PM
Thanks - as you can see initially the content of the 'contenet' div is just: Loading tickets... - & that doesn't even show up.
The content is changed after an XMLHTTPRequest call, but initially in the working browers I see the layout (the nav bar on the left & the 'Loading tickets' in the center - before the 'Loading tickets' is replaced with the loaded tickets.
Regardless there are no tables in the generated content.

I'll have to load up firebug or equivalent in FF 2.x & see what happens.

thanks,
Mark

zzo
8 Dec 2006, 1:04 PM
Just to close the loop - the problem my mine of course.
Turns out one of the javascript libs I was loading had the wrong path - so my web framework returned the default page for that location, which is the main page, which has tables, which caused 'Bad Things'.
I fixed the path & all was good.
Maybe I changed something halfway so the file was cached locally or something to explain why it ever would have worked.
But after quitting FF 1.5 & restarting & loading up the page my browser had the same problem......

THANKS!!
Mark