Whenever I start a new project, I seem to be repeating myself when it comes to adding, and styling basic content: Headers, Lists and Tables etc.
So I decided to create a ‘Kitchen Sink’ of markup and basic styling, using some content from the great HTML-Ipsum.com plus a few extra bits.
I have recently been working on sites which have had the need for pixel perfect alignment, and I came across an alignment anomaly among the major browsers.
Previously, I have used IE7/ IE6 specific style sheets with completely new backgrounds, each 1px to the left or right of the original to compensate, but I decided to do some digging and found this blog post:
http://www.sohtanaka.com/web-design/1px-background-alignment-bug/
One of the comments I came across suggested a very simple alternative to multiple stylesheets and images, and is the version I used in my recent design:
html{background: #242424 url('../img/background.gif') repeat-y center; margin-left: -.1px; /*1px shifting hack*/}
A simple use of a margin allows the same image to be used for all browsers. What’s even better is that, although technically a hack, it is valid.
My tweet last week sparked a large discussion , and so I decided to try and find some opinions, and hopefully definitive answers to the H1 debate.
The debate seems to polarise the web community, with many web designers using differing methods. Some tag the logo as an H1 element whilst others using the H1 for the page title.
During the weekend, I spent a few hours with serial Twitter developer Ollie Parsley and we created www.h1debate.com. The website was massively more popular than either of us imagined which in the space of a week, had been featured on over 20 websites, visited over 3,000 times and has had over 300 unique votes on the subject.
As of 6th Feb 2009, the ratio is split 70/30, with 70% of people preferring to use the H1 tag for the main heading, and 30% opting to wrap the company name or logo around an H1. Continue reading