Issues with form styling in Mozilla

[Darren_Clark]

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

[Kor]

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.

[sunfighter]

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