asp:label Strict Mode rendering...

Discussion in 'ASP .Net' started by =?Utf-8?B?TWljaGFlbFk=?=, Nov 14, 2005.

  1. Anyone figure out a workaround for setting the width on labels in 2.0??? I
    know width is no longer a valid property on inline text elements (per W3C),
    so what are the other options??? I have many valid uses for setting an
    explicit width on a label...and no, I do not want to switch back into Quirks
    mode just to get it to work.

    TIA,
    mike
     
    =?Utf-8?B?TWljaGFlbFk=?=, Nov 14, 2005
    #1
    1. Advertising

  2. Okay, Michael,

    I spent a good bit of time researching this, so you owe me!!! ;-)

    You have to use a bit of JavaScript. Basically, you set the CSS width and
    (optionally) text-align properties on the tag. Yes, I know, the width
    property is not valid. However, IE will recognize it and use it. Example:

    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam
    vitae ante sed augue lobortis suscipit. Aenean ultricies cursus
    lorem.<span class="label"
    style="display:inline;width:200px;text-align:center;">Duis erat. </span>
    Pellentesque venenatis vehicula diam. Donec leo massa,
    pulvinar consequat, ultrices eget, ullamcorper sit amet, magna.
    Vivamus sollicitudin diam et enim. Sed pede nulla, adipiscing vitae,
    luctus a, pretium quis, turpis. Nunc fermentum diam eget diam.
    Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
    posuere cubilia Curae; Phasellus tempus. Morbi sit amet magna et est
    commodo consectetuer. Cras blandit. Nulla faucibus condimentum eros.
    </p>

    Then you use a JavaScript that executes when the page loads:

    <script type="text/javascript" >
    var sps = document.getElementsByTagName("span");
    for (var index = 0; index < sps.length; index++)
    {
    var sp = sps[index];
    if (sp.className == "label")
    {
    var s = sp.style.width.substring(0, sp.style.width.indexOf("px"));
    var i = (s - sp.offsetWidth) / 2;
    if (sp.style.textAlign == "center")
    {
    sp.style.paddingLeft = i;
    sp.style.paddingRight = i;
    }
    else if (sp.style.textAlign == "right")
    sp.style.paddingLeft = i * 2;
    else
    sp.style.paddingRight = i * 2;
    }
    }
    </script>

    This JavaScript adds padding according to the "width" style, which, although
    it doesn't get used by "correct" UAs, is still there, and readable, combined
    with the "text-align" style, which is used to set the padding appropriately.
    The CSS class determines which spans get the treatment.

    --
    HTH,

    Kevin Spencer
    Microsoft MVP
    ..Net Developer
    If you push something hard enough,
    it will fall over.
    - Fudd's First Law of Opposition

    "MichaelY" <> wrote in message
    news:...
    > Anyone figure out a workaround for setting the width on labels in 2.0???
    > I
    > know width is no longer a valid property on inline text elements (per
    > W3C),
    > so what are the other options??? I have many valid uses for setting an
    > explicit width on a label...and no, I do not want to switch back into
    > Quirks
    > mode just to get it to work.
    >
    > TIA,
    > mike
     
    Kevin Spencer, Nov 14, 2005
    #2
    1. Advertising

  3. I'll say I owe you....nice!!!

    This will work - I pondered such a solution - except not with all styles in
    a seperate CSS file....bummer. Fortunately, most of my fixed-width spans
    invovle forms, so I guess I can use tables where needed.

    **sigh**....still wondering if all of these CSS standards really have web
    APPLICATIONS in mind, or if it is all geard towards web BROCHURES (blogs,
    normal sites, etc.)....oh well - I'll keep a smile on my face, and push
    onward.

    **grin**

    Thanks a million,
    Mike

    "Kevin Spencer" wrote:

    > Okay, Michael,
    >
    > I spent a good bit of time researching this, so you owe me!!! ;-)
    >
    > You have to use a bit of JavaScript. Basically, you set the CSS width and
    > (optionally) text-align properties on the tag. Yes, I know, the width
    > property is not valid. However, IE will recognize it and use it. Example:
    >
    > <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam
    > vitae ante sed augue lobortis suscipit. Aenean ultricies cursus
    > lorem.<span class="label"
    > style="display:inline;width:200px;text-align:center;">Duis erat. </span>
    > Pellentesque venenatis vehicula diam. Donec leo massa,
    > pulvinar consequat, ultrices eget, ullamcorper sit amet, magna.
    > Vivamus sollicitudin diam et enim. Sed pede nulla, adipiscing vitae,
    > luctus a, pretium quis, turpis. Nunc fermentum diam eget diam.
    > Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
    > posuere cubilia Curae; Phasellus tempus. Morbi sit amet magna et est
    > commodo consectetuer. Cras blandit. Nulla faucibus condimentum eros.
    > </p>
    >
    > Then you use a JavaScript that executes when the page loads:
    >
    > <script type="text/javascript" >
    > var sps = document.getElementsByTagName("span");
    > for (var index = 0; index < sps.length; index++)
    > {
    > var sp = sps[index];
    > if (sp.className == "label")
    > {
    > var s = sp.style.width.substring(0, sp.style.width.indexOf("px"));
    > var i = (s - sp.offsetWidth) / 2;
    > if (sp.style.textAlign == "center")
    > {
    > sp.style.paddingLeft = i;
    > sp.style.paddingRight = i;
    > }
    > else if (sp.style.textAlign == "right")
    > sp.style.paddingLeft = i * 2;
    > else
    > sp.style.paddingRight = i * 2;
    > }
    > }
    > </script>
    >
    > This JavaScript adds padding according to the "width" style, which, although
    > it doesn't get used by "correct" UAs, is still there, and readable, combined
    > with the "text-align" style, which is used to set the padding appropriately.
    > The CSS class determines which spans get the treatment.
    >
    > --
    > HTH,
    >
    > Kevin Spencer
    > Microsoft MVP
    > ..Net Developer
    > If you push something hard enough,
    > it will fall over.
    > - Fudd's First Law of Opposition
    >
    > "MichaelY" <> wrote in message
    > news:...
    > > Anyone figure out a workaround for setting the width on labels in 2.0???
    > > I
    > > know width is no longer a valid property on inline text elements (per
    > > W3C),
    > > so what are the other options??? I have many valid uses for setting an
    > > explicit width on a label...and no, I do not want to switch back into
    > > Quirks
    > > mode just to get it to work.
    > >
    > > TIA,
    > > mike

    >
    >
    >
     
    =?Utf-8?B?TWljaGFlbFk=?=, Nov 14, 2005
    #3
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. John J Lee
    Replies:
    3
    Views:
    497
    bruno at modulix
    Dec 1, 2005
  2. Edward Loper
    Replies:
    0
    Views:
    482
    Edward Loper
    Aug 7, 2007
  3. John J Lee
    Replies:
    0
    Views:
    533
    John J Lee
    Aug 7, 2007
  4. Edward Loper

    mmm-mode, python-mode and doctest-mode?

    Edward Loper, Aug 9, 2007, in forum: Python
    Replies:
    0
    Views:
    442
    Edward Loper
    Aug 9, 2007
  5. Knut Krueger
    Replies:
    8
    Views:
    282
    Knut Krueger
    Aug 20, 2013
Loading...

Share This Page