After a long stripping session, I came up with a simple html page,
derived from a rendered NavigationPanel tab.
After placing this page on the local filesystem together with a stripped
css, Common11-m7.js and all involved icons (tab3-*), Firefox 2.0
displays this page completely only the first time or after any reloading.
It does not complete the page after clicking on the link. No console
errors, though.
It seems pausing in the middle. Rendering completes if clicking either
buttons. Even activating plugins such as CSSviewer or Firebug completes
the page.
Please notice that I removed all inline script function calls, so that
no Trinidad js functions should be called. However, if I remove the
script loading, page shows up ok. If I remove the outermost table, it's
ok. If I place all those files on a remote server then I browse that
page from here, it's ok.
If I remove the onclick attribute from the link, it's ok (it's just
submitting the enclosing form, the original page invoked another function).
Now the funny point: look at those initial table/tbody elements having
"display: inline;". If I remove *both* attributes, rendering is ok !
Don't ask me why.
Now I can easily patch NavigationPaneRenderer again (third time in a
week) to remove those attributes, but does anybody know about any
potential side effects ?
Besides this page, I will check the real application ASAP through a
patched NavigationPaneRenderer.
In any case, here are all data (js and icons are from Trinidad):
- Stripped css (gecko, from Trinidad-generated css) is:
BODY {BACKGROUND-COLOR:#D9E1E8; BORDER-RIGHT:medium none;
PADDING-RIGHT:0px; BACKGROUND-POSITION:left top; BORDER-TOP:medium none;
PADDING-LEFT:0px; FONT-WEIGHT:normal; FONT-SIZE:8pt; PADDING-BOTTOM:0px
;MARGIN:0px; BORDER-LEFT:medium none; COLOR:black; PADDING-TOP:0px;
BORDER-BOTTOM:medium none; FONT-FAMILY:Verdana, Arial; TEXT-DECORATION:none}
.x3v {height:26px;overflow:hidden;width:100%}
.x3z,.x40 {height:22px;width:26px;background-position:top right}
.x46,.x48,.x4a {height:4px;background-repeat:repeat-x}
.x47 {height:4px;width:17px;background-repeat:no-repeat}
.x3w {cursor:pointer}
.x43
{height:22px;font-family:Arial,Helvetica,Geneva,sans-serif;font-size:10pt;font-weight:normal;padding-left:3px;color:#000000;white-space:nowrap}
.x49 {height:4px}
.x45 {height:22px;width:15px}
.x4b {height:4px;width:100%;background-repeat:no-repeat}
.x47 {height:4px;width:17px;background-repeat:no-repeat}
.x49 {height:4px}
.x3w .x3z
{background-image:url('file:///C:/AxxBrowser/tab3-start-selected.gif')}
.x3w .x40
{background-image:url('file:///C:/AxxBrowser/tab3-start-join-selected.gif')}
.x3w .x46,.x3w .x48,.x3w .x4a
{background-image:url('file:///C:/AxxBrowser/tab3-bot-mid-selected.gif')}
.x3w .x47
{background-image:url('file:///C:/AxxBrowser/tab3-bot-start-selected.gif')}
.x3w .x43
{background-image:url('file:///C:/AxxBrowser/tab3-mid-selected.gif');font-weight:bold;color:#585955}
.x3w .x45
{background-image:url('file:///C:/AxxBrowser/tab3-end-selected.gif')}
.x3w .x4b
{background-image:url('file:///C:/AxxBrowser/tab3-bot-end-selected.gif')}
- and the faulty page (dummy.htm):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"; >
<html dir="ltr" lang="en">
<head>
<link rel="stylesheet" charset="UTF-8" type="text/css"
href="file:///C:/AxxBrowser/gecko.css">
<script src="file:///C:/AxxBrowser/Common11-m7.js"></script>
</head>
<body>
<table cellpadding="0" cellspacing="0" border="0" summary=""><tr><td>
<form id="tabberForm" name="tabberForm" method="POST"
action="file:///C:/AxxBrowser/dummy.htm">
<div class="x3v" id="tabberForm:tabber">
<table cellpadding="0" cellspacing="0" border="0" summary=""
style="display: inline;" class=""> <!-- this -->
<tbody style="display: inline;"> <!--- and this -->
<tr>
<td>
<table cellpadding="0" cellspacing="0" border="0"
summary="" class="x3w">
<tbody>
<tr>
<td class="x3z"></td>
</tr>
<tr>
<td class="x46"><div class="x47"></div></td>
</tr>
</tbody>
</table>
</td>
<td>
<table cellpadding="0" cellspacing="0" border="0"
summary="" class="x3w">
<tbody>
<tr>
<td class="x43">
<img border="0" align="absmiddle"
style="padding-right: 5px; float: left;"
src="file:///C:/AxxBrowser/document.png">
<a id="tabberForm:tabber:0:tab"
name="tabberForm:tabber:0:tab" href="#"
onclick="document.forms['tabberForm'].submit();return false;">xxx</a>
</td>
</tr>
<tr>
<td class="x48"><div class="x49"></div></td>
</tr>
</tbody>
</table>
</td>
<td>
<table cellpadding="0" cellspacing="0" border="0"
summary="" class="x3w">
<tbody>
<tr>
<td class="x45"></td>
</tr>
<tr>
<td class="x4a"><div class="x4b"></div></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
</form>
</td></tr></table>
</body>
</html>
-- Renzo
Renzo Tomaselli wrote:
Hi, I'm experiencing a wrong rendering of the tab bar on Firefox
2.0. On IE it seems ok.
I'm using a MenuModel-driven navigationPane. I noticed that tabs are
rendered by means of an icon puzzle, surrounding tab label text.
All icons are provided by skin selectors as background. I did not
modify any selector.
The problem is that - after any tab clicking - such icons are not
shown.
Any further action - such as right-button click on text, or page
refresh, displays all icons properly, till next tab selection.
Since full page refreshing renders everything ok, I suspect that PPR
is involved somehow.
Trinidad navigationPane examples run fine, but none of them uses the
MenuModel. They use direct children.
Had anybody else similar issues ?
Thanks -- Renzo
