Josh Sowin
over at Fire and Knowledge has a nice html tutorial on rounded corners sans images but still needs your help.
So here is where you come in. I’ve done alot of the ground work. Now you CSS masters need to come in and do your wizardry. Here are some problems or unknowns with my code:
Even when changed to ems, it doesn’t like it when Gecko-rendering engines resize it. Yet when the font-size is changed in the body css, it scales okay. I haven’t figured this one out.
When the fonts are chanegd to largest or smallest in IE, a small grey bar appears at the bottom.
If the content is less than two lines, it don’t look purdy.
Hasn’t been tested with alot of platforms yet. I’m also not sure how different types of anti-aliasing schemes would affect the corners, but I’m guessing they would.
My code is desperately screaming to be simplified. I’m sure this could be done easier, and I’m sure someone will figure out how to do it was two lines of CSS. Well, maybe four.
I have not figured out a way to outline this with a css border. In order to do something like this, another class may have to be added, which would add more complexity to the code.
Because of the box model, the box contents have to be decently far from the corners because of the span tags. This could be a problem for some people who want these in a tight place. I believe this could be fixed with some playing with position, maybe even making a consession to change the text’s position to absolute.
Any ideas for Josh?
Comments:
Thanks for helping! :)
I’ve had a few off-site suggestions from some guys, and plan to incorporate them in my part 2 article. But alot of the problems are still unsolved.
Thanks again!
I don’t know the whole story, but . . .have you tried using percentages? That usually works for me.
I’ve actually converted to ems for Part 2, and it’s working out quite well. Just a few more bugs to squash… :)