I am being sarcastic. As designs are getting more complex and more and more developers are ditching IE6… we are finding new problems using these new styles.
Specifically, we need a way to make different elements (all with different margins and line-heights and font-sizes) to be able to line up on a base line. Vertical Align does a good job of this, in most cases.. but also brings new problems with some CSS3 styling.
CSS buttons: it’s now possible to create beautiful buttons without restoring to images. Using border-radius, text-shadow, background gradients etc. we can do so much with modern browsers and still have the buttons degrade gracefully.
However
Vertical align is now confused. Using vertical-align:baseline will line up all text wonderfully, even images line up with the text. But what about css buttons? Well, it works ‘not-so’ wonderfully.
Check my lab page for the results.
Want to see what it looks like in a modern browser? here is a screenshot.
vertical-align:baseline; does exactly as you would expect, but that becomes problematic because we dont want a css button to align from it’s text; we want it to align to the bottom of the button.
Solution:
Well, I dont have one yet. I am looking into it.. and will post it as soon as I find one. Sorry.
If you have a solution.. please leave your comments.