I want to set up a horizontal navigation menu with each list item rotated ant-clockwise 45degs.
The list items rotate fine with the appropriate CSS3 mark up, although they do seem to appear much longer than the actual text, which makes me curious but isn’t the main issue…
When i style the <li>'s to display inline this seems to over ride the rotation…
am I missing something obvious? Have I been awake too long? is it time to take a break from the screen or is this just, not possible?
When i style the <li>'s to display inline this seems to over ride the rotation…
I didn’t look at the specs (because I won’t use rotated text… too many browsers don’t support it and it can distort the text), but it wouldn’t surprise me to learn that items must be display: block to be rotated. Similar to, you can’t add vertical margins to someone who’s display: inline.
You may have to keep them blocks, and use floating (or maybe display: inline-block) to get them in a row if that’s what you’re doing.
If they can’t get percentages right for simple things then there’s not much hope for the more complicated areas such as transitions and transforms.
I’m seeing a lot of quirks in some of these new css3 properties. It seems in some cases that using some css3 properties (gradients etc) is much slower (render time and browser performance issues with scrolling) than using actual images and kind of defeats the purpose.
With all the bizarro boxes inlines-with-text have, I can imagine them not being so simple.
It seems in some cases that using some css3 properties (gradients etc) is much slower (render time and browser performance issues with scrolling) than using actual images and kind of defeats the purpose.
I guess that makes sense, though: Just calling another file via an img tag would be more work on the server than the browser, whereas the browser has to build the gradient itself while rendering.
That plus IE9’s rounded-corners-and-gradients bug… arg.
