I was playing with this design, and I came up with a technique so cool, I just had to post it and see if anyone could help give it a final touch.   

This is a site I’ve been working on. CollegeRecruiter.com

Notice the Featured Employers box?

A shadow around the entire box (even with rounded corners in Firefox) without the use of a single image. NO IMAGES!!!!

By using border-right and border-bottom instead, I could even make it a standard drop shadow.

Check out the simplified code here:

<div style=”BORDER-RIGHT: #ebebeb 1px solid; BORDER-TOP: #ebebeb 1px solid; BORDER-LEFT: #ebebeb 1px solid; WIDTH: 195px; BORDER-BOTTOM: #ebebeb 1px solid; HEIGHT: 270px; moz-border-radius: 1em 1em; border-radius: 1em 1em”>

<div style=”BORDER-RIGHT: #d7d7d7 1px solid; PADDING-RIGHT: 0px; BORDER-TOP: #d7d7d7 1px solid; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; BORDER-LEFT: #d7d7d7 1px solid; WIDTH: 193px; PADDING-TOP: 0px; BORDER-BOTTOM: #d7d7d7 1px solid; HEIGHT: 268px; moz-border-radius: 1em 1em; border-radius: 1em 1em”>

<div style=”BORDER-RIGHT: #bdbdbd 1px solid; BORDER-TOP: #bdbdbd 1px solid; BORDER-LEFT: #bdbdbd 1px solid; WIDTH: 191px; BORDER-BOTTOM: #bdbdbd 1px solid; HEIGHT: 266px; moz-border-radius: 1em 1em; border-radius: 1em 1em”>

<div style=”MARGIN: 10px; WIDTH: 195px; WHITE-SPACE: nowrap; moz-border-radius: 1em 1em; border-radius: 1em 1em”>

Some content

</div></div></div></div>

Amazing or no? Please post your comments! There is a problem with getting Firefox to display the padding or margins correctly on the inner most box. If anyone can come up with a solution, I’d be glad to rework and post a tutorial or something.

If you’re building I new site, I highly suggest going with a css/div design as compared to html/tables/spacers design. It’s twice as fast, and a complete site redesign can be done from a single file. (Of course, that’s only if it’s done right : ) This is only the beginning of the benefits, contact me if you’d like to discuss it further. 

An excellent article on the subject:

Can you explain what you mean by a low markup to content ratio?

Using standards-oriented design makes it easier to have less markup than displayed content. With a table-and-spacer type design, this is not the case. You could have twice as much markup as you do text content, or three times as much or five times as much, depending on how complicated the markup is. With standards-oriented design, developers want to get that below one to one.

Read more: Why eBay needs Standards-Oriented Design: An Interview with Eric A. Meyer