Templatix Blog

Note1: This article is intended at medium-experience designers. The beginners might use it too, but it may sound a bit too technical to them, and the advanced ones might start yawning at already-known infos

Note2: This article will NOT focus on solving various CSS problems (this kind of articles are to be found in the rest of the blog) – it will only provide you with a relatively small set of simple rules to keep you from getting int crossbrowser problems in the first place.

We all know the problems that come up when cutting a HTML/CSS layout and it turns out that it shows up completely different  in various browsers. We personally wouldn’t mind this so much if our clients weren’t so darn picky and exasperatingly minute But we end-up HAVING to cut generously cross-browser layouts, that look precisely identical no matter what you’re viewing them into.

So here’s my best practices to achieve this goal. If you take these into account when cutting any layout into HTML/CSS, you’ll almost never need to verify it in all the browsers again (never = 99% of the cases, which is pretty darn good).

1. The right tools: develop in Firefox, with Firebug installed and ready to use. This will always help you figure out what goes wrong and lets you test various workarounds. I know this saves me TONS of developing time. For other browsers, you could use the Modi V2.0 – it’s much weaker but a life-saver sometimes.

2. Always plan ahead. Never start cutting a layout before having a clear idea of every thing you’re going to do with it. Pre-cut it, either mentally or on a piece of paper, go through each and every element (at least for the most impoprtant ones), immagine what things might go wrong with it and remember these for later when you’re going to actually do the job.

3. Never use horisontal margins (left-margin / right-margin) on left/right-floating DIVs. Why? Because almost every browser interprets those darn margins differently. So, instead of hacking and over-hacking, for each browser individually, apply this simple rule instead.

4. When using absolutely-positioned elements, ALWAYS define that element’s position too. Why? Because the positioning of an element is always relative to the positioning of that element’s first parent with a specified positioning. And some browsers consider that the first parent is the one to relate to, while others, when not finding a specifically-positioned parent, consider the BODY to be that parent, which trashes the whole thing. So, keep in mind this simple fourth rule and you’ll always be OK.

5. Always use the CLEARFIX when using floating or block elements inside another block, if you want that parent block to extend vertically as to include the floating elements into its space. HTML and CSS were designed in an era where floating/block elements were supposed to wrap text around them, so using the CLEARFIX will safely get you through this issue.

6. Always try to avoid the table-related display properties (like display: table / table-cell etc). These have outrageously dissimilar behaviours in all the browsers and will almost certainly throw you into a wild goose chase around the bushy stuff CSS is made of. If you really must, use tables instead, where really needed. It’s not a disgrace, it’s even better to use the best of both table/div worlds.

7. For PNGs, always use the simple PNG hack I use too. This way, IE6 will finally understand PNG transparency too, and it’s best to anticipate and fix than to forget and wake up with IE6 bugs.

8. Pay attention to borders! If possible, never release a layout before verifying how the borders affect the layout. Why? Because some browsers tend to place the borders outside the box, others place them inside. This may or may not add up to the total weight / height of the bordered elements, and needs constant checking.

9. Test! Don’t rely 100% in what I’m writing here: I’m sure there are other aspects too that can cause havok on your cross-browser job. Install the most important browsers and test your work every once in a while, in the process. I test against: IE6, IE8, FF, Chrome, Opera and Safari (on Windows).

10. Always learn and save. Learn from your cross-browser experiences, and save those in a specially built template. I know I do. For example, in time, I came acrsoss various cross-browser problems that needed very specific browser-specific solutions. My answer tho this: a special “hacks” section at the bottom of the CSS template I always use when starting a new HTML/CSS cut. You can have it too, it’s “free-for-all-uses” (well, I didn’t actually invent those things, I just went ahead and compiled them neatly):

/* IE 6 and below hacks		*/
*html a { }

/* IE 7 only hacks		*/
*:first-child+html a { }

/* Opera 9 and below hacks	*/
html:first-child a { }

/* Safari and Opera hacks	*/
@media screen and (-webkit-min-device-pixel-ratio:0) {
a {}
}

/* HR Styling hacks		*/
/* IE				*/
hr { height: 1px; color: #d5d8d8; border: none; }
/* Gecko-based browsers		*/
html>body hr { height: 1px; background-color: #d5d8d8; border: none; }
/* Opera & Gecko-based browsers	*/
html>body hr { height: 1px; background-color: #d5d8d8; border: 0px solid #d5d8d8; }

/* clearfix			*/
.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.clearfix { display: inline-block; }
/* Hide from IE Mac \*/
.clearfix { display: block; }
* html .clearfix { height: 1%; }
/* End hide from IE Mac */

This way, I always have my permanent hacks (see CLEARFIX) included, and always have my temporary, browser-specific hacks at hand. For instance, if I want a CSS class – let’s say  .my_class – to behave specifically in a browser, I simply use the already prepared hack by duplicating the line and replacing the dummy a selector whit the class that I need. Something like this:

/* IE 6 and below hacks		*/
*html .my_class { color: #fff; }

That’s it for now… Read, learn, apply, and please let me know if you found this useful or if you have other best-practice ideas too in this matter.

Later bonus:

You can always install my simple Screen Ruler Favelet, in any browser, to check the sizes and dimensions of everything you design, by right-clicking here, choosing to save the link in the Bookmarks/Favourites and then calling it anytime from the Bookmarks/Favourites of your browser