HTML / CSS Alignment Question

Mr E

Hopefully someone has come across this one before.

I have a thin status strip on a webpage, onto which I want to put a couple of checkboxes. Simple enough.

However, I'm trying to line up the text beside the checkboxes. The default (the input tag followed by text) renders with the text slightly below the center of the checkbox.

Is there a way of lining them up using HTML or CSS ??

(BTW - the website is internal, so I can't demonstrate it.... sorry!)

TIA,
Dave.

zAbbo

It may help if you post the code up here, is the form inside a table, maybe its the table dimensions that are causing this. it shouldn`t happen on a basic one eg:

<form name="form1" method="post" action="">
<input type="checkbox" name="checkbox" value="checkbox">
Text Here
</form>

With CSS you will get better allignment possiblities
eg:

<style type="text/css">
<!--

.CheckBox { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; color: #000000; text-align: justify}

-->
</style>


the text allign can be changed to left/center/right.

Hope this helps,

It would be easier if you post up the code or if you had it live.

Regards

Mr E

OK.. you asked for it !! I just mocked it up in dreamweaver, and took a tiny screendump.

<input type="checkbox"><span style="font-family:Arial, Helvetica, sans-serif;font-size:9px;">gggyyyqqq.</span>

I'm using stylesheets on the inhouse version (which is .NET code - I just reproduced the problem in HTML and its the same).

If you look at the screenshot, any characters with a 'tail', eg, 'g','y','q' all have their tails below the bottom of the checkbox. I want to nudge the text up a couple of pixels so that the checkbox plus text fit on a nice tidy strip which is the height of the checkbox. (I hope I'm making sense here!).

- Dave.

Mr E

I've tried your version, and it works fine as long as the text is either in upper case, or the letters don't have appendages on them !!

- Dave.

zAbbo

maybe playing around with valign could help, also there could be an extension out there that would help. this can also be done in CSS it think

<table width="200" border="0" cellspacing="0" cellpadding="0" height="22">
<tr>
<td width="20" valign="bottom" align="center">
<input type="checkbox">
</td>
<td>text for check box</td>
</tr>
</table>

Mr E

I've been valigning and vertical-aligning all afternoon!

Thanks for trying, pcirl.com ....

I guess its just a matter of hitting the right combination of tables, valigns, padding, and fonts .....

I'll go at it with a clear head in the morning. Time to go home!

(However, if anyone posted a solution over the next 12 hours, I wouldn't complain!!!)

- Dave.

dahamsta

<table border="0" cellspacing="0" cellpadding="0">
 <tr valign="middle"> 
  <td><input name="checkbox" type="checkbox"></td>
  <td style="font-family:Arial, Helvetica, sans-serif;font-size:9px">gggyyyqqq.</td>
 </tr>
</table>

zAbbo

Looks grand:

Heres dahamsta`s pic again for lazy folks:

Mr E

Spot on, dahamsta. Chalk it down to weird HTML behaviour. Never thought of separating the checkbox and text in separate cells.... (not as neat as I would have liked, but I'll do anything at this stage - I've wasted too much time on it!)

Thanks again .......

-Dave.

zAbbo

My version also had the different cells approach, it would be the best way to go on this one.

Nice one dahamsta

dahamsta

Chalk it down to weird HTML behaviour.

Vertical alignment has always been crap for FORM elements in HTML and CSS1. Perhaps CSS2 will be better.

Never thought of separating the checkbox and text in separate cells.... (not as neat as I would have liked, but I'll do anything at this stage - I've wasted too much time on it!)

Take my word for it, it's the only safe way of going about it. just make sure your TD tags are tight to the text, a single space of line break will likely screw it up.

Thanks again .......

No bother.

adam