Why does my code display differently in Firefox compared to Opera?
In Firefox, the height of input/text and input/submit elements are similar. However, in Opera, the height of the input/submit is reduced.
This is the HTML code:
<footer>
<div class="subscribe">
<h3>Get Notified</h3>
<br>
<form method="post">
<input type="email" name="email" placeholder="Enter E-Mail"><input type="submit" name="submit" value="Subscribe">
</form>
</div>
</footer>
This is the CSS code:
footer .subscribe form input { border: 1px solid; padding: 6px 10px; outline: none; }
footer .subscribe form input:last-child { color: #001001; background: #00A240; border: 1px solid #00A240; padding: 5px 10px; text-transform: uppercase; font-weight: bold; }
footer .subscribe form input:last-child:hover { color: #00A240; background: #001001; }