-
1. Re: problem with CSS styling of rich:tabPanel/tabs
sergeysmirnov Jun 7, 2007 11:07 AM (in response to henrik.lindberg)"henrik.lindberg" wrote:
On another page, I do not get styles from my stylesheet. Looking with firebug, I see that there are other (generated) stylesheets placed later in the chain in this particular case that override my CSS rules.
It is pretty impossible. Please, post the result of rendering here. -
2. Re: problem with CSS styling of rich:tabPanel/tabs
henrik.lindberg Jun 7, 2007 1:40 PM (in response to henrik.lindberg)ok, what do you want to see? The generated HTML for the page that is giving me problems?
-
3. Re: problem with CSS styling of rich:tabPanel/tabs
sergeysmirnov Jun 7, 2007 1:48 PM (in response to henrik.lindberg)The snippets that illustrate the problem. The whole page might be hard to analyze.
-
4. Re: problem with CSS styling of rich:tabPanel/tabs
henrik.lindberg Jun 7, 2007 3:03 PM (in response to henrik.lindberg)Here is a snippet containing the tabPanel part. formatting was added by me to make it readable.
<table style="width: 100%;" id="_id48:cloudlinksTabs" class="rich-tabpanel CloudlinksTabs" border="0" cellpadding="0" cellspacing="0"> <tbody> <tr> <td align="left"> <table border="0" cellpadding="0" cellspacing="0"> <tbody> <tr> <td><img src="/cssite/a4j.res/images/spacer.gif.seam" border="0" height="1" width="2"></td> <td class="dr-tbpnl-tbcell-act rich-tabhdr-cell-active" style="height: 100%; vertical-align: bottom;" id="_id48:_id147_cell"> <table style="height: 100%; position: relative; z-index: 2;" onclick="if (RichFaces.isTabActive('_id48:_id147_lbl')) return false;A4J.AJAX.Submit('_viewRoot','_id48',event,{'parameters':{'_id48:_id147':'_id48:_id147'} ,'actionUrl':'/cssite/component-view.seam'} ); return false; this.onclick = null;" border="0" cellpadding="0" cellspacing="0"> <tbody> <tr> <td class="dr-tbpnl-tbbrdr rich-tabhdr-side-border"><img src="/cssite/a4j.res/images/spacer.gif.seam" border="0" height="1" width="1"></td> <td class="dr-tbpnl-tbtopbrdr rich-tabhdr-side-cell"> <table style="height: 100%; width: 100%;" border="0" cellpadding="0" cellspacing="0"> <tbody> <tr> <td class="dr-tbpnl-tb rich-tab-header dr-tbpnl-tb-act rich-tab-active CSTabAct" onmouseout="RichFaces.outTab(this);" onmouseover="RichFaces.overTab(this);" id="_id48:_id147_lbl">mspecs (0)</td> </tr> </tbody> </table> </td> <td class="dr-tbpnl-tbbrdr rich-tabhdr-side-border"><img src="/cssite/a4j.res/images/spacer.gif.seam" border="0" height="1" width="1"></td> </tr> </tbody> </table> </td> <td><img style="width: 1px;" src="/cssite/a4j.res/images/spacer.gif.seam" border="0" height="1"></td> <td class="dr-tbpnl-tbcell-inact rich-tabhdr-cell-inactive" style="height: 100%; vertical-align: bottom;" id="_id48:_id163_cell"> <table style="height: 100%; position: relative; z-index: 2;" onclick="if (RichFaces.isTabActive('_id48:_id163_lbl')) return false;A4J.AJAX.Submit('_viewRoot','_id48',event,{'parameters':{'_id48:_id163':'_id48:_id163'} ,'actionUrl':'/cssite/component-view.seam'} ); return false; this.onclick = null;" border="0" cellpadding="0" cellspacing="0"> <tbody> <tr> <td class="dr-tbpnl-tbbrdr rich-tabhdr-side-border"><img src="/cssite/a4j.res/images/spacer.gif.seam" border="0" height="1" width="1"></td> <td class="dr-tbpnl-tbtopbrdr rich-tabhdr-side-cell"> <table style="height: 100%; width: 100%;" border="0" cellpadding="0" cellspacing="0"> <tbody> <tr> <td class="dr-tbpnl-tb rich-tab-header dr-tbpnl-tb-inact rich-tab-inactive CSTabInact" onmouseout="RichFaces.outTab(this);" onmouseover="RichFaces.overTab(this);" id="_id48:_id163_lbl">boms (3)</td> </tr> </tbody> </table> </td> <td class="dr-tbpnl-tbbrdr rich-tabhdr-side-border"><img src="/cssite/a4j.res/images/spacer.gif.seam" border="0" height="1" width="1"></td> </tr> </tbody> </table> </td> <td><img style="width: 1px;" src="/cssite/a4j.res/images/spacer.gif.seam" border="0" height="1"></td> <td class="dr-tbpnl-tbcell-inact rich-tabhdr-cell-inactive" style="height: 100%; vertical-align: bottom;" id="_id48:_id179_cell"> <table style="height: 100%; position: relative; z-index: 2;" onclick="if (RichFaces.isTabActive('_id48:_id179_lbl')) return false;A4J.AJAX.Submit('_viewRoot','_id48',event,{'parameters':{'_id48:_id179':'_id48:_id179'} ,'actionUrl':'/cssite/component-view.seam'} ); return false; this.onclick = null;" border="0" cellpadding="0" cellspacing="0"> <tbody> <tr> <td class="dr-tbpnl-tbbrdr rich-tabhdr-side-border"><img src="/cssite/a4j.res/images/spacer.gif.seam" border="0" height="1" width="1"></td> <td class="dr-tbpnl-tbtopbrdr rich-tabhdr-side-cell"> <table style="height: 100%; width: 100%;" border="0" cellpadding="0" cellspacing="0"> <tbody> <tr> <td class="dr-tbpnl-tb rich-tab-header dr-tbpnl-tb-inact rich-tab-inactive CSTabInact" onmouseout="RichFaces.outTab(this);" onmouseover="RichFaces.overTab(this);" id="_id48:_id179_lbl">cqueries (4)</td> </tr> </tbody> </table> </td> <td class="dr-tbpnl-tbbrdr rich-tabhdr-side-border"><img src="/cssite/a4j.res/images/spacer.gif.seam" border="0" height="1" width="1"></td> </tr> </tbody> </table> </td> <td><img style="width: 1px;" src="/cssite/a4j.res/images/spacer.gif.seam" border="0" height="1"></td> <td><img src="/cssite/a4j.res/images/spacer.gif.seam" border="0" height="1" width="1"></td> </tr> </tbody> </table> </td> </tr> <tr> <td style="position: relative;" id="_id48:_id147" height="100%"> <table style="position: relative; z-index: 1;" class="dr-tbpnl-cntnt-pstn rich-tabpanel-content-position" border="0" cellpadding="10" cellspacing="0" width="100%"> <tbody> <tr> <td style="" class="dr-tbpnl-cntnt rich-tabpanel-content CSTabPanelContent"> <table id="_id48:cpecViewCloudTable" class="dr-table rich-table CSpecViewCloudTable" border="0" cellpadding="0" cellspacing="0"> <colgroup span="5"></colgroup> <tbody></tbody> </table> </td> </tr> </tbody> </table> </td> </tr> </tbody> </table> </div> </span> <input name="_id48_SUBMIT" value="1" type="hidden"> <input name="jsf_sequence" value="11" type="hidden"> </form>
-
5. Re: problem with CSS styling of rich:tabPanel/tabs
sergeysmirnov Jun 8, 2007 3:09 AM (in response to henrik.lindberg)As I see, your custom classes always come after the generated ones:
class="dr-tbpnl-tb rich-tab-header dr-tbpnl-tb-act rich-tab-active CSTabAct"
...
class="dr-tbpnl-tb rich-tab-header dr-tbpnl-tb-inact rich-tab-inactive CSTabInact"
....
class="dr-tbpnl-tb rich-tab-header dr-tbpnl-tb-inact rich-tab-inactive CSTabInact"
....
So, where is the promlem? -
6. Re: problem with CSS styling of rich:tabPanel/tabs
henrik.lindberg Jun 8, 2007 5:05 PM (in response to henrik.lindberg)When the page is rendered, "my rules" are not applied. When looking at what happens with Firebug in Firefox I can see that there are two (if I remember correctly) CSS references that are "higher in the stack" and they clobber the settings for my CSS classes.
I can email you information how to see the problem live if you want to (the site I am working on is not yet open to the public so I don't want to publish login information etc. here in the forum :)
Don't think it is possible to attach images - or I could provide a screenshot of what it looks like in Firebug.
Or should I open a Jira issue?