www.webdeveloper.com
+ Reply to Thread
Page 1 of 2 1 2 LastLast
Results 1 to 15 of 19
  1. 03-30-2005 09:26 AM #1
    Ultimater's Avatar
    Ultimater
    Ultimater is offline Eccentric Tatertot
    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>


    My Threads:
    Random daily advice thread | Prototype Function Collection | Function Library
    XMLHttpRequest:
    Specification | xmlhttp object | open and onreadystatechange order | String.prototype.toXMLDocument | Sarissa | Prototype | Dojo
    Broadening one's horizons:
    24ways.org
    Reply With Quote Reply With Quote
  2. 03-31-2005 06:34 PM #2
    Ultimater's Avatar
    Ultimater
    Ultimater is offline Eccentric Tatertot
    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?


    My Threads:
    Random daily advice thread | Prototype Function Collection | Function Library
    XMLHttpRequest:
    Specification | xmlhttp object | open and onreadystatechange order | String.prototype.toXMLDocument | Sarissa | Prototype | Dojo
    Broadening one's horizons:
    24ways.org
    Reply With Quote Reply With Quote
  3. 03-31-2005 09:59 PM #3
    NogDog's Avatar
    NogDog
    NogDog is offline Moderator, take two
    Join Date
    Aug 2004
    Location
    Ankh-Morpork
    Posts
    18,050
    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
    Reply With Quote Reply With Quote
  4. 03-31-2005 10:48 PM #4
    fredmv's Avatar
    fredmv
    fredmv is offline Moderator
    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.
    Reply With Quote Reply With Quote
  5. 03-31-2005 11:06 PM #5
    ray326's Avatar
    ray326
    ray326 is offline Got Link?
    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.
    "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
    Reply With Quote Reply With Quote
  6. 03-31-2005 11:09 PM #6
    fredmv's Avatar
    fredmv
    fredmv is offline Moderator
    Join Date
    Jul 2003
    Location
    Boston Area, Massachusetts
    Posts
    3,489
    Good call Ray. Does seem kinda sketchy.
    Reply With Quote Reply With Quote
  7. 04-01-2005 03:27 PM #7
    Ultimater's Avatar
    Ultimater
    Ultimater is offline Eccentric Tatertot
    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?


    My Threads:
    Random daily advice thread | Prototype Function Collection | Function Library
    XMLHttpRequest:
    Specification | xmlhttp object | open and onreadystatechange order | String.prototype.toXMLDocument | Sarissa | Prototype | Dojo
    Broadening one's horizons:
    24ways.org
    Reply With Quote Reply With Quote
  8. 04-01-2005 03:33 PM #8
    BonRouge's Avatar
    BonRouge
    BonRouge is offline Winemaster
    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).
    bonrouge | Why using tables for layout is stupid
    Reply With Quote Reply With Quote
  9. 04-01-2005 04:00 PM #9
    toicontien's Avatar
    toicontien
    toicontien is offline er, I mean toicantien
    Join Date
    Feb 2003
    Location
    Chicago Area, IL
    Posts
    5,736
    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.
    My Blog: FundaMental Disaster

    Accessible DHTML Tabs | Quick CSS Positioning Explanation | Quick Floated Elements Explanation | 50% + 50% != 100% | Gaps Under Images | ID vs. Class | Gappy Lists in Internet Explorer | Why Tables Are Slower | Benefits of XHTML vs. HTML | Linking to External Style Sheets | About DOCTYPES | Web Design is a Peanut Butter & Jelly Sandwhich | CSS: To Hack Or Not To Hack |
    Internet Explorer and Transparent PNGs
    Reply With Quote Reply With Quote
  10. 04-01-2005 04:11 PM #10
    Ultimater's Avatar
    Ultimater
    Ultimater is offline Eccentric Tatertot
    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)


    My Threads:
    Random daily advice thread | Prototype Function Collection | Function Library
    XMLHttpRequest:
    Specification | xmlhttp object | open and onreadystatechange order | String.prototype.toXMLDocument | Sarissa | Prototype | Dojo
    Broadening one's horizons:
    24ways.org
    Reply With Quote Reply With Quote
  11. 04-02-2005 04:23 AM #11
    <Eddie>
    <Eddie> is offline Registered Abuser
    Join Date
    Apr 2005
    Location
    Hastings, Sussex, UK.
    Posts
    244
    Code:
    <legend align="center">Whatever</legand>
    Works in all browsers...
    (((U+C+I) * (10-S)) / 20 * A * 1 / (1-sin (F / 10))
    Wash your hands on the way out! | 0.9r = 1
    Reply With Quote Reply With Quote
  12. 04-02-2005 04:38 AM #12
    DaveSW's Avatar
    DaveSW
    DaveSW is offline Registered User
    Join Date
    Feb 2003
    Location
    Wales, UK
    Posts
    3,148
    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 04:47 AM.
    In a world without walls and fences - who needs Windows and Gates?! - Unknown Author
    "And there's Bill Gates, the...most...famous...man in the...ah...Microsoft." -- A TV commentator for the 2000 Olympics.


    Web Design Faq? | W3C | Validator | Accessibility testing | Speed up your PC | Wura | Box Model Research
    Reply With Quote Reply With Quote
  13. 04-02-2005 05:23 AM #13
    <Eddie>
    <Eddie> is offline Registered Abuser
    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.
    (((U+C+I) * (10-S)) / 20 * A * 1 / (1-sin (F / 10))
    Wash your hands on the way out! | 0.9r = 1
    Reply With Quote Reply With Quote
  14. 04-02-2005 05:27 AM #14
    Fang's Avatar
    Fang
    Fang is offline Resistance is futile
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    Take a second look; 'center' is not allowed, it will never validate.
    At least 98% of internet users' DNA is identical to that of chimpanzees
    Reply With Quote Reply With Quote
  15. 04-02-2005 05:31 AM #15
    <Eddie>
    <Eddie> is offline Registered Abuser
    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.
    (((U+C+I) * (10-S)) / 20 * A * 1 / (1-sin (F / 10))
    Wash your hands on the way out! | 0.9r = 1
    Reply With Quote Reply With Quote
« Previous Thread | Next Thread »

Thread Information

Users Browsing this Thread

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

     

Bookmarks

Posting Permissions

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

Forum Rules

 HTML5 Development Center



Recent Articles