CSS-look-and-fell for "t:collapsiblePanel"

[Morten Mortensen <MO...@tdc.dk>]

I am trying to get a certain look-and-feel for "t:collapsiblePanel". The
combination of HTML generated leaves little room for formatting with
CSS.

I want the effect of -

  <a
    class="PageWide"
    href="xxx.html"
  >This is a link</a>

- where my stylesheet contains something like -

a.PageWide
{
  width: 100%;
  display: block;

  margin: 0;
  padding: 0.25em;

  border-width: 0px;
  border-style: none;
}

For my application, this looks cool in both IE and FireFox. Because of
the "display" setting, the anchor fills the complete width of the page.

When I try to obtain the effect with -

    <t:collapsiblePanel
      value="true"
      title="Edit Input Attributes"
      styleClass="PageWide"
    >

- the formattet result is something like -

  <div><input type="hidden"
name="graphLSOverviewProperties:_idJsp27CollapsedState" value="true"
/><a href="#"
  click="..."
  ><span class="PageWide">&gt;</span><span class="PageWide"> Edit Input
Attributes 0</span></a></div>

Fiddling with the CSS is no good. Why '>'/&gt; and the text " Edit Input
Attributes 0" are separated by the "span" element... Hm.

The essence of this is -

  <div>
    <a href="#"
  ><span class="PageWide">&gt;</span><span class="PageWide"> Edit Input
Attributes 1</span></a></div>

Collapsing the "span" element in a handwritten example produces this -

  <div>
    <a href="#"
  ><span class="PageWide">&gt; Edit Input Attributes 2</span></a></div>

- which is still no good. Replacing the "class" attribute with a "style"
attribute produces -

  <div>
    <a href="#"
  ><span
    style=
      "
        width: 100%;
        display: block;

        margin: 0;
        padding: 0.25em;

        border-style: none;
      "
   >&gt; Edit Input Attributes 3</span></a></div>

- which still looks bad (in FireFox, not IE). Removing the "span"
element and actually writing the wanted result -

  <div>
    <a href="#"
      style=
        "
          width: 100%;
          display: block;

          margin: 0;
          padding: 0.25em;

          border-style: none;
        "
  >&gt; Edit Input Attributes 4</a></div>

- of course looks good.

To kind of illustrate, I have produced a couble of images with decorated
borders.

Do I really have to write custom renders to solve this??
Are there any simpler ways to format the anchors within a
collapsiblePanel than writing custom renders?

Regards
Morten Sabroe Mortensen