For web marketing training, presentations and workshops visit Pacifica Training. If you wish to ask questions about website marketing please head over and register free at the website marketing forum, a knowledge base and community driven discussion group.
Global CSS Selectors
Published: February 28, 2005
As I frequent several leading forums with regards to application and web development, the single biggest problem I see people having is DIV positioning using CSS. This is always going to be a problem as support for CSS is a bit hit and miss despite claims of 'so-called' compliance.
As people make the transition to tableless designs, they are causing the biggest headaches in layouts yet and forcing some long standing developers to stick with what they know best (using tables).
The benefits of CSS layouts are plastered across the internet but the main features are design flexibility, reduced client-side code and proper document structure.
Now, when laying out a site, the problems mainly stem from borders, margins and paddings (we're excluding IE5.*/Win box model problems for now). Nearly every element has these attributes set one way or another but the browsers all seem to make their own minds up and this leaves problems with cross-browser compatibility.
There's a great tip to start you on your way to getting pixel precision with your layouts and that's by using a global definition to set margins, paddings and borders to zero.
Check out the following:
*{
margin: 0px;
padding: 0px;
border: 0px;
}
Place the above into the top of your stylesheet and you eliminate half your problems. Now all you need to do is specify attributes to elements as and when you need them.
Although this seems like an obvious one and has been floating about the web for as long as I can remember, it still fails to be used to solve most positioning problems. *Correction* - it makes solving positioning problems easier and also reduces the size of the stylesheet as you now only need to cascade attributes as you require them saving those precious bytes of data to download :o]