CSS tip of the day.
 

I noticed in a few designs, making elements have rounded corners on say an h1 tag instead of square corners like adding borders do. They style the h1 tag to have a rounded corner image infront of the content, and then style a span tag to have a rounded corner image behind the content and then just do <h1><span>something</span></h1>.

Tip:
Use the :before and :after pseudo-elements on the h1 tag with the content attribute to do it all in 1 tag.

http://www.quirksmode.org/css/content.html

Read that page, and figure it out, will make much cleaner code and less markup in the long run.

damn them round corners :winkwink:

thanks...cleaning up some code now...

I know right, seriously, this tip is golden for those who don't know A LOT about CSS but do their own shit.

I have been doing my own CSS designs for a while and I use the :after and content: in my clearfix class but never really know what they did because I got it from free design.

why not just do your rounded corners with border-radius?

I hate CSS so much. It's a necessary evil, but I've been too lazy to sit down and learn it properly, so I end up just hacking shit up and taking forever to get stuff done.

One day.

Isn't that just a mozilla thing or has internet explorer finally started supporting it?

doesnt work on IE tho

it's probably only a matter of time. i thought i read not long that webkit was being pushed for acceptance as a standard for css. i don't see why they wouldn't accept it as standard code and get all browsers on board with it. provides so many easy options for design.

I dont get it can you elaborate a bit more? Got an example other than that link?

I guess you missed this part of the article...

Learn jQuery.

using :before and :after to put say a left image before the stuff between the tag, and an image after the stuff between the tag, instead of a tag inside of a tag to do the same thing.

That's to put actual content, not like using the url() attribute, they even use it in the EXAMPLE of using it.

because more than half the surfers out there are't using browsers that recognize border-radius

CSS hacks like the one the thread starter are why I laugh at the CSS vs Table debate