With CSS3 and browsers supporting it, the same task is incredibly easy and requires very little code. Here is the basic code for a box with rounded corners using CSS3 (we have to use extra lines for webkit and mozilla browsers):

.box { border-radius:20px;
-moz-border-radius:20px;
-webkit-border-radius:20px; } 

With a little extra code for color and such, we get the box on the right. Extremely easy – so now everybody can have neat, rounded boxes on their web pages or blogs.

Also, CSS3 compliant browsers support box-shadows and text-shadows. And they can be used alongside the rounded corners easily. The basic code for a box with rounded corners and shadows is simple too:

.box2 { box-shadow:5px -5px 10px #000;
             -webkit-box-shadow:5px -5px 10px #000;
             -moz-box-shadow:5px -5px 10px #000;
          border-radius:20px;
		-moz-border-radius:20px;
                -webkit-border-radius:20px; }

With a little extra formatting this gives us the second box on the right. Pretty neat and simple? (Here is a demo-page with these two boxes and the CSS and markup.)

You can also make individual corners rounded for webkit and mozilla browsers:

-moz-border-radius-topleft  / -webkit-border-top-left-radius
-moz-border-radius-topright / -webkit-border-top-right-radius
-moz-border-radius-bottomleft / -webkit-border-bottom-left-radius
-moz-border-radius-bottomright / -webkit-border-bottom-right-radius

And if you can’t see the rounded corners and the box shadows, don’t blame me. Blame your browser! You simply have the wrong browser (probably Internet Explorer), and need to download and use Firefox, Opera 10.5, Safari or Chrome!

©2010 nekkidblogger. All Rights Reserved.

I have downloaded and tested the browser. It is great! “Opera 10.50 is the fastest browser in almost all speed tests,” claims Lars Boilesen, CEO of Opera Software. Opera 10.5 uses a new JavaScript engine called Carakan and a new graphics library called Vega, which Opera says make this the fastest browser ever produced for Windows.

I don’t know if it actually is faster than Chrome or the most recent version of Firefox – I have not tested that. But I tried it on a few different sites and pages, and noticed that the support of CSS3 is much improved. Opera 10.5 now supports such CSS3 features as “box-shadow”, “text-shadow” and others. It also provides support for some of the new HTML5 emerging standards, for instance for video.

Testers seem to confirm this this version is better and faster, but still a number of smaller issues remain. See, for instance the extensive testing in Betanews and the Javascripts tests referred in Fiercecio. There are also some issues concerning DIVs that don’t display quite right under certain circumstances and TABLEs that sometimes take to much time to load.

What annoyed me the most was that Opera on install set itself up as the default browser without asking me. To me that is a no-must-do. Something that makes me mighty upset, and that forced me to spend time to find out how to reset this.

My feeling is that this is a good step ahead for Opera, but that even so they should perhaps have waited a little to get things a little more right.

©2010 nekkidblogger. All Rights Reserved.

CSS is one of the most important technologies on the web today. It gives tremendous power in styling web sites and reduces the complexity of code as well as the time it takes to maintain and change sites – especially for large sites with hundreds or thousands of pages this is extremely important. CSS also gives web developers power to style web sites so that they are usable, compact, good looking, and consistent in layout.

In addition to the essential CSS basics – cascade, inheritance, contextual selectors, and specificity – this book covers advanced techniques like accessibility, hacks, and filters. It concludes with a case study, and features a CSS reference section that allows you to look up required syntax as quickly as possible. It also provides examples and code that is standards compliant and semantically good.

Collison’s writing style is relaxed, clear, and appropriately humorous. He even tells you (often — he’s English!) when’s a good time to grab a cup of tea. He presents complex topics very clearly.

Beginning CSS Web Development: From Novice to Professional by Simon Collison is the perfect book for newcomers to CSS and for those slightly more-experienced CSS designers who need a soup-to-nuts review.  A very well organized and usable book, and a book that I am happy to have in my CSS library. I recommend it!

Links to books by Simon Collison at amazon US and amazon UK.

©2010 nekkidblogger. All Rights Reserved.

I really liked CSS Web Site Design and the training materials. Eric Meyer moves you back and forth, shows how minor changes to rules and syntax can affect the look and feel of a web page, and demonstrates the correct use of CSS in a very thoughtful manner. If you really want to learn by doing, I can hardly think of a better guy to instruct you than Eric Meyer!

The book teaches you to easily make minor changes to a site or perform a complete overhaul of the design. In CSS Web Site Design, leading industry expert Eric Meyer reviews the essentials of CSS, including selectors, the cascade, and inheritance. The training also covers how to build effective navigation, how to lay out pages, and how to work with typography, colors, backgrounds, and white space, all using a project-based approach. By the end of the training, viewers will have the tools to master professional site design. Exercise files accompany the training videos, allowing you to follow along and learn at your own pace.

The setup is very professional, and easy to watch. Eric Meyer uses a made-up site, Javaco Tea, for teaching the CSS concepts. And, he goes through every detail, from masthead to footer, explaining how each piece works. And he really teaches you the latest techniques for designing Web sites with CSS.

The included CD-ROM is loaded with classroom-proven exercises and QuickTime training videos, and real-world projects take you through the Web page creation process, one step at a time. It has over 60 Step-by-Step Tutorials

• Using CSS and XHTML together
• Learning essentials of selectors, inheritance, and the cascade
• Creating CSS navigation
• Laying out pages with CSS
• Adding colors and backgrounds
• Setting typography
• Creating white space, margins, and borders
• Creating tables
• Styling for print
• Plus much more

A great book, with great hands-on training, by a great author! It is expensive, but well worth it in terms of time you might save later on and mistakes you will avoid doing! (You can also buy it without the video training – but I recommend getting it with.)

Links to Eric Meyer’s books at amazon US, amazon UK, and amazon CA.

©2010 nekkidblogger. All Rights Reserved.

The Ultimate CSS Reference is also well laid out, easy to look up as a reference, and well organized. The writing is short, clear, concise and to the point. Just as a reference book should be.

It also has some additional, very useful and great features. One is that after every property, there is a little box that explains which browsers are compatible with it. The book even explains if the property is buggy, and explains why and if there is a fix – it contains a lot of useful CSS hacks. Also, there are quick references stating whether or not attributes are inherited, what their initial values are, and which version of W3C specification they come from.

As with any book of this nature, it is out of date virtually as it’s printed in some respects. For instance, the newest versions of the major browsers are not covered. Even so, this book, and also its companion, The Ultimate HTML Reference, are definitely two books that are useful and that will stay so for quite a while.

To me, this book is a must. The only other reference book that can compete with it is Eric Meyer’s Cascading Style Sheets – The Definitive Guide. However, this book has a slightly more complete coverage, at the same time as it doesn’t go quite as deep into some issues as Eric Meyer does in his book. So if you don’t want to keep both around, it’s a matter of taste and preference. Recommended!

Links to books by Tommy Olssen at amazon US, amazon UK, and amazon CAN.

©2010 nekkidblogger. All Rights Reserved.

And the book actually doesn’t address most of the topics of CSS at all – it’s mainly about various CSS display properties that create a table layout appearance. More than 95 of the pages address this. The thing that’s new and which I guess motivated this book is that finally Microsoft Internet Explorer, with the release of version 8, supports these CSS 3 properties (or, actually, CSS2.1).

So far, most CSS layouts have been created using positioning and floats. Either approach has problems that need fixes and make the designs relatively complex. The new CSS “display: table” instead gives you a table layout with a few easy lines of CSS.

The book gives you concrete examples of how to get up to speed with these CSS3 properties and explains CSS properties such as table, table-row, table-cell, table-row-group, table-header-group, table-footer-group, table-caption, table-column, table-column-group. It also takes a fast run-through CSS3 layout techniques such as grids and multi-columns.

To me this book is an introduction to the topic, but not an in-depth treatment. The sample code is very, very simple. And at times it is annoyingly light. For instance, it is very easy to build conditional style syntax into a CSS table design so that it degrades gracefully into a HTML table design for earlier versions of Internet Explorer not supporting CSS2.1. The authors, however, do not go into this. This is pretty disappointing and reduces the usefulness of the book. IE6 and IE7 are still probably used by 40-50% of web users, so unless you support them better than this book proposes you may be in trouble.

Everything you know about CSS is wrong is a book about CSS tables I would recommend for beginners, and only until some better book with wider coverage comes along.

Links to Everything you know about CSS is wrong at amazon US, amazon UK, and amazon CAN

©2010 nekkidblogger. All Rights Reserved.

This is a CSS layout any beginner can create, just as the table designs of the old days. And it is very robust and scalable. So my guess is that it will become very, very popular. Here is all it takes (non-essential rules omitted). First the CSS:

body  { font-size: 100%; text-align:center;  }
#wrapper  { width: 500px; margin: 40px auto;  }
#main {display: table-row;  }
#side-left,#content,#side-right {display: table-cell;}
#header  { background: gold; height: 100px;  }
#footer  { background: gold; height: 100px; clear:both;   }
#content {  background: blue;
width: 300px; }
#side-left, #side-right  { background:yellow; width: 100px;  } 

And here is the essential markup (load order of elements given by the numbering):

<div id="wrapper">
<div id="header">
<h1>1.</h1>
</div>
<div id="main">
<div id="side-left">
<h1>2.</h1>
</div>
<div id="content">
<h1>3.</h1>
</div>
<div id="side-right">
<h1>4.</h1>
</div>
</div>
<!-- main -->
<div id="footer">
<h1>5.</h1>
Nekkidblogger CSS-fun
(c) Nekkidblogger (2010)</div>
</div>
<!-- Wrapper -->

This produces the layout in the figure below. (Here is the web page, with source code, including some fixes.)

There are two problems with this. The first is that IE 7 and earlier does not support the “display: table” and similar CSS (display:table-row, display:table-cell). However, this can easily be dealt with, and I have included the necessary conditional style to IE lte 7 browsers in the source code for the figure.

The second is a SEO concern. Many authors, such as Rachel Andrew and Kevin Yank in “Everything you know about CSS is wrong!” and others on the internet, express some concern about the fact that it is impossible to load content first unless the content is in the first column. That is, the content loads in the order indicated by the numbers in the image above. The reason is that as the current implementation of the new CSS syntax does not support “rowspan” and “colspan”, “table hacks” like the one I wrote about in a previous article can not be implemented.

And this seems to be very true. I have tried to twist and bend the order of the columns a lot without result. There are no true hacks, as far as I can see. But there is a way to “hack it” even so. If you really want the content (the middle column) to load first for SEO (Search Engine Optimization) reasons, it can be done. But not by a hack, more something like a “semi-hack”:

First we place a container behind the three main columns and make it relatively positioned. Then we use a new div that we load (in the markup) after the three columns and that overwrites the original left column. The purpose of the extra container is to easily and precisely position the new column absolutely.

What this means, is that you do not load content in the original left sidebar, but leave it without content. Instead you load the sidebar content into the new absolutely positioned column. Doing this, you have, in effect, made your content in the middle sidebar load first. In the table hack (see above) we similarly fill the first cell only with the spacer.gif – and leave it empty of content – so there is a clear similarity.

Here is the new CSS for a new container and the new column:

#contain { position: relative; }
#side-left2  { background:red; position:absolute; overflow:hidden;
top: 0; left: 0; height:100%; width: 100px;   }  

And the new markup (I have also re-numbered the footer)(essential rules only), still short and sweet:

<div id="wrapper">
<div id="header">
<h1>1.</h1>
</div>
<div id="contain">
<div id="main">
<div id="side-left">
<h1>2.</h1>
</div>
<div id="content">
<h1>3.</h1>
</div>
<div id="side-right">
<h1>4.</h1>
</div>
<div id="side-left2">
<h1>5.</h1>
Sidebar left content
(navbar) goes here!</div>
</div>
<!-- main --></div>
<!-- contain -->
<div id="footer">
<h1>6.</h1>
Nekkidblogger CSS-fun
(c) Nekkidblogger (2010)</div>
</div>

The result is shown in the image below (also, see demo here, with all the CSS in the source):

As you can see, the (red) new sidebar column numbered 5 – meaning it is the fifth element in the markup, has now overwritten the old (yellow) left sidebar. This means that the content column (element 3) now load before the sidebars with whatever SEO benefit this brings. This is all valid CSS and markup, and I have tested it in a number of browsers (see the demo).

Also, I have written the code so that it degrades into a table (with the semi-hack still working) for IE7 and earlier IE versions. And it is easy to turn it into a flexible width design with fixed sidebars (just set the width to a percentage or em’s, and the width of the middle column to 100% or em’s, and use “min-width” and “max-width” if desirable).

The design has some well known weaknesses due to the absolute positioning of the new left sidebar that I outline and discuss how to deal with in the demo file. Also, since this ends up as a hybrid design it has some of the advantages of the “display: table” layout, but not all, and may perhaps be viewed as involving a trade-off between the ease of use of the new CSS table design and SEO concerns. To keep it simple I have used the semi-hack here on a fixed layout, but it only really makes sense to use it on hybrid CSS layouts, as fixed CSS layouts are relatively straightforward.

©2010 nekkidblogger. All Rights Reserved.

One of the often repeated, and seemingly decisive arguments in the eyes of the die-hard proponents of CSS layouts, is that “tables are for display of data” (see, for instance, “Why tables for layout is stupid“, stating that “Tables existed in HTML for one reason: To display tabular data”). The fact that this and similar assertions are made a 1000 times do not make them any more true. And it really is just a silly argument. Who cares what tables “were made for”? The more important question is what they are useful for, and where they are easier to use and more efficient than other syntax?

Alternatively, one could twist the argument around, and ask: Were DIVs made for layout? And if they were not, does that mean we shouldn’t be using them?

The same article I referred to above (really only one of a thousand saying the same things, and just used here as a representative of a set of false truisms) also claims that CSS-designs (the numbering is mine, they provide a longer list):

1. make your redesigns more efficient and less expensive
2. help you maintain visual consistency throughout your sites
3. get you better search engine results
4. make your sites more accessible to all viewers and user agents

1. Make your redesigns more efficient and expensive? Than what? Than a table-based design with layers of nested tables and no CSS? There is nothing preventing anybody from just using <td> </td> as a container just like a DIV and styling it with CSS just like DIVs are styled? Or using a DIV wrapper around the table, and fill the table up inside with styled DIVs, just as in a DIV-based CSS design! So the argument is just vacuous in the sensee that it only applies to a constructed (and not even well specified straw man).

2. Help you maintain visual consistency throughout you site? Exactly the same argument applies – relative to what?

3. Get you better search engine results? What is this based on? Does the author assume that search bots are unable to see what is inside HTML like <table><tr>.. </tr></table> whereas they perfectly understand and see content inside <div> .. </div>? If that is the argument, then it is just plain false. And if it is that DIV-based layouts can load content first, then it is equally false, as I and many others have shown that you can load content first in a table-based layout as well! What is more, I have not seen any research indicating that table-based designs are better or worse than DIV-based ones from a search engine optimization point of view, providing sensible and semantic markup is being used. It would perhaps be better if such claims were not made by the proponents of the purist CSS approach unless the claims are backed up by solid facts or research.

4. Make your sites more accessible to all viewers and user agents? What does the author mean? On standard browsers tables are just as accessible. On cell phones and similar devices both table-based and DIV-based designs usually need alternative style sheets to be max accessible?

It would be nice if those of the almost religous sounding claims by proponents of the one true way of Web designs that have no sound logical or factual basis were left out of the debates. They are quite stupid and quite annoying.

©2010 nekkidblogger. All Rights Reserved.

So the problem is that the crawler or bot reads your site like this:

That is, you have a nice layout (much nicer than my illustration). And when the crawler meets your site’s HTML, the first thing it sees is all the stuff you have in your left sidebar. Perhaps a navigation menu, some news, some advertisements, or something. That’s number 1 in the figure. But all your content, or most important content, the stuff you really want to be indexed on, is in box 2. And you may have some asides or more sexy stuff than in sidebar 1 in your other sidebar as well.

So what you want is that the crawler or bot reads the page like this:

Here the crawler reads first the main column, then the left sidebar, and finally the right sidebar. Just as you want. And hopefully in a manner that gives better indexing. Previously I illustrated how easy it is to do this in a CSS-based layout. And on the net everybody tells you that this is something that is a very, very important argument in favor of CSS-based layouts as opposed to table-based layouts. I have read it so many times I have lost count of it. And, even so, it is just plainly wrong! It is a platitude repeated ten thousand times, but no more true for that.

It turns out that it is just as easy to manipulate the sequence in which columns are read in table-based layouts as in CSS-based ones. Just look at this code:

<div id="wrap">
<table border="0" width="100%"><tr>
   <td id="sidebar1" style="padding: 0pt; height: 1px;">
        <img src="pics/spacer1x1.gif" alt="" width="1" height="1" /></td>
  <td id="content" rowspan="2">
        <h4>1</h4>
        <p>Content  is the first to load. Good for SEO!
        </p><p style="padding-bottom: 30px;">Columns are always equal in height</p>
  </td>
  <td id="sidebar2" rowspan="2">
       <h4>2</h4>
       <p>The second sidebar</p></td>
</tr><tr>
  <td id="sidebar1">
       <h4>3</h4>
       <p>First sidebar</p></td>
</tr></table>
</div>

It is short and sweet, no more messy than the Faux Columns
or The Holy Grail layouts. Perhaps less. And it reads the middle column first and has columns of equal heights, along with some other desirable qualities.

It rests on a very clever hack that I happened to find in Joe Clark’s Building Accessible Websites, and which according to him is due to Lauri Harpf of the Website APromotionGuide.com.

And it really is devilishly clever and simple: Instead of using 3 cells in a row, we use six. And in the first cell we use a 1×1 px gif. Then we use rowspan=”2″ to not have to bother with the extra cells, and end up with one extra cell that is 1px in height. And nothing looks different because the one-pixel spacer GIF is unnoticeable. But when you experience it serially, you get the content first, then I have let the right sidebar come second (note that I could have used the same hack and skipped the rowbar=2 there as well, to make it come third instead of second), and navigation (left sidebar) third.

It’s so simple and does the job so cleanly. So, using this smart table hack and some CSS (stylesheet here) we get the following result (see the page live here):

And now the crawlers and bots will encounter the content and the important stuff before they get to the navbar and ads and whatnot!

To conclude: I am actually a believer in CSS based layouts, but the choice between tables and CSS is not at all as clearcut and easy to decide as proponents of CSS-layout style tend to make it. You can do just about the same with tables as with CSS. Sometimes one is preferable, sometimes the other. It is possible to use semantic elements and DIVs inside a table, just as it is inside a DIV-based layout. And it is (almost) as easy to end up in a “DIV-ed nightmare” as it is to be tangled in nested table webs.

©2010 nekkidblogger. All Rights Reserved.

I have implemented the silly Microsoft “expression”-statements for IE-versions not supporting the standard CSS max-width syntax, I have applied Microsoft “filters” of all kinds because IE doesn’t support “box-shadow”. I have inserted extra inner div’s to boxes to make them look the same and have the same size in IE as elsewhere, and I have used unnecessary “clearfixes” (picture by courtesy of RobotJonny.com).

The picture, of course, is much too kind to IE7 (and perhaps even to Opera). It breaks things and messes up too. Even IE8 does that! According to rumors, IE9 will fix all of those things, but I will reserve the right to believe that when I see it. I seem to recall having heard similar things all the way up from IE5! And there are still plenty of bugs left …

No more. I have had enough. I am sick of seeing how bad beautiful typography looks in IE, how well-designed pages get messed up, how nice, discrete shadow effects mess up the fonts within the boxes they apply to in IE. But from now on, for the sites I operate myself, I am not going to bother any more. If Microsoft want to substitute my good looking fonts with thick, ugly looking letters, let borders collapse, and generally render my pages ugly, then let it be so.

From now on, I will consider all those things Microsoft problems that people using Internet Explorer should complain to Microsoft about or start using another browser. I will not help Microsoft by trying to make their inferior browser look good. There is no reason for me to spend lots of hours doing that. For design projects I do for customers I will do it if I have to, but only reluctantly and as little as possible.

That’s my new, radical design principle for 2010 and forwards. It is a very radical decision, as most people for some or other reason still use IE. But it feels very liberating. And it will be a huge time saver. From now on I will have fun and use all the new, wonderful properties of CSS3 and HTML5 as they get implemented in the good browsers. And let Microsoft worry about how IE supports the new standards.

To users with the wrong browsers I will only say this – go and get Firefox, Safari or Chrome if you want to see how sites really look! And now that new, very serious safety issues have been found with Internet Explorer as well, it definitely should be time to change!

©2010 nekkidblogger. All Rights Reserved.