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:
display:inline-block (It's a hack which I found somewhere, but didn't work)
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.