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: css
0 Comments:
Post a Comment
<< Home