In particular some huge issues involving floats breaking across columns have been fixed. Since we use the same code for page layout as for columns, this also means a lot of problems with printing (and print previewing) pages with floats have been fixed

Hopefully this means that floated elements (read: columns) will be continued on the next page, as they should, instead of disappearing into some kind of magical void.

The article referenced above contains some very interesting CSS news regarding columns — go check it out! It looks like Firefox 1.1 is really going to up the stakes in the CSS 2.1 compliance field. Opera and Mozilla are certainly the driving forces at the moment, though I don’t doubt the Safari team are working hard to stay in the game.

• Fixed positioning (elements and backgrounds)
• 24-bit PNG
• Sizing/positioning an element using left:; right:; top:; bottom:;
• Styling of the html element (which IE6 already does… sort of )
• XHTML 1.1 served with its correct mime-type (insert evil laugh here!)

I’m very tempted to make up a second acid test based solely around the multitude of bugs associated with IE’s hasLayout property, but really, what’s the point?

Wednesday, 9th of February (tomorrow!!!), I’m giving a presentation to the Brisbane Web Standards Group entitled ‘Site in an Hour — Making Complex CSS Layouts’.

If you’re in the area, why don’t you come along? I’d really like to make it more of a group discussion/brain storm than just myself standing at the front of the room blathering on like a nerd.

If you do intend on coming, RSVP NOW, while you still can.

For those interested but unable to attend, the S5 presentation and the example site are now available.

Example 1

<table summary="">
<caption></caption>
	<thead>
		<tr>
			<th scope="col"></th>
			<th scope="col"></th>
			<th scope="col"></th>
		</tr>
	</thead>
	<tfoot>
		<tr>
			<td colspan="3">Published by <cite>......</cite></td>
		</tr>
	</tfoot>
	<tbody>
		<tr>
			<td></td>
			<td></td>
			<td></td>
		</tr>
	</tbody>
</table>

Example 2

<blockquote cite="Published by ......">
<table summary="">
<caption></caption>
	<thead>
		<tr>
			<th scope="col"></th>
			<th scope="col"></th>
			<th scope="col"></th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td></td>
			<td></td>
			<td></td>
		</tr>
	</tbody>
</table>
</blockquote>

I’ve decided which one I prefer, but I’d like to hear others’ views about this. I almost forgot to mention — one example may be completely wrong.

Many will see the obvious similarities between this post and Dan Cederholm’s “SimpleQuiz” series, however I have no intention of doing this sort of survey again so please flame/troll elsewhere. Thankyou and have a great day

Here’s the CSS snippet in question.

* {
	padding:0;
	margin:0;
}

The aim here is to save time when dealing with the minor cross browser differences caused by varying default values for these properties.

Who Benefits the Most?

The people who would benefit the most from using this technique are those who are just starting to build entirely CSS styled sites and are in danger of developing the very common conditions of ‘class-itis’ and ‘div-itis’ instead of directly styling and positioning semantic elements. Cameron summed it up perfectly:

The most oft-cited reason for not using semantic HTML is the perceived control that can be achieved by using tables/a lot of divs. By removing this “mystery” dimension from the size of elements, it could help people to become accustomed to styling semantic HTML.

Correct Usage

This technique was added as an afterthought to the original post and as such was not accompanied by any details regarding exactly what is required of the developer if they use this approach. Firstly, it is important to remember that this rule cancels the padding and margin of every single element; something which has already been found to have the negative side affect of hiding the drop-down arrow of a select form widget in Firefox. That problem is very simple to fix, (re-apply padding to select select { min-width:1.5em; } – thanks Bryan) but it does bring up a good point — care should be taken when applying this rule to a page which contains forms as usability must remain paramount whenever styling forms.

Examples

That brings me to the second point regarding correct usage; following the declaration with your own global padding and margin rules. If we look at this unstyled test page, and then the same page with the rule applied, you can see just how drastic an effect this declaration has.

Now that you’re comfortably in control of the padding and margins in every CSS able browser, it’s time to do something useful with that power. You could stick in something like this:

* {
	padding:0;
	margin:0;
}
body {padding:5px;}
h1, h2, h3, h4, h5, h6, p, pre, blockquote, form, label, ul, ol, dl, fieldset, address { margin:20px 0; }
li, dd, blockquote { margin-left: 40px; }
fieldset { padding:10px; }

View test page 3

This will basically replicate the original layout of the page in Mozilla, only it will be cross-browser; no differences on lists or other troublesome elements in IE or anywhere else. That’s effective, but it’s far from exciting. What about if we replaced all the values with relative units (% or em)?

* {
	padding:0;
	margin:0;
}
h1, h2, h3, h4, h5, h6, p, pre, blockquote, label, ul, ol, dl, fieldset, address { margin:1em 5%; }
li, dd { margin-left:5%; }
fieldset { padding: .5em; }

View test page 4

Hey now, that’s a bit more like it! Now we have the basis for a site whereby all side margins are controlled by browser width and all vertical spacing is controlled by font size. Quick, simple and highly usable — this could easily be used as the basis for a solid but highly flexible fluid layout. All you need to do now is add the columns .

Have something to add? Comments are open as always…

Thanks to Russ for saving me from having to type out the elements used for the test page.