5 CSS Tips for Cross Browser Compatibility

Despite the fact that the death of IE6 is upon us getting CSS based websites to work across browser is still a dirty job, so much so I sometimes with Mike Rowe would cover it as a gag episode. Even when IE6 finally does die, there are still issues to be had with IE7+ vs. FireFox, …

So to help things along I’ll give you 5 things I always do by default to help build my sites to look good on all browsers right out of the gate. This doesn’t mean that more tweaking isn’t sometimes required but these get me a long way toward the goal.
1. IE6 Double Margin Issue. This has been well documented but bears repeating here. If you are just starting with css based layouts (as opposed to table based layouts) this will save you hours of maddening trouble shooting. The problem is that IE6 will double the margin that is in the same direction of a float. For example, if you float two boxes to the left and next to each other and the left box has a left margin of 10px, in IE6 you will get a left margin (on the left box) of 20px. It’s a bug, don’t try to understand it. So it would render as below:

The code in the case of this example was as follows:

.outer { //creates the outer box
	width: 400px;
	height: 200px;
	border: 1px solid #000000;
	background: #cccc66;
}
.leftbox {
	float: left;
	width: 100px;
	height: 90px;
	margin: 10px 10px 10px 10px; //left margin is the fourth 10px value (it goes clockwise from the left, top-margin, right-margin, bottom-margin, left-margin
	border: 1px solid #000000;
	background: #cccc22;
}
.rightbox {
	float: left;
	width: 100px;
	height: 90px;
	margin: 10px 10px 10px 10px;
	border: 1px solid #000000;
	background: #cccc99;
}

Fortunately, the fix is rather easy, make sure to add display:inline; to the float:left; and the margin will correct itself as below:

.outer { //creates the outer box
	width: 400px;
	height: 200px;
	border: 1px solid #000000;
	background: #cccc66;
}
.leftbox {
	float: left;
        display: inline;
	width: 100px;
	height: 90px;
	margin: 10px 10px 10px 10px; //left margin is the fourth 10px value (it goes clockwise from the left, top-margin, right-margin, bottom-margin, left-margin
	border: 1px solid #000000;
	background: #cccc22;
}
.rightbox {
	float: left;
        display: inline;
	width: 100px;
	height: 90px;
	margin: 10px 10px 10px 10px;
	border: 1px solid #000000;
	background: #cccc99;
}

2. This is a design technique. When I’m building a new theme from scratch I’ll often start with all of my margins set to 0px. Boxes will float next to each other but I’ll move them out later. I first work through padding on my div’s then start to adjust margins. Once you’ve build a site/theme or two it get’s much easier but I’ve found it to be quicker and easier to start with 0 margins and work from there rather than going back and trying to figure out why things do work correctly cross-browser after development.

3.Image Resizing in CSS. The quick lesson here is don’t do it. Generally browsers do a less than ideal job of dynamically rendering the image and cross-browser it can create inconsistencies. On top of that, and a better reason not to do it, is that you still have to load the full image on that page which makes your page weight (how much “stuff” has to be downloaded for the page to fully render) much heavier and thus slower. The easy solution is just don’t do it, re size your images (and optimize them) with another tool and upload accordingly.

4. Clear Your Floats: This refers to divs which serve as containers to other divs and should wrap around them but sometimes don’t. So when you create a wrapper with div’s inside it should look like this:

But sometimes they end up like this:

The biggest problem is that you may not notice it until you try to put a background in place and it doesn’t look right. The issue can generally be fixed by adding “overflow: auto;” or “overflow:hidden;” to the containing div. You’ll also want to make sure to specify a width or heigh to trigger hasLayout for IE6 compatibility (use something like height: 1% if you need to, works well). However, if you still don’t get it to work you might need to find another way of clearing the floated div.

5. Font Sizing: In the body tag of your style sheet set your font as a percentage of the default size (16px). So for a 12pt font set the font size to 75% (font-size: 75%) then throughout the remainder of the body where you set font size do so using em (not px or pt).For more reading on em’s see How to Size Text in CSS at A List Apart.

There are more good techniques but this should get you a long way toward greater CSS cross-browser compatibility right out of the gate. Another good read on the topic:

Anthony Short: How to get Cross Browser Compatibility Every Time