asp:label Strict Mode rendering...

[Guest]

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]

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

 

[Guest]

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

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

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