This is a common question in the CSS forums and one I encounter almost on a daily basis. Therefore I am going to go right back to basics for this article and explain the fundamental reason why your site may look slightly different in various browsers.
Margins and Padding
One of the main causes for the many positional differences between layouts in various browsers is due to the default stylesheet each browser applies to give styling to certain elements. This usually involves setting default margins and padding to some elements to make them behave in a certain way.
For instance, paragraph (p) tags will have a margin applied to them so that each paragraph is separated by vertical white space and do not run into each other. The same applies to many other tags including heading tags (h1 etc). The problem occurs because the amount of margin (or padding) applied to these elements is not consistent across browsers. On many occasions Mozilla/Firefox will add a top margin to the element as well as a bottom margin. IE will however only add a bottom margin. If you were then to view these two browsers side by side you would see that the alignment would be different due to the top margin applied by Mozilla which could make your design not line up as expected.
In some designs this may not be a problem but in cases where position is important, such as aligning with other elements on the page, then the design may look bad or at least not as expected.
Here are some styles taken from the default Firefox 2.0 stylesheet (html.css) and immediately shows what is going on here:
- body {
- display: block;
- margin: 8px;
- }
-
- p, dl {
- display: block;
- margin: 1em 0;
- }
- h1 {
- display: block;
- font-size: 2em;
- font-weight: bold;
- margin: .67em 0;
- }
-
- h2 {
- display: block;
- font-size: 1.5em;
- font-weight: bold;
- margin: .83em 0;
- }
-
- h3 {
- display: block;
- font-size: 1.17em;
- font-weight: bold;
- margin: 1em 0;
- }
-
- h4 {
- display: block;
- font-weight: bold;
- margin: 1.33em 0;
- }
-
- h5 {
- display: block;
- font-size: 0.83em;
- font-weight: bold;
- margin: 1.67em 0;
- }
-
- h6 {
- display: block;
- font-size: 0.67em;
- font-weight: bold;
- margin: 2.33em 0;
- }
As you can clearly see there are various properties that have been set but the most important are the margins and padding as they vary considerably. If you were to look at the default IE stylesheet you would find that there would indeed be few styles that were the same as the above.
What Can Be Done
Since we can never be sure whether the browser's stylesheet has applied margin or padding to an element the only real option is to explicitly set the margins and padding ourselves. This way we can over-ride the default stylesheet so that we know exactly how each element will behave in each browser.
As we don't really know what elements have default styling applied to them (across all browsers) we must set the margin and padding for every element we use. In most cases we are just talking about block level elements -- you do not need to do this for inline elements such as em, strong, a, etc which seldom have any margin or padding applied to them. Although em and strong will have some styling already applied to them to give them their strong and emphasized look.
Here is how you can reset the padding and margin of block elements when you use them:
- html,body{margin:0;padding:0}
- p {margin:0 0 1em 0;padding:0}
- h1{margin:0 0 .7em 0;padding:0}
- form {margin:0;padding:0}
Take the body element for example, and notice that we have included the html element also, and then we have re-set padding and margins to zero. As explained above, various browsers will apply different amounts of margin to the body to give the default gap around the page. It is important to note that Opera does not use margins for the default body spacing but uses padding instead. Therefore we must always reset padding and margins to be 100% sure we are starting on an even footing.
If you did not reset the margins or padding and you simply defined something like this:
- body{margin:1em}
Then in Opera you would now have the default padding on the body plus the extra margin you just defined there by doubling the initial space around the body in error.
Also be wary of doing things like this:
- html,body {margin:0;padding:1em}
You have now defined 1em padding on the html element and 1em padding on the body element giving you 2em padding overall which probably was not what you intended.
Global White Space Reset
These days it is common to use the global reset technique which uses the universal selector (*) to reset all the padding and margins to zero in one fell swoop and save a lot of messing around with individual styles.
e.g.
- * {margin:0;padding:0}
The universal selector (the asterisk *) matches any element at all and to turn all elements blue we could do something like this:
- * {color:blue}
(Of course they would only be blue as long as they have not been over-ridden by more specific styles later on in the stylesheet.)
The global reset is a neat little trick that saves you having to remember to reset every element you use and you can be sure that all browsers are now starting on even footing.
Lists need a special mention here as it is not often understood that the default space or the bullet in lists is simply provided via the default stylesheet in the provision of some left margin. Usually about 16px left margin is added by default to the UL to allow the bullet image to show; otherwise there is nowhere for it to go. As with the problems already mentioned we also need to cater for some browsers that don't use left margin but use left padding instead.
This can be quite a big issue if, for instance, you have not reset the default padding and margin to zero and try something like this.
- ul {padding:1em}
In browsers that have a default margin applied you will now get the default left margin of 16px (approx) and a default padding of 1em, giving you approximately twice the amount of space on the left side of the list. This would, of course, make the design look quite different in the various browsers and not something you would wish to do.
In essence the margin should have been reset to zero, either initially with the global reset, or by simply doing the following:
- ul {margin:0;padding:1em}
Now all browsers will display the same, but you will need to ensure that the 1em is still enough room for the bullet to show. I usually allow 16px left margin (or padding) as a rough guide and that seems to work well. (You can use either padding or margin for the default bullet space.)
Drawbacks
However, as with all things that make life easier there is a price to be paid.
First of all, certain form elements are affected by this global reset and do not behave as per their normal defaults. The input button in Mozilla will lose its "depressed when clicked effect" and will not show any action when clicked other than submitting the form, of course. IE and Opera do not suffer from this problem and it is not really a major issue but any loss of visual clues can be a detriment to accessibility.
You may think that you can simply re-instate the margin and padding to regain the depressed effect in Mozilla but alas this is not so. Once you have removed the padding then that changes the elements behavior and it cannot be restored even by adding more padding.
There is also an issue with select/option drop down lists in Mozilla and Opera. You will find that using the global reset will take away the right padding/margin on the drop down list items and that they will be flush against the drop down arrow and look a little squashed. Again, we have problems in re-instating this padding/margin in a cross browser way.
You can't add padding to the select element because Mozilla will add the padding all around which includes the little drop down arrow that now suddenly becomes detached from its position and has a big white gap around it. You can, however, add padding right to the option element instead to give you some space and this looks fine in Mozilla but unfortunately doesn't work in Opera. Opera in fact needs the padding on the select element which as we already found out messes up Mozilla.
Here is an image showing the problems in Firefox and Opera:
There is no easy fix -- it's something you have to live with if you use the global reset method.
If you do not have any forms in your site (unlikely) then you don't have to worry about these issues or you can simply choose to ignore them if you think your forms are still accessible and don't look too bad. This will vary depending on the complexity of your form design and is something you will need to design for yourself. If you are careful with the amount of padding you add then you can get away with a passable design that doesn't look too bad cross-browser.
Another perceived drawback, of which there has been a lot of discussion, is whether the global reset method could have speed implications on the browsers rendering of the page. As the universal selector applies to every single element on the page, including elements that don't really need it, it has been put forward that this could slow the browser down in cases where the html is very long and there are many nodes for the parser to travel.
While I agree with this logic and accept that this may be true I have yet to encounter an occasion where this has been an issue. Even if it were an issue I doubt very much that in the normal scheme of things it would even be noticeable but of course is still something to be aware of and to look out for.
The final drawback of using the global reset method is that it is like taking a hammer to your layout when a screwdriver would have been better. As I have noted above there is no need to reset things like em, b , i, a, strong etc anyway and perhaps it's just as easy to set the margins and padding as you go.
As an example of what I mean take this code.
- * {margin:0;padding:0}
- p,ol,ul,h1,h2,h3,h4,h5,h5,h6 {margin:0 0 1em 0}
I have negated the padding on all elements and then given a few defaults for the most popular elements that I am going to use. However, when coding the page, I get to the content section and decide I need some different margins so I define the following:
- #content p {margin-top:.5em}
So now I have a situation where I have addressed that element three times already. If I hadn't used the global reset or the default common styling as shown above then I could simply have said:
#content p {margin:.5em 0 1em 0;padding:0}
This way I have addressed the element only once and avoided all issues related to the global reset method. It is likely that you will apply alternate styling to all the elements that you use on the page anyway and therefore you simply need to remember to define the padding and margin as you go.
- form{width:300px;margin:0;padding;0}
- h1{color:red;background:white;margin:1em; padding:2px;}
Conclusion
The safest method is simply to define the margins and padding as you go because nine times out of ten you will be changing something on these elements and more than likely, it will involve the padding and margins. This saves duplication and also solves all the issue that the global reset may have.
The global reset is useful for beginners who don't understand that they need to control everything or who simply forget that elements like forms have a great big margin in IE but none in other browsers.
In the end it's a matter of choice and of consistency. Whatever method you use make sure you are consistent and logical and you won't go wrong. It is up to the designer to take control of the page and explicitly control every element that is used. Do not let the browser's defaults get in your way and be aware that elements can have different amounts of padding and margin as determined by the browser's own default stylesheet. It is your job to control this explicitly.
Further Reading:
http://meyerweb.com/eric/thoughts/2004/09/15/emreallyem-undoing-htmlcss/
http://meyerweb.com/eric/articles/webrev/200006a.html
http://tantek.com/log/2004/09.html#d06t2354
http://www.456bereastreet.com/archive/200410/global_white_space_reset/
0 comments:
Post a Comment