Sent by Bob Easton on 10 July 2004 16:04
[EMAIL-REMOVED] wrote:
> Hi everybody,
> I have an XHTML 1.1 form, its structure is this:
>
> <form>
> <div><label for="fName">first name</label> : <input type="text" name="fname" /></div>
> </form>
>
>
> my css for the label is this:
>
> label {
> display: inline-block;
> width: 12em;
> background-color: #abcabc;
> }
>
> this works fine in IE 5+ (which surprised me somewhat i must say.) however mozilla completely
ignores the display: inline-block; rule and the css validator doesnt like it either. I checked the
specs to make double sure and it is in the 2.1 spec (however it is not in the 2.0 spec) Is there a
way i can recreate this effect in mozilla? using display: block pushes the input down to the next
line and display: inline ignores the width.
>
It is always risky to push the edge (using xhtml 1.1 and css 2.1)
because browser support is spotty. One might ask why anyone needs to
use xhtml 1.1, but that's not going to help solve the problem.
display:inline is not intended to accept widths.
display:inline-block is poorly supported.
So, how about trying float:left; ? It does exactly what you need.
Then again, there are some that consider a form as a kind of
"interactive tabular data" and have no regrest styling forms with a very
simple table.
--
Bob Easton
______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
