CSS form checkbox alignment!

dhossai · #1 (**permalink**) Nov 29th, 2007, 13:51

Hi folks,

I have created a form in my website for registering people. It works fine but the checkbox i have used to agree terms and condition is aligned differently in netscape and firfox than IE. In IE it looks fine but if I tab down the form field to the checkbox it show a field to the left of the checkbox. It only happens in IE.
And in Netscape and firfox it align to the left too much. Any idea ?
Here is the link of my form
http://www.bangladeshilivingabroad.com/111/signup.html

Html for the checkbox is

PHP: Select all


<label for="agree"></label>
<input type="checkbox" name="agree" id="agree" value="yes" /> By clicking this I agree&nbsp; the <a href="http://www.bangladeshilivingabroad.com/disclaimer.htm">disclaimer</a>

and CSS I have used

PHP: Select all


form {
margin-left:20px;
}
label
{
width: 10em;
float: left;
text-align: right;
margin-right: 0.5em;
display: block;
}
input
{
color: #781351;
background: #fee3ad;
border : 1px solid #339900;
}
fieldset
{
border: 1px solid #781351;
width: 33em;
padding: 6px 0 0 0;
}
legend
{
color: #fff;
background: #ffa20c;
border: 1px solid #781351;
padding: 2px 6px 
}

Thanks in advance for your response.

dab42pat · #2 (**permalink**) Nov 29th, 2007, 15:12

try adding this to your CSS

HTML: Select all

ol{
position:relative;
top:0;
margin:0 0 0 10em;
padding:0;
}

then add this to html

HTML: Select all

<ol><label for="agree"></label>
<input type="checkbox" name="agree" id="agree" value="yes" />
 By clicking this I agree&nbsp; the <a href="http://www.bangladeshilivingabroad.com/disclaimer.htm">
disclaimer</a></ol>

may need a bit of tweaking but should work.

10.2em is probably better

dhossai · #3 (**permalink**) Nov 29th, 2007, 16:48

Hi, yes it works ok with Netscape and Firfox but not in IE. It is way to the right in Ie and outside of fieldset . I used 2.1em to that in the middle in Netscape and Firfox. Cau u pls tell me what ol and li means in CSS if you know. I search could find much.

dab42pat · #4 (**permalink**) Nov 29th, 2007, 17:10

If you cant find a solution to this then:

A: It doesnt look bad the way it is in ie and ff
B: try a conditional comment for ie

heres a link

http://www.webforumz.com/html-forum/...i-write-ie.htm.

dhossai · #5 (**permalink**) Nov 29th, 2007, 18:00

Thanks dab, I will probably endup using the conditional comment if can fix it but did you see my current form in IE, If you tab through the form after current profession it should go to the checkbox rather it goes to the left in invisible label, do you know anything about it?

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
[SOLVED] help with checkbox and textfield in form	BRONIC	JavaScript Forum	8	Apr 22nd, 2008 16:08
[SOLVED] Form Checkbox Validation	Stuart	PHP Forum	26	Nov 24th, 2007 23:39
[SOLVED] Form to email with checkbox	itsdesign	PHP Forum	4	Oct 29th, 2007 00:57
<form> tag in <table> is causing alignment issues - HELP!	Love2Java	Web Page Design	5	Sep 4th, 2007 15:27
Desparately Need Form, Checkbox Component Help	grillbat	Starting Out	1	Aug 21st, 2007 16:04

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
CSS form checkbox alignment!