It seems the fixed height causes issues with some things like PayPal Donate Buttons.
I had to change from: (index.css)
/* Declarations for inputs, selects and buttons */
input, .input_text, button, select {
padding: 0 6px;
min-height: 2em;
max-height: 2em;
height: 2em;
vertical-align: middle;
}
To:
/* Declarations for inputs, selects and buttons */
input, .input_text, button, select {
padding: 0 6px;
min-height: 2em;
/* max-height: 2em;
height: 2em; */
vertical-align: middle;
}
In order not to have a very tiny Donate Button.
However, after doing so, did not notice any other inputs being negatively affected.
It's browser-dependent. And depends what you mean by "negatively affected".
ETA: Basically, nailing down all height declarations is the only way to get cross-browser consistency on form elements. It may be better to use a specific override just for your Paypal button if required.
Not too sure on how would do that, the way the donate button is done.
<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_blank">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="hosted_button_id" value="********">
<input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_donateCC_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
<img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
</form>
Not too sure how would do like you said on that. Messing with input types, is a bit new to me...lol
I had tried to add a class to the image's input, but it would not work.
EDIT: Just to add, I tested IE, FF, Chrome, and Opera, and no negative changes to any other input after removing the fixed height.
Not checked mobiles yet, though.
Easy to customize that one anyways, add the relative height there, or just wrap it in a div and:
div#paypal input { yourcsscode }But not a bug in Elkarte on this one, having those height declarations can be good for cross-browser compat, to avoid default stylesheets, as ant mentioned :)
Why do you use the div in the selector?
Because for whatever reason there may be some other thing using the same id, still paypal-related, showing up elsewhere. Found myself swearing several times for that same problem, although it was on smf.
Use a div as selector to hope is not used anywhere else in the same context is not really reliable.
On the same page ids are unique, if your problem is multiple pages... well, use the <body> class, it's there for that very reason. If you want to be sure your id is unique then make it more verbose.
But really, use the div is not the right solution.
Would be worth add a default class to all the forms and then use that class to pick only "our" buttons?
Sounds like you'd need to re-check and re-write the whole thing, I don't fancy the idea.
Not really, a good search and replace can do miracles. :P
I am considering addons as well, some may add these things ;)