I’ve started work on a new site this week and one of the things I stumbled upon was a nifty method for reseting the default values of potentially any CSS property. This is especially useful because each browser has different ‘default’ settings (such as padding and margins).
In extreme cases browsers will position HTML elements using different CSS properties, for example IE uses margin-left to indent lists, while firefox (or rather its engine) uses padding-left. This code:
* {
padding:0;
margin:0;
}
will reset all spacing default properties. Excellent! However now we have to manually set all the margins and padding of our ‘H1->Hx’ elements, a potentially lengthy process. However we can rectify this by assigning several elements properties in one go.
h1, h2, h3, body {
margin: 10px;
padding: 10px;
}
Obviously these are only simple examples, but this is one technique I will be using in all of my websites from now on… if you are interested in further reading, this is an invaluable link ‘Eric Meyers, CSS Legend‘.
So today I was playing around with -moz-border-radius and I was having problems with text touching the border of my div, ideally I wanted some sort of internal margin… ok so, padding I thought… 5px or so should do it.
I would have been right as well, except I had defined a width for the div and when used in combination with the padding property it was causing the div to expand beyond the width I had specified, ugh!
To get around this I had to take the border size into consideration:
border: 4px #BB834B solid;
padding: 10px;
width: 180px;
would become:
border: 4px #BB834B solid;
padding: 10px;
width: 170px;
8px have been deducted for the left (4px) and right (4px). This makes sense, but it would make more sense for the borders to be deducted from the width, not added. If anyone can suggest a better method, I would be very interested!
UPDATE:
As it happens, I have found a better solution, rather than deducting the borders from the width… simply don’t determine a width, but wrap the div around an outer div (which has its width set). That way the inner div will not expand when you add the padding:
<div class='outer_div' style='width: 200px'>
<div class='inner_div' style='border: solid 4px #000000; padding: 10px;'>
</div>
</div>
Thanks to Safari 4.0 Beta I had the oppurtunity to play with ‘border-radius’ property which should soon be implemented in all major browsers as part of the CSS3 standard. Using only one line of code I can turn an ordinary div, into one with round edges.
border-radius: 1em;
This simple line of code can make a dramatic change to the appearance of a site and prevents designers needing to use complex (although elegant, NiftyCube) 3rd party solutions. At present Safari 4.0 beta and Firefox 3 use a slightly different syntax:
-moz-border-radius: 1em;
for firefox &
-webkit-border-radius: 1em;
for Safari. Obviously you don’t just have to use relative sizes (em), pixel sizes will work just as well. Roll on CSS3!