Sent by Chad A Gard on 22 March 2004 16:04
On Monday, March 22, 2004, at 11:03 AM, Chris Heilmann wrote:
>> A little problem that's been plaguing me for a while now... is there
>> a way
>> to control the indent/alignment of the text that follows a check box
>> or
>> radio button?
Sometimes. Cross-browser support is a little buggy, but, you could
always try to use the adjacent sibling selector (x + y), which is
applied to the first y element following an x element. So, you could
do something like:
input.radio + p.formlabel { clear: both; text-align: right;...}
to cause the first p with a class of formlabel that follows an input
who's class is radio would have those styles:
<input class="radio" type="radio" value="foo">Bar</input>
<p>next radio button label</p><input class="radio"...
> There may be, but with form elements, you should always be aware that
> not
> all browsers support styling of them. With good reason, too, as I don't
> have to look for the form element if it looks the same way I am used
> to.
True, not all browsers support styling form elements, though styling
form elements seldom actually breaks anything unless it's really bad if
your radio button isn't blue or whatnot.
>
> Your case the only proper solution I could think of is a table, which
> is
> not nice, but could be done when you ensure you use <label> to link the
> text to the checkbox.
Using a table would probably be fastest in the short run, but could be
problematic if you go to different media, have users that want to
change text size for accessibility reasons, etc. You may want to
consider using divs in place of table rows, unless the form really
represents tabular data. I won't clutter up with too much code, but a
good article on how to do this is "Practical CSS Tips, Tricks, &
Techniques" on A List Apart.
http://www.alistapart.com/articles/practicalcss/
HTH
Chad A Gard
http://www.percussionadvocates.com/chad
______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
