Hi,

 I've setup a theme and in it have a couple of different label controls. e.g.

and a CSS of

The problem seems instead that width doesn't want a unit of measure, so should be width="100". Firefox is a bit more "strict" about syntax.

Hope this helps. -LV

Thanks for that. But it does seem to be a problem with FireFox not recognising the CSS display:inline-block .

This does seem to be correct behaviour for Firefox. However I dont have control over the way the ASP Label tag is rendered.

So does this mean that

the Width property of the Label control cannot be used when cross browser compatibility is an issue

or

is there a setting that makes the Label control emit cross browser compatible HTML / CSS.

Thanks

.NET at the base renders XHTML conforming code. Then it is up to the developer...

Indeed, display:inline-block does not exist at all. It is either inline, or block, or none, etc.

And width, by standard, wants a number, and you shouldn't be putting "px" there.

-LV

Hi,

You are quite correct about the px. I will remove that. Thanks.

However, ASP does render the Label with display:inline-block (not me the developer) .

(see: http://www.quirksmode.org/css/display.html )

So I think its back to nasty tables :)

Many thanks

Wow! Didn't know about that.

That's why, apart from grids and similar "special" controls, I only only use html controls...

Actually, they make the separation of client- vs server-side quite more natural, and that's another major reason.

-LV

You could put span tags around the offending elements that keep moving where they shouldnt

e.g.

<span class="formLabel"><asp:Label ID="lblJobTitle" runat="server" Text="Job Title:"></asp:Label>

Then define the formLabel css

e.g.

.formLabel { width: 120px; float: left; }
 
I don't know a way of specifying it any my 'automatically' (in a theme) then this im afraid, but this way the result will be the same in FF and IE
 
regards
Chris 
  

asp:Label controls typically don't emit the display:inline-block Style, you may want to check your associated Skin (skinid="rs100") to make sure it's not inserting things into the Style or removing the Width attribute (width="100px") from your Label - ASP.NET might automagically render the style (display:inline-block) when a width is associated to a Label.

asp:Label controls emit a SPAN tag which is an Inline CSS Element - a DIV or Table is a Block Element. I don't think the W3C CSS Standards provide a mechanism for setting the width on Inline Elements (like asp:Label, the span) because you'd typically use a Block type Element, like a Div, or turn your Span into a block element (display: block;).

A couple alternatives you could try:

    Try using the asp:Literal in place of the asp:Label

    Try wrapping your asp:Label in a Div then set the width and align settings on the Div 

    Try removing [font-names="verdana" width="100px" skinid="rs100"] from your asp:Label and add the following to your CSS file:

.rightalign {
    text-align: right;
    display: block;
    width: 100px
 } 

Safari 2.0.3., Konqueror 3.5, Opera 9 and Mozilla Firefox are very W3C CSS Standard compliant, however Internet Explorer is not. If you do your CSS / Design development in one of these more standard compliant browsers you'll pleasantly discover that your Design is more cross browser compatible - this often reduces debug time.