How to convert a <legend> in a block element?

[entidi]

I've the following code fragment:

<form>
  <fieldset>
    <legend>Titolo</legend>
    <p><label>Un testo: <input type="text" /></label></p>
    <p><input type="submit" value="CONFERMA" /></p>
  </fieldset>
</form>

Now I want be able to manage <legend> as a common <div>:

legend { display: block !important;
         width: 100% !important;
         background-color: silver }

No way: <legend> (at least on Firefox) is still a simil-inline element, the silver background does not expand to the right edge.

Any idea or suggestion?

Thank you

 

[BabyJeffy]

It's not an easy one... here is a URL on the topic:

http://www.456bereastreet.com/lab/styling-form-controls-revisited/legend/

Some googling shows more tutorials on this as well. Maybe one of them will be of use to you.

Cheers,
Jeff

[tt]Jeff's Blog [!]@[/!] CodeRambler

http://www.coderambler.com/

http://www.coedit.co.uk/

[/tt]

Make sure your web page and css validates properly against the doctype you have chosen - before you attempt to debug a problem!

FAQ216-6094

 

[entidi]

Before posting, I've spent some hour in googling, and the only solution (= bad workaround) I found is:

<form>
  <fieldset>
    <legend><span>Titolo</span></legend>
    <p><label>Un testo: <input type="text" /></label></p>
    <p><input type="submit" value="CONFERMA" /></p>
  </fieldset>
</form>

styled in this (very ugly) way:

legend      { position: relative }
legend span { position: absolute;
              top: 0;
              left: 0;
              display: block;
              width: 100%;
              background-color: silver }

But the use of absolute position (in this case) causes me more troubles than benefits because I don't use absolute sizes, so I don't know how setting the margins to avoid the overlap of the legend.

Maybe someone yet hit this pesky problem.

--
Nicola

http://www.entidi.it/

 

[TomNick]

Try this and see if it works for you:

legend { display: block !important;
width: 100% !important;
background-color: silver;
padding-right: 57em}

I added the "padding-right" and it seemed to expand the legend in Firefox..You may have to play around with the padding-right but it seemed to work for me.

Hope this helps.

 

[entidi]

Not really: adding padding-right enlarge the legend (and make it depend on the screen resolution). What I really want was to have a full styleable block element, but maybe I'm asking too much to the rendering engines.

Time to say goodbye to the <legend> element.

I'll use an <h1> header just before the <form>, hoping for a better future...

--
Nicola

http://www.entidi.it/