Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > ASP .Net > asp:label Strict Mode rendering...

Reply
Thread Tools

asp:label Strict Mode rendering...

 
 
=?Utf-8?B?TWljaGFlbFk=?=
Guest
Posts: n/a
 
      11-14-2005
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
 
Reply With Quote
 
 
 
 
Kevin Spencer
Guest
Posts: n/a
 
      11-14-2005
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" <(E-Mail Removed)> wrote in message
news:(E-Mail Removed)...
> 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



 
Reply With Quote
 
 
 
 
=?Utf-8?B?TWljaGFlbFk=?=
Guest
Posts: n/a
 
      11-14-2005
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" <(E-Mail Removed)> wrote in message
> news:(E-Mail Removed)...
> > 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

>
>
>

 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
mmm-mode, python-mode and doctest-mode? Edward Loper Python 0 08-09-2007 05:40 AM
re: mmm-mode, python-mode and doctest-mode? John J Lee Python 0 08-07-2007 07:49 PM
re: mmm-mode, python-mode and doctest-mode? Edward Loper Python 0 08-07-2007 08:58 AM
mmm-mode, python-mode and doctest-mode? John J Lee Python 3 12-01-2005 08:35 PM
Safe Mode (?) - It is meant to be normal mode but looks like safe mode English Patient Computer Support 3 10-03-2004 11:10 PM



Advertisments