Styling height/position of tab itself
I have seen the
heightStyle attribute that was recently added, but that seems to apply to the container DIV below the tab itself. I'm interested in being able to control the height and perhaps positioning of the tab <li> item itself. Here is my issue:
I have limited horizontal space for tabs. I can't use a "scrolling tabs" approach and the content may have long tab names that exceed the amount of space. One approach was to insert a line break so that the tab title wraps to a new line.
Example:
tab one tab two tab three this is
tab four
This looks messy because the first three tabs only have a filled/styled area that takes up the top half. There is white space underneath. The fourth tab spans two lines and has twice the filled/styled area. Ideally I'd have code that looks at all 4 tabs and then gives each the max height (so they all have equivalent filled/styled areas). A lesser approach is to move the first three tab labels down so that they are aligned to the bottom of tab four. I had some CSS that did the trick, but it uses "inline-block" which isn't supported in all my target browsers. Regardless, this isn't my ideal solution.
Any examples where the height of the tab itself is equalized?
Thanks.