Filling Out Inputs Creates 1-2px bump in Padding on Form

HTML & CSS
1

Hello all,

I have a new problem with my #submissionform box on my website here. Again, to reach this form, you must insert some valid e-mail format inside the “join the mailing list” bit in the bottom-right corner. I noticed this was a problem after I tried to make a style adjustment that only applies to Chrome/Safari webkit browsers (trying to make the padding the same). Instead of getting the styles applied to only those browsers, the below code makes Firefox, or other browsers, add an extra pixel or two to the padding after an input field has been activated/received focus. So, the form becomes longer.

How can I make these styles only affect Chrome & Safari? Or is there another explanation as to why the form becomes taller?

I believe it has to do with this target, which is at the very bottom of the stylesheet:


@media screen and (-webkit-min-device-pixel-ratio:0) {
	#submissionform div{padding-bottom:1px;}
}

Thanks, all!

Edit: the original objective of adding in the padding was to create a little space in between the input elements, so they aren’t sitting right on top of each other, all scrunched up

2

Hi,

It might be helpful if you could create a screenshot identifying the problem as I’m not good at spotting 1px differences (as in most cases I expect form elements to be different cross browser).

I could see the form but didn’t know what you meant about being taller. Is this compared to something else or browsers specific?

3

Well, if I took a screenshot, it would still be difficult to see the “jumpiness” of the form.

I discovered that Chrome/Safari does not have this problem. The problem only occurs in Firefox/IE. Also, I discovered that the issue is only with the <select> drop-down elements. It’s really not very hard to notice how the form bounces around in Firefox; whereas, in Chrome, everything appears neatly in place the whole time.

4

No but you could have pinpointed me to the right element as I had been testing the inputs (as you mentioned) for 20 minutes but you actually meant the selects!

Also, I discovered that the issue is only with the <select> drop-down elements. It’s really not very hard to notice how the form bounces around in Firefox; whereas, in Chrome, everything appears neatly in place the whole time.

The problem is that once you apply changes to a select element you lose some of the default browsers behaviours and look for that element. You have changed the background colour on focus which then changes the look of the form completely as all the controls on the form default to something else and all the browser specific styles are removed.

Look at the arrows when the element is in focus and you can see what I mean. If you remove the background colour then the jump goes away. If yuu need a background colour then you will need to provide a default background colour as well.


select{background:#fff}
input:focus, select:focus{
	background-color:#DEE4EF;
}

Of course that changes the look of the select to match the focus styles and you get the larger old fashioned arrow controls.

5

That is the correct solution.

Now, I just feel terrible about not providing enough detail and wasting your time when you could have spent that 20 minutes looking over another thread or doing something else you need to do.

6

lol - no worries - it sometimes takes me longer than that to get the information I need :slight_smile: