www.webdeveloper.com
Results 1 to 3 of 3

Thread: Determining the max width of a form legend

  1. #1
    Join Date
    Mar 2006
    Posts
    194

    Determining the max width of a form legend

    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:

    Code:
    #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:

    Code:
    <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

  2. #2
    Join Date
    Jan 2005
    Location
    Frankfort, KY, USA
    Posts
    6,167
    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?
    Code:
    #content form legend span {width: 220px;}
    ...
    <legend><span>a really long legend goes here</span></legend>
    KDLA
    FYI
    * My screen resolution is set at 1680x1050
    * I'm accessing your site through a T1 line
    * I'm probably viewing it using Firefox (unless browser is specified)

  3. #3
    Join Date
    Nov 2003
    Location
    Jerryville, Tejas
    Posts
    11,715
    Width won't apply on inline elements.
    "Debugging is twice as hard as writing the code in the first place. Therefore, if you write the code as cleverly as possible, you are, by definition, not smart enough to debug it." Brian W. Kernighan

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles