I've run across the following issue in HTML/CSS: For my (offline) site, there are a link and a submit button (which is inside a form) right next to each other, like this:
<a href='settings.php' class='button'>Settings </a>
<form action='processing/logout.php' method='POST' class='inline'>
<input type='submit' value='Sign out' class='redbutton'>
</form>
When both of the elements are links, then they line up next to each other perfectly. Now, however, even though the link and button have the same CSS styling associated with them, then input button is annoyingly larger (in height) than the link (though it's barely visible when glancing over).
I created a jsFiddle to demonstrate.
People on other forums asked for the reset CSS, so I included that as well, even though deleting it doesn't remove the problem.
How can I get the link and the input button to be the same height? Is it something obvious I missed? Is there a CSS trick to get them to be the same height?
The size of the (inline) anchor element is treated inconsistently across different browsers.
The solid solution is to place a button inside a link. Fiddle: http://jsfiddle.net/m5m5M/22/.
<a href='settings.php'><input type='button' class='button' value='Settings' /></a><form action='processing/logout.php' method='POST' class='inline'><input type='submit' value='Sign out' class='redbutton'>
<form>
Note that I have omitted whitespace between the buttons. That's because inline elements show a gap between each other when there's any whitespace in the HTML.