www.webdeveloper.com
Page 1 of 2 12 LastLast
Results 1 to 15 of 19

Thread: Centerizing Legend Text Problem

  1. #1
    Join Date
    Jan 2005
    Location
    Los Angeles, CA
    Posts
    4,887

    Centerizing Legend Text Problem

    I can't seem to centerize the text inside of my LEGEND tag.
    Is it possible to make it float to the center?

    HTML Code:
    <STYLE>
    fieldset{
    display: inline;
    }
    LEGEND{
    align: center;
    text-align: center;
    }
    .parent_legend{
    margin-bottom: 15px;
    }
    </STYLE>
    <fieldset>
    <legend class="parent_legend">Window</legend>
    <fieldset>
    <legend>Pick one&nbsp;</legend>
    <input type="text" value="window" class="main_level">
    </fieldset>
    <fieldset>
    <legend>The value&nbsp;</legend>
    <input type="text" value="window" class="main_level">
    </fieldset>
    <br>
    </fieldset>

  2. #2
    Join Date
    Jan 2005
    Location
    Los Angeles, CA
    Posts
    4,887
    If my code is too intimidating then refer to this:
    HTML Code:
    <STYLE>
    legend{
    /* Need something to centerize */
    }
    </STYLE>
    <fieldset style="display: inline;">
    <legend>Pick one</legend>
    <input type="text" value="window">
    </fieldset>
    If I give LEGEND a style of FLOAT: RIGHT; then it floats to the right.
    But I want it to goto the center. This just shows that the text is movable.
    So is there a way to bring it to the center?
    Anybody?

  3. #3
    Join Date
    Aug 2004
    Location
    Ankh-Morpork
    Posts
    19,611
    Interesting question. After 30 minutes of playing around with it, I've found no solution.
    "Please give us a simple answer, so that we don't have to think, because if we think, we might find answers that don't fit the way we want the world to be."
    ~ Terry Pratchett in Nation

    eBookworm.us

  4. #4
    Join Date
    Jul 2003
    Location
    Boston Area, Massachusetts
    Posts
    3,489
    First things first, you want to kick the browser into standards mode:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    	"http://www.w3.org/TR/html4/strict.dtd">
    Secondly, I think this might be a step in the right direction:
    Code:
    legend { margin-left: 400px }
    Works (sort of) in Firefox, anyway.

  5. #5
    Join Date
    Nov 2003
    Location
    Jerryville, Tejas
    Posts
    11,715
    When you start pushing it around IE blanks the fieldset border. I don't think there's a good solution. My take was the spec refers to the fieldset/legend as non-presentational so maybe visual fiddling with it isn't the right thing to do anyway.

  6. #6
    Join Date
    Jul 2003
    Location
    Boston Area, Massachusetts
    Posts
    3,489
    Good call Ray. Does seem kinda sketchy.

  7. #7
    Join Date
    Jan 2005
    Location
    Los Angeles, CA
    Posts
    4,887
    Would it be possible to accomplish my goal by possibly using a second TAG?
    e.g. <legend><center>Pick one</center></legend>
    or something similar?

  8. #8
    Join Date
    Jul 2004
    Location
    Sendai, Japan
    Posts
    1,273
    No, I don't think so - apart from the fact that <center> is deprecated and you shouldn't be using it, if you try some of the things mentioned above, you'll see that that the text doesn't sit on top of the line - there is no more line. If you move the text, you don't reveal more of the line - it's not there - it just looks like a complete line.
    You learn something new every day (I was playing around with this for a while).

  9. #9
    Join Date
    Feb 2003
    Location
    Michigan, USA
    Posts
    5,774
    It also may be that the standards define a LEGEND tag as a new document flow. I ran into this sort of problem about six months ago. To position the legend tag, most browsers actually create the legend tag as a layer, or using absolute positioning. I've tried setting the position to static and playing around with the CSS properties to no avail. It's got some properties set that are cemented in. No changing them in most browser.

    The Firefox DOM Inspector says the LEGEND tag is static positioning, but the border of the fieldset tag doesn't display where I think it should. There's also no negative top margin on the LEGEND tag.

    It's a very strange little beast.

  10. #10
    Join Date
    Jan 2005
    Location
    Los Angeles, CA
    Posts
    4,887
    Hmm... well, padding and margin work.

    But how am I supposed to "detect" the amount to move the legend?
    I can use an expression() to push it the correct amount of spaces.
    Is there a method that can be used to detect the width of a fieldset?
    (Not the default width but the width after it expands)

  11. #11
    Join Date
    Apr 2005
    Location
    Hastings, Sussex, UK.
    Posts
    244
    Code:
    <legend align="center">Whatever</legand>
    Works in all browsers...

  12. #12
    Join Date
    Feb 2003
    Location
    Wales, UK
    Posts
    3,147
    align has also been deprecated, although you are correct that it appears to work in all browsers.
    http://www.w3.org/TR/html4/interact/forms.html#h-17.10

    I take it you mean the actual text in the border?
    It seems to move easily in IE but not firefox.
    Last edited by DaveSW; 04-02-2005 at 05:47 AM.

  13. #13
    Join Date
    Apr 2005
    Location
    Hastings, Sussex, UK.
    Posts
    244
    The LEGEND is intended for accessibility devices to describe the fieldset contents and as such isn't really open (within the DOM) for style and position manipulation. You can't set the width either so you can't use margins set to 50% then deduct half the width to reliably centre the text. Although dropped, "align=center" is the only cross browser way. Is this a particular aesthetic necessity? It may be worth using display:none on the legend and marking up a proper heading within the fieldset instead.

  14. #14
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    Take a second look; 'center' is not allowed, it will never validate.

  15. #15
    Join Date
    Apr 2005
    Location
    Hastings, Sussex, UK.
    Posts
    244
    Quote Originally Posted by Fang
    Take a second look; 'center' is not allowed, it will never validate.
    HTML 4.01 Trans won't validate it, you're right, but that doesn't stop it being cross-browser. Again, better to try alternative methods of displaying a title as I mentioned above. If it's cracked without expr then please post the solution.

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