Grow your CSS skills. Land your dream job.

Form styling issues with Mozilla!

  • # April 25, 2011 at 1:54 pm

    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…

    /*@-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:

    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

Viewing 1 post (of 1 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".