inline-block and cross browser compatibility

Hello,
I want labels to line up properly in forms and used this CSS before:
label {float:left; width:70px} and enlosed every line like this
<p><label>Name:</label><input name="name" type="text" /></p>

Lately I just do this for the label:
label {display:-moz-inline-block; display:-moz-inline-box; display:inline-block;}

As you see I want then can set a size on all labes and to make sure the inline-block works on all browsers. I always get errors when validating css. Is it correct that "inline-block" is not supported in all browsers?

/asle

 

The -moz-inline-box is technically valid, but since it's a proprietary value (the -moz- makes it legal), the validator won't be able to recognize it. The inline-block value is not a part of css2, but is in css2.1. You will need to be sure to use the css2.1 validator.

Your label is not quite correct. It should be tied to its form control.

<p><label for="name">Name:</label>
  <input name="name"
         id="name"          
         type="text" /></p>

Code (markup):

You might also want to look at form layout using css for another approach.

cheers,

gary

 

Thanks!
Sorry, copy and paste error. I always use id="xx" for labels and the input. What I really was asking was if I can get away with one of the CSS declarations for inline-block since I often want elements to be inline but static size.

/asle

 

Yes, you can technically 'get away' with it. However, some browsers don't support it, or don't support it well.

 

If you understand some of the oddities, it works quite well in IE, FF, Konqueror/Safari and Opera. See inline-block gallery demo for a trivial level tutorial.

cheers,

gary

 

It's ok, steelfrog, I still can't get my head around inline-block. I still haven't used it in a page yet. Now that FF3 is out (hate it), I really should start trying to use it.