Firefox CSS div / box model problem

The Problem: You've structured your page using a whole bunch of divs. Perhaps #top, #centre, #footer. Everything is inside #wrapper. Inside #centre you have several divs of class ".container". The containers comprise mainly of images - some of which are loaded from external sites. The containers are floated left so that their internal contents can also be floated. This is a standard scenario.

In firefox (1.5-2.0+), particularly if the images load slowly, there is an "overlap" effect, by which as the container divs fill up and expand themselves, the #footer, which has already been rendered, appears underneath the container divs.

In other words, the footer shows up first because it is just text and is rendered quickly. It will appear at the bottom of the page, say at 1000px down the page. The bug or feature in firefox means that as the divs above it expand they run down the page over the top of the footer which stays static in the place it was first loaded.

The Solution!
It is imperative that for every floated box/div, you also have specified a clear parameter. For things like content containers, or main page containers you can use clear: both. And for more complex layouts where you are mimicking tables, you can use clear: left or clear: right.

In my particular situation, I had not floated the #center div, and thus had also not specified a clear param. So, leaving #wrapper to take care of the centred positioning, I added the following lines to #centre:

float:left;
clear:both;

And for good measure, I added these to .container:

clear:both;


This seems to ensure that firefox will correctly push already rendered boxes down the page. Not sure if it's a bug or not. I guess it is, since in my understanding, divs have clear:both set by default, i.e. they are designed to act as paragraphs. I have seen other fixes such as the clearfix and the setting of height to 100%, but these didn't work for me. Perhaps they didn't apply.

Anyway, deep sigh of relief.

Making IE6 Behave With Cookies: P3P How To

If you've found this page then you've come up against IE6's privacy features. Namely that cookies are getting blocked and you need them not to be. Perhaps you need frames in your site, perhaps you're into affiliate marketing, but either way the cookies need to make it to your valuable surfer's computer!

At first Google search I was not impressed. If you want to pay around US$100 you can get software to do it for you. There was no way I was going to pay. For starters, I believe almost everything on the web should be for free, and secondly I knew in the back of my mind that I could get my head around an XML schema for less than $100.

So what do we want? A minimal P3P file that just works! When do we want it? Now! Let's face it - we just want our damn cookies to be written to a machine running IE6. I'm not saying privacy isn't important but the firefox/mozilla implementation works just fine for the majority.

So after a bit more searching around I found p3pbook. It's the accompanying website to what looks to be the definitive book on this stuff. They've got lots of examples and this is the most straight forward site I've found on the matter.

If you don't want to wade through the W3C Spec, this example document from the P3PBook shows you all the items of the schema. If you're serious about writing your privacy policy in perfect detail then you will have to check the offical W3C spec to understand the definition of each schema option.

Useful links
http://www.oreillynet.com/pub/a/javascript/2002/10/04/p3p.html

If you've found your post-XPSP2 net performance to have degraded...

Have a look here.

I strongly recommend getting Avast, Ad-Aware SE Personal, and SpywareBlaster to ensure that your "4226" events are actually caused by a legit programme. This tip is particularly useful to BitTorrent users who find that their client is a bit too greedy with the bandwidth.

.NET posts

From now on, all .NET related posts can be found on my new devlicio.us blog, which can be found here.

Head over and read the main feed - there are some great articles up already.

Filtering RSS feeds

The other day I had the idea that being able to filter high-volume RSS feeds would be very useful. I started developing a solution, but tonight I realised I hadn't checked if anyone else had the same idea. Googled and, yes, many others had. Most of them provided simple keyword filters (inclusive) which is, frankly, crap when you put that function in context. Take, for example, MSDN Blogs which generates at least 100 posts per day (less on the weekend). This is the conglomerated feed of all MS tech blogs. To apply a keyword filter to this is useless, since the whole reason I read it is to keep up to date with the Microsoft world. Filtering by such a precise method will cause many interesting topics to go unseen. Same with something like slashdot. In other words, keyword filtering won't cut it with blog browsing.

Filters like date range, author, and tag work well these types of feeds because they are broad. And that's why I chose Feed Rinse because they provide the above, a nice interface, and tiered membership so if you're really serious about feed filtering you can pay for the privilege. Shame I didn't think of it first but at least I now have decent filtered feeds available and I barely had to lift a finger!