form display terrible in Chrome and Safari - Solved

I did my best to create a form and get the fields lined up properly: http://forms.ds.umn.edu/deaf-and-hard-o ... -2011.html . The form looks fine in Firefox and IE, but terrible in Safari and Chrome. Looks like the check boxes in particular are giving me grief :-(. Any suggestions are appreciated.

Add this script to your head section: http://cssuseragent.org/
and add this css rules at the very bottom of your stylesheet:

Code:

---

.ua-webkit #condition_student {
        clear:both;
}

.ua-webkit .checkbox_container span {
        float:none;
}

.ua-webkit #contact_us_form label {
        clear:both;
}

---

should work

It would be easier to change the CSS. But your HTML is messy. If it were consistent you could suffice with:

Code:

---

#contact_us_form input.checkbox {
width: 50px;
}

#contact_us_form .checkbox_container span {
clear: both;
}

---

Your problem is that you set the width for ALL input and checkboxes are also input...

Thank you both. Your suggestions got me on my way. I ended up fixing it using CSS only. It is still messy, but the display is at least usable now in Chrome, Safari. I really need to learn more about CSS for form design. If you have suggestions for websites where this is discussed, please share.

What about ISBN 1590596145

there are some hacks/javascripts out there that will help with the fixing... but I'm always afraid to use them. They're called "hacks" for a reason, and it can possibly break something else globally. just a thought :ugeek:

Quote:

---

Originally Posted by mechaflash

there are some hacks/javascripts out there that will help with the fixing... but I'm always afraid to use them. They're called "hacks" for a reason, and it can possibly break something else globally. just a thought :ugeek:

---

Most hacks are used for browser selecting based on behavior caused by incompatibility of older browsers with new CSS keywords and such. They are not really a hack; "inventive usage" would be more accurate. Other hacks include conditional comments (<!--[if IE]>), and they are also safe to use...

There are also CSS hacks that are not valid CSS. These shouldn't be used. (ex: _color: red;, only works in IE6 and earlier due to bug)

Quote:

---

Originally Posted by Ruud

What about ISBN 1590596145

---

Thanks for the reference. My co-worker happened to have this book and I am reading it now. Already learned a bunch.

What a great coincidence! But then again; that book, "CSS Mastry", is a good and clear resource. Glad to be of help.