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
    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,956
    Thanks
    25
    Thanked 693 Times in 691 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
    •