Tips for writing cross-browser friendly CSS more quickly

Fri, Nov 29, 2013 at 3:15PM

Some of the mistakes you make that cause problems in Internet Explorer and other browsers can be learned and prevented.   I try to summarize the main things I think about when I'm initially converting a design to HTML.   Of course there is more then one way to solve a problem, but if you assume I'm right for 90% of the work, then it should save time doing it this way.  When you get into complex javascript and interactions, you may wish to deviate more.

Using position:absolute should be your absolute enemy unless you are using javascript to absolute position an element.   Use padding and float instead.   Try to avoid using margins unless required for space outside of a border or overlapping elements or centering an element.

Every div (or element with display:block;) must have a float:left; unless you are going to center the entire div.  To center a div, you use <div style="margin:0 auto; float:none;">  All divs inside here must float:left; </div>

Learn how to do some simple subtraction for padding by memorizing that the padding will add to the height and width on each side.  So a div that has to be 600 pixels and has to have 20px of padding on all 4 sides would require the width to be 560px instead of 600px;    Most of the time people fail to remember this and when they look at ie6 / 7 the columns don't work and they go to the far bottom.  They could spend a long time on this if they don't know it.  The best way to understand width/height mistakes is to put a different background-color:#009; on each <div> until you can see that the div is a perfect size.  You can even use opacity:0.7 to make it transparent and easier to measure.  Sometimes I see developers using overflow:hidden instead of fixing their width/float errors.

You generally want to have a container div around every group of columns so you can control the wrapping better and do background image css that will repeat properly for both columns.  If you always do this, then you will rarely get stuck with column/wrapping problems. This is especially true for IE browsers.  It is often required to fix older IE browsers.
<div style="float:left; width:600px;">
<div style="float:left; width:150px;">Left Column</div>
<div style="float:left; width:450px;">Right Column</div>

Always specify a width when trying to build a layout.  float:left; often makes the width: become auto-resizing, so you need to make an explicit width set in order to make the wrapping work correctly.  Essentially, you should always start with an element like this:
<div style="width:100%; float:left;"></div>  and then adjust the size to be pixels or a different percent as needed.


If you want to have some elements that go wider then the center section of the site, make sure to give them a min-width so that they look right when the user makes their browser smaller or on a mobile device. Example:
<div style="width:100%; min-width:960px; float:left; background-image:url(/images/bigImage.jpg); background-position:top center; background-repeat:no-repeat; "></div>

You sometimes need to use negative margins so elements can overlap.  When you do that the code should be using position:relative and z-index on the overlapping elements.  The higher z-index is on top. Code Example:
<div style="position:relative; z-index:1; width:100px; height:30px; background-color:#F00; opacity:0.7;">On Bottom</div>
<div style="position:relative; z-index:2; margin-top:-15px; width:100px; height:30px; background-color:#0F0; opacity:0.7;">On Top</div>

Remember that the last rule you define is the one that takes precedence in most cases, however complex selectors like  "li a:link{ color:#F00; }"  will be greedy and prevent you from changing the color with a different menu somewhere else.  To force all browser to work on the new menu, use !important like this:   li.menu2 a:link{ color:#00F !important;}     Whenever you have an inheritance problems or you are trying to override complex selector styles of existing code like jquery ui or something, try using !important before rewriting someone else's code.  You can also use !important multiple times and the last one will be the one used.

Sometimes a design will not repeat the background-image: correctly until you put a clearing element inside the wrapper.   Like this:
<div id="columnwrapper" style="width:600px;background-image:url(twocolumn-repeat.jpg);">
<div style="float:left; width:150px;">Left Column</div>
<div style="float:left; width:450px;">Right Column</div>
<br style="clear:both;" />
This problem usually doesn't happen if you are using float:left; and a hard-coded width for every element.    If you have a centered div using margin:0 auto, you shouldn't put a background-image on that div, you should make a div instead it that has float:left so you don't need to use the clear:both trick to get the image to appear.

I also write all my css using an inline style="" first before putting anything in an external stylesheet.  A lot of time is wasted scrolling up and down and searching for id/class names in the beginning of the work.  You really should do inline styles while building a new design and then convert them all to external classes after it is 100% working in all browsers.   The only reason to convert them to an external file is for rendering performance and reuse across many files.  External files are compiled and cached in most browsers so they load from ram and don't need to be reparsed on each pageview.

chrome, firefox and ie developer tools make it a lot easier to see width problems and what styles are affecting your elements.  I also use the HTML Validator for firefox
This will show you the xhtml / html 5 errors and missing alt attributes, which helps you a validating site much faster.  You can even ctrl + R the firefox source code window to update instead of having to open view source code again.

Start with a valid DOCTYPE, such as XHTML or HTML 5 for the document.   I recommend the following, which adopts some things from html 5 boilerplate.   If you are using a specific cms, you may want to include the same javascript and css files it is already using as well in the head tag.

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
    <meta charset="utf-8" />
<style type="text/css">
/* put your complex selectors here - like :link, :visited, :hover and such */

Hope this helps someone!

Bookmark & Share