I’m having a problem with some buttons in ie7, they display fine in ie8+. I’ll include some images to show the problem, along with the code. The same styling works fine on anchors, but is off when using the button element.
The reason I use a span inside the button/anchors is because of the strange drop shadow where an image is needed and also the diagonal gradient. So I apply the background image of the shadow to the button. Then the gradient colouring to the span inside, which leaves an intentional 5px gap at the bottom, so the shadow displays without colour behind it.
Top line of buttons is how it should look (Firefox, Chrome, Safari, Opera, IE8+ etc). Middle line is how they display in IE7 and the bottom row show the same buttons in IE7 with a background colour to show the padding: Note, the problem button is the far right one. The rest are all anchors, which display fine! You may also notice the words cut off in the ie7 version, like each word goes onto the next line?
I have tried, setting the height of the button to 29px with zero padding – and the span set to 24px but it still seems to leave a gap at the top, like the button is always going to vertically center its contents? I’ve tried playing around with vertical-align but no joy yet!
Thanks for ready and I really hope someone can help and advice.
I think the problem with that would be that the background image on .btn is transparent. So applying the background colour of the span onto .btn would display the colour red, behind the image (which is a shadow). So I’m not sure this would work :/