Ripping websites apart and putting them back together...
... or how to fix queatrix website
I didn't have much to do this morning and since I felt that it was time for a little markup practice again, I had a "quick" look at queatrix's website. I had a good laugh for several minutes, I haven't seen so many "hacks" recently in HTML.
I pretty much had to throw everything away, the entire design was made with tables, the content was mixed with the design and stuff had been done in such an awkward way that it would have taken more time to fix than to start from scratch.
The result can be seen here: http://www.progressive-coding.com/projects/queatrix/
The design is fully W3C compliant, so is the CSS. The look should be the same across every major browser. I ran into slight problems because of the known problem of "3 fluid column design in CSS", for which there is no "correct" way of doing it.
I also threw about 2/3 of the images away and reduces the site size from 28kb to 5kb. The design isn't the same a 100%, I was too lazy copying the original css 100%, the result is "similar" (text size, font and positions may vary).