CSS

Rounded Intro

So you’re all grown up and want Rounded Corners on your site. There’s just one small problem: the normal rounded corners implementation comes with tons of divs used for styles and you’ve got your fellow web developers screaming down your neck about web semantics.

So what’s this funky semantics thing? Basically, we’re looking for a separation of styles and data. We want to keep all the styles in the CSS style sheets and all the data in the XHTML files. Now, I’ve been known to be flexible on this a bit, however it is a great idea with a purpose and in this case, it actually helps us out a ton.

Ignore Me - Take The Easy Way Out

There are two jQuery plugins that can do this instantly, aptly named jQuery Corners and jQuery Corner. Yeah, I know totally different, right? They vary slightly in terms of their capabilities (anti-aliasing, background images, etc.). So if you’re not up to the heavy lifting or your requirements are very light (just basic rounding) these plugins more than fit the bill.

Before I start bashing Internet Explorer 6.0, I’d like to share a story with you. I’ve had a high yields savings account at HSBC Direct for some time now. Now I think I know why I haven’t experienced many user issues with their website before. I also use ING Direct Savings Account and Electric Orange Account for some of my banking, you know all eyes in one basket and that stuff.

So here’s another common Internet Explorer CSS hack that’s pretty popular and not too ugly. Here’s The Problem ie-css-min-height-hack This is how normal people horizontally center block elements using CSS: You slap on a width (I mean, that should be obvious enough right?). Then you set the left and right margins to auto, and Voil , centered! body #box { margin: 0 auto; width: 780px; } Well except in Internet Explorer and some older browsers.

Now it’s not surprise to anyone out there that I hate Internet Explorer. No I mean I really hate it! One of the reasons that I hate it so much is that it’s buggy. Call it whatever you want, maybe it’s too forgiving on bad HTML or CSS, but whatever their intentions are (forgiving sloppy code or just too lazy to interpret code right) it causes tons of problems. The Min-Height Problem I know a lot of you have had this problem in the past.

Here’s the kindergarten version of a 3 Column CSS layout that you’re going to get from most other websites: <div id="header">header stuff</div> <div id="left">left stuff</div> <div id="center">center stuff</div> <div id="right">right stuff</div> <div id="footer">footer stuff</div> Simple enough right? The alignment is done in your style sheet, where the left would float left, the center would also float left and the right would float right. You could set all your styles based on these column ids.