Redesigning with CSS Rounded Corners

Thinking Inside the (Rounded) Box

I decided that when I finally got around to redesigning superflippy.net, I wanted to bring it up to date with XHTML and a table-less layout. But I didn't want to replace the fun, cartoonish aesthetic with severe rectangular boxes. Everyone's doing squares these days, so I've got to be different and keep my rounded corners.

I found a few good solutions online: Dan Loda's Rounded corners with CSS, Albin.Net's Bullet-Proof Rounded Corners, and Eric Meyer's curvelicious. I chose to go with Mr. Loda's Rounded Corners with Borders because it didn't require too much additional CSS to implement and it came the closest to simulating the look of the original superflippy.net design.

I made one significant change from the original example: instead of having a div of class "box" inside a div with a unique ID, I gave my div with a unique ID the class "box". Original HTML: <div id="example"> <div class="box">
New HTML: <div id="example" class="box">

Filling the Box

The real test is, of course, whether or not this design stands up to the abuse of everyday content, like graphics and tables and embedded Flash and such, since I've got a lot of legacy content that I want to migrate. Here are a few things I noticed while playing around with content.

• First of all, Mr. Loda cautions that his method doesn't work in IE5, but this page looked fine in my test (5.0 on Windows 2000), so that was a nice bonus.
• If I make any of the text a fixed pixel size the bottom of the box goes all pear-shaped in Mozilla. So if you're using this method, size your text with percentages, points, or ems.
• I find floating tables useful for image gallery pages. As you can see, the floating tables work, but only if I wrap an extra div around them (if you view source, you'll see it's named "protection"). The protective div has attributes position:relative and width:100%. This keeps the bottom div from floating up to the side of the tables in IE6, or drawing above the tables in Mozilla. Basically, it makes everything nest visually the way it does in the source.
  Because Safari refuses to render content around the floating tables (or divs, I tried those, too), I used javascript to add clear:both for list items for Safari users.

• The floating menu at the top of the page, which is a div, doesn't adversely affect the layout. Unsurprisingly, it exhibits bizarre overlapping behavior with the h2 element in Netscape 4.7, though amazingly enough that's the only illegible thing on the page in that decrepit old browser.
• In conclusion, the only browser I had a major problem with was Safari. It rendered the left edges of the top and bottom boxes 2 pixels farther to the right than all the other browsers, so I resorted to a javascript browser detect that changes the styles that don't work in Safari. I bothered to do this because I use that browser myself frequently, and it would irk me if my web site didn't look OK on my own computer.
  Note: Upgrades to Safari have rendered this workaround unnecessary.

<< Back to tech index