Monday, January 23, 2006

Cross-Browser CSS

I suppose the main advantage of working with websites all day every day is that there's a certain amount of time that you can dedicate to individual tasks. The past two weeks have seen me taking a table-based site I had designed and re-forming it into a validatable, cross-browser (Firefox, Opera and IE) friendly CSS designed site.

I spent nearly a week of 9-5 work getting to grips with the layout which leads me to the main point of this post. If I'd included the follwing infomation right at the start I would have had much less pain trying to get the Firefox and IE pixel perfect design I wanted.

* {
margin: 0px;
padding: 0px;
}

h1, h2, h3, h4, h5, h6, p, blockquote,
form, label, ul, ol, dl, table, fieldset, address {
margin-bottom: 1em;
}

Basically, what we are doing here is in effect collapsing all default borders and margins so we start on a level playing field for cross-browser compatibility. IE's crap margin model was the bain of my life until i discovered this.

The second bit of code adds an essential bott0m margin to most of the useful tags so that you dont have to go adding a margin-bottom to every attribute (if I've missed one please tell me).

Labels:

Hello, Good Evening and Welcome

Well, I suppose i should write this in the hope that someone will read it. It's my hope to first of all note down and track useful web design, promotion and programming tips for myself and if anyone else could find them useful then all the better.

By the nature and title of this Blog it's fairly easy to see that I'm an IT professional employed by a number of companies taking care of search engine optimisation and promotion, web and database design and web programming from PHP to ASP.

I enjoy learning about new web technologies and following Blogs and forums, my favorites of which I shall post here.

At the moment i'm following CSS and MySQL but who knows what wierd and wacky things I'll discover in the next few months!

Feel free to leave comment, see you!