Results 1 to 4 of 4

Thread: Cross Browser Height Alignment Issues

  1. #1
    Join Date
    Feb 2008
    Posts
    83
    Thanks
    26
    Thanked 1 Time in 1 Post

    Default Cross Browser Height Alignment Issues

    It lays out pretty good in FF but the search bar is too low in Chrome. Also the search icon is too low in FF:

    http://www.voiceprocess.net/index2.html

    I've been really struggling to make it work. Any help would be greatly appreciated.

    The HTML:
    http://www.voiceprocess.net/index2.html

    The CSS: http://www.voiceprocess.net/style2.css

  2. #2
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    3,033
    Thanks
    25
    Thanked 599 Times in 575 Posts
    Blog Entries
    40

    Default

    It might help if you remove the margin-bottom: 20px; from the search input field, and then add vertical-align: middle; to the submit button.
    Focus on Function Web Design
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps

  3. The Following User Says Thank You to Beverleyh For This Useful Post:

    johnwboyd (08-04-2015)

  4. #3
    Join Date
    Feb 2008
    Posts
    83
    Thanks
    26
    Thanked 1 Time in 1 Post

    Default Thank you!!

    Quote Originally Posted by Beverleyh View Post
    It might help if you remove the margin-bottom: 20px; from the search input field, and then add vertical-align: middle; to the submit button.
    It worked! Thanks so much! How to move it up more from the bottom?

  5. #4
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    3,033
    Thanks
    25
    Thanked 599 Times in 575 Posts
    Blog Entries
    40

    Default

    I'm on iPhone at the mo so can't test, but what if you put a negative top margin on the form element? Like margin-top: -25px; so you're moving the parent element rather than trying to manipulate each individually.
    Focus on Function Web Design
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps

Similar Threads

  1. Cross-browser Iframe Height
    By Rain Lover in forum CSS
    Replies: 7
    Last Post: 03-31-2015, 05:45 PM
  2. CMotion cross-browser-issues
    By zha_01 in forum Dynamic Drive scripts help
    Replies: 4
    Last Post: 06-08-2011, 12:41 AM
  3. cross browser issues
    By deeksha in forum CSS
    Replies: 3
    Last Post: 06-16-2010, 12:29 PM
  4. Replies: 8
    Last Post: 08-05-2008, 11:08 AM
  5. cross browser marquee II issues
    By Nyx in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 09-14-2006, 07:26 AM

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
  •