I've searched through various sources, including stackoverflow.com and other websites, to solve this problem I'm encountering. Despite trying everything I found, I still can't get the text to center vertically in Firefox when styling buttons with CSS for a website. Surprisingly, it's centered in Google Chrome and Internet Explorer (strange, right?). However, even in the fiddle, the text doesn't appear to be vertically centered in Google Chrome.
Check out the CSS code below:
button {
margin: 0;
padding: 0;
}
button.slide_button {
background-color: #E3E4F0;
border: 1px #8C8C8C solid;
border-radius: 25px;
height: 25px;
padding: 0px 5px;
vertical-align: middle;
line-height: 25px;
}
button.slide_button:hover {
background-color: #E3E4F0;
border: 1px #8C8C8C solid;
border-radius: 25px;
height: 25px;
color: #F00;
}
button.slide_button:active {
background-color: #BFBFE3;
border: 1px #8C8C8C solid;
border-radius: 25px;
height: 25px;
}
Here is the HTML code (which includes references to JavaScript functions used on the site):
<button id="slide_prev" class="slide_button" onClick="prevImg()">Previous</button>
<button id="slide_pause" class="slide_button" onClick="pauseShow()">Pause</button>
<button id="slide_next" class="slide_button" onClick="nextImg()">Next</button>
Also, here is the link to the fiddle: http://jsfiddle.net/59ven/