Determining the max width of a form legend

[kessa]

Hi All,

I'm currently designing a site for a client and I'm stuck with an issue on a form which I hoped someone may be able to help me with?

The form itself is marked up with fieldsets, legends and labels. Each of the legends have a background image which is 230px wide (and is taller than needed in case text needs to wrap) which has a curve (top left / top right corners) which makes it look a bit like a tab

The problem I am having is that unlike all other elements, I don't seem to be able to limit the width of the form legend, and therefore the text of some of the legends is wider than the image itself.

I've had a surf and this seems to be a common bug / issue when using a background image with CSS form legends and I was just wondering if anyone else may have had similar issues and may have found a solution?

Ideally, I want to limit the width of the legend (text) to 220px and need to ensure that the BG image itself is 230px (which I am currently doing with the following:

#content form legend {
	position:absolute; 
	top:-33px;
	left:-7px; 
	margin:0px;
	padding:7px 8px 0px 8px;
	background-image:url(../images/bg-formlegend.gif);
	background-repeat:no-repeat;
	background-position:top left;
	background-color:#fff;
	color:#fff; 
	font-weight:bold;
	display:block; /*resolves FF issue*/
	_height:24px;
	min-height:24px;
	_width:220px;
	min-width:220px;
	max-width:230px;
}

There's nothing unusual about the XHTML itself:

<fieldset>
   <legend>A really really long legend goes here</legend>
   <label for="test"><span>Test</span></label> 
   <textarea name="test" id="test" rows="5" cols="40"></textarea>
</fieldset>

So far I've tried using things like:

• max-width
• width
• display:inline-block (It's a hack which I found somewhere, but didn't work)
• extra padding
• extra margin (both in an attempt to force the text to wrap)
• adding a <span> within the <legend> and assigning a width to that.....

and various other things but so far... no joy.

Worst case scenario, I could probably get some DOM JavaScript to calculate the width of the text and then do something funky with it to resolve the issue for users who have JavaScript enabled, but I'd rather find a more robust solution using the CSS if possible.

Cheers!
Kessa

[KDLA]

IE doesn't recognize max/min-widths, so it's best that you do investigate another way of doing this.
Have you thought of placing a span inside the legened, and applying a width to that?

#content form legend span {width: 220px;}
...
<legend><span>a really long legend goes here</span></legend>

KDLA

[ray326]

Width won't apply on inline elements.