Results 1 to 9 of 9

Thread: form display terrible in Chrome and Safari - Solved

  1. #1
    User
    Join Date
    02-01-10.
    Posts
    111

    Default 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.

  2. #2
    User
    Join Date
    06-19-09.
    Location
    Elbl?g, Poland
    Posts
    152

    Default Re: form display terrible in Chrome and Safari

    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
    Marcin

    http://www.contao.pl - Polish Support Site
    http://forum.contao.pl - Polish Contao community forum


    -----------------------
    Need custom template? Feel free to contact me by e-mail marcin@contao.pl

  3. #3
    Experienced user
    Join Date
    01-12-10.
    Posts
    814

    Default Re: form display terrible in Chrome and Safari

    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...

  4. #4
    User
    Join Date
    02-01-10.
    Posts
    111

    Default Re: form display terrible in Chrome and Safari

    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.

  5. #5
    Experienced user
    Join Date
    01-12-10.
    Posts
    814

    Default Re: form display terrible in Chrome and Safari - Solved

    What about ISBN 1590596145

  6. #6
    User
    Join Date
    10-16-10.
    Posts
    279

    Default Re: form display terrible in Chrome and Safari - Solved

    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:

  7. #7
    Experienced user
    Join Date
    01-12-10.
    Posts
    814

    Default Re: form display terrible in Chrome and Safari - Solved

    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)

  8. #8
    User
    Join Date
    02-01-10.
    Posts
    111

    Default Re: form display terrible in Chrome and Safari - Solved

    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.

  9. #9
    Experienced user
    Join Date
    01-12-10.
    Posts
    814

    Default Re: form display terrible in Chrome and Safari - Solved

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

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •