| The most difficult thing in CSS to get right is the | | | | work perfectly in Firefox, but not in IE5, IE6 or IE7. |
| layout of your site. Here are a couple of tips dealing | | | | This brings us to the next tip. |
| just with that. Some of these tips are not exactly | | | | Tip 5 : Decide which browsers you are going to build |
| new, or rocket science, but hopefully they will save | | | | your CSS for and test from the start |
| someone a bit of bother somewhere! | | | | Some purists insist on making sure that your website |
| Tip 1 : Clear out the default padding and margin | | | | work for all possible browsers, others only make it |
| settings before you start working. | | | | work for the 'major' browsers. How do you know |
| Different browsers have different default margin and | | | | exactly which browsers are used the most? Once |
| padding sizes so you want to start with a clean slate, | | | | again W3 Schools come to the rescue. |
| so to speak. Use this command: | | | | On the following page, you can see which browsers |
| * | | | | are the most popular: From this page you can see |
| {margin: 0;padding: 0;border: 0; | | | | that something like IE5 is only used by about 1.1% of |
| }to clear all default margin and padding settings. Also | | | | browsers. It is up to you whether you consider it |
| note the border, which is set to 0. Please note that if | | | | worthwhile to build your CSS to be compatible with |
| you do this, you will also get rid of the pesky purple | | | | this browser, or whether you are just going to test |
| border round click-able images, although some people | | | | your compatibility with IE6, IE7 and Firefox, for |
| argue that the purple border is necessary for | | | | example. Whatever you do, when you start building |
| accessibility and usability. But lots of people do not | | | | your CSS, start from the top, and test each and |
| like the purple border round images, and this is one | | | | every setting in each of the browsers as you go |
| way that you can get rid of it in one fell swoop | | | | along. There is nothing worse than building a perfect |
| without having to set img border=0 for each image | | | | website in Firefox, then finding out right after you |
| (which is against the strict markup rules in any case). | | | | have coded a 1000 line css file that it is broken in IE6. |
| Tip 2 : To center your layout, use a container div to | | | | To then debug and fix your code after the fact is a |
| contain all your content | | | | nightmare. |
| Declare it as follows: | | | | Tip 6 : Here is an embarrassing little tip for fixing your |
| #container | | | | CSS in IE6 or IE7 |
| {margin: 0 auto;width: xxxpx; | | | | Let's say your design works perfectly in Firefox, but |
| } | | | | is broken in IE6. You cannot use Firebug to determine |
| There are a couple of points here to take note of. | | | | where the problem might be since it WORKS in |
| DO NOT declare the width to be 100%. This defeats | | | | Firefox. You do not have the luxury of using Firebug |
| the whole object since you will just have to declare | | | | in IE6, so how do you debug an IE6 or IE7 |
| the sub elements within the container and then | | | | stylesheet? I often found that it helps to add |
| center THEM using margin : 0 auto. This is VERY BAD | | | | {border : 1 px solid red} or {border : 1 px solid |
| since it means that instead of declaring the central | | | | purple} to the problematic elements. This way you |
| layout once, you will have to declare it in multiple | | | | can often see why certain elements do not fit into |
| places for each element within your container. | | | | the space available. It is an embarrassing little tip since |
| Tip 3: Work from the top down | | | | it is so primitive and simple, but it works! |
| Literally start working on your CSS layout starting | | | | Tip 7 : Understand floats |
| from the top most elements in your design, as well | | | | Floating of elements is essential to understand, |
| as the 'top' elements in your HTML, such as the | | | | especially in the context of getting your floated |
| body, as well as your main containers. | | | | elements to work in the different browsers! |
| Declare your CSS commands on the highest level | | | | Basically elements such as divs are floated to the left |
| possible and try and declare something once only and | | | | or the right (never to the top or the bottom, only |
| let it cascade throughout. Only override the | | | | sideways). Here are a couple of things to take into |
| commands at a lower level when strictly necessary. | | | | consideration with floated elements. Each floated |
| This prevents a verbose CSS file that is difficult to | | | | element must have an explicit width specified. If you |
| maintain and understand. For example, if you have { | | | | are making use of floated divs to create a 3 column |
| margin : 0 auto} settings on each and every sub div | | | | or a 2 column layout, rather specify the widths in |
| within your container - you are in trouble. | | | | terms of percentages rather than fixed widths, and if |
| Tip 4 : Document what you are doing and use | | | | you do use percentages, make sure that the |
| Firebug and the Firefox browser to debug | | | | percentages do not add up to 100%, this will often |
| You are not writing your CSS code just for yourself, | | | | cause the right most column to drop below the rest, |
| some day some poor sod will have to debug it. Make | | | | clearly indicating that you are trying to fit something |
| numerous comments inside your CSS file to explain | | | | into the available space that is too wide for it. Rather |
| why you are doing things in a specific way. | | | | use percentages that add up to slightly below 100%, |
| Fitting in with this, you might find yourself having to | | | | such as 25%, 49%, 24% for a left column, middle |
| fix someone else's CSS more often than you think | | | | column and right column. |
| (or even your own, for that matter). Use the Firebug | | | | Floating elements can be extremely complex to |
| add-on for Firefox to debug your CSS. This is a | | | | understand and it is worth while to spend some time |
| life-saver with regards to giving you an insight into | | | | on good sites that provide specific guidelines and tips, |
| exactly where your design might be broken and why. | | | | such as the Position Is Everything website. |
| The only problem with this is that your design might | | | | |