Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Mar 2008
    Location
    Leeds, UK
    Posts
    12
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Issues with form styling in Mozilla

    Hi guys,


    First of all, here is a demo page: http://darrenclarkdesign.com/__ac_build/index.html

    I've searched through the forum and did some Google searching, but I can't seem to solve the following issues (all areas look fine in Safari - I've not looked at IE yet!):

    -------------------------------------------------------

    * Input field padding and large cursor

    In Mozilla, it creates some "wanky" padding issue.

    I amended the issue in Firebug using the following corrections (height, top padding), but I tried the code in my CSS and it's not working...

    Code:
    @-moz-document url-prefix() {
    		#name-field {	
    		-moz-height:53px;
    		-moz-padding:3px 21px 0px 21px;
    		}
    }
    Also, in Firefox the cursor grows to virtually the height of the input field - is there a fix for this?

    -------------------------------------------------------

    * Submit button padding

    I tried the following hack to prevent Mozilla adding it's own padding onto the submit button in my form:

    Code:
    input[type="button"]::-moz-focus-inner, input[type="submit"]::-moz-focus-inner {  Fixes Firefox input button padding issue 
    padding:0px !important;
    border: 0 none !important;
    }
    ...but this also doesn't seem to be working. Looking around in Google this seems to have worked for others?

    -------------------------------------------------------


    Any help is greatly appreciated as always!


    Cheers,
    Darren

  • #2
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    You may give the field a line-height with the same value of the height. That should vertically center the text inside the field. You can also use the text-indent to give a "left-padding). Using the padding is not a bright idea when in comes about text fields. Browsers will interpret it in various ways, according to their types or versions.
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • Users who have thanked Kor for this post:

    Darren_Clark (04-26-2011)

  • #3
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,598
    Thanks
    24
    Thanked 646 Times in 645 Posts
    FYI Darren your <textarea id="message-field" has a handle (didn't know FF did that) If you use it - the bottom of your site goes bonkers. a message-field {resize: none;} should take care of that...

  • Users who have thanked sunfighter for this post:

    Darren_Clark (04-27-2011)


  •  

    Posting Permissions

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