At Adam Software we try to make our websites and studio's functional but also attractive and nice to look at. Therefore we often use CSS to improve the look and feel of our products.

Anyone who has some experience in using CSS for your website knows that it can be pretty hard to:

• build the layout exactly as your original design
• make the experience the same on different browsers.

In this article we want to share some tips and tricks to make the life of a web-designer a little easier.

Developer Tools

Most of the time you will be developing your CSS using one browser, and afterwards test your design in the other browsers your website is going to support. It's best to choose Firefox or Internet Explorer while developing.
Both browsers have a developer tool available which makes it easier to debug your styling. It enables you to edit, debug, and monitor CSS, HTML, and JavaScript live in any web page.

Firefox

Mozilla Firefox has 2 add-ons available: Firebug and Web Developer. These add-ons are available on different versions of Firefox. Just make sure to download the correct version.

Internet Explorer

Microsoft Internet Explorer Developer Toolbar is available for download when using IE6 or IE7. IE8 has the toolbar included after installation.

Usage

You can start using the tools by simply pressing your 'F12' button.

Image1: Developer toolbar on IE8


These are some of the capabilities we often use.

• See an HTML elements' properties.
  With the cursor button on IE Devtoolbar and the 'Inspect' button in Firebug you can select any HTML element of your page. Once selected you can watch several properties: HTML, CSS, layout. In the CSS panel you can watch every CSS-property applied to your element, include it's applied CSS classes. 'layout' (Image 2) makes it easy to see what padding, border, margin and offset your element has applied.
  
  Image2: Layout (on IE8)
  
  


• Edit an elements' properties
  You can also edit properties of a selected element. You can update a CSS-property (update padding from 2 to 5) or add new CSS properties to the element. This is really helpful when creating your layout. First add/edit/remove some CSS properties while debugging. When you have the desired result you can create/edit your CSS-class with the changes you have made.


• Resize
  You can resize your browser to different sizes. Clicking on the 1024x768 option for example will resize the browser to that size. This can be extremely helpful to see if your layout will work on lower resolutions.


• Colors
  With 'Color Picker' on IE and 'Show Color Information' in Web Developer of Firefox you can quickly get the hexcode of any color used in your website. Often used to quickly search the correct color used in a specific element.


• Compatibility mode
  Internet Explorer 8 Developer toolbar has a Compatibility mode available. This makes it possible to switch between IE7 and IE8 mode and see if your design looks the same on both browser versions. Our experience with this functionality is that the 'IE7 compatibility mode' works in many cases, but sometimes it's not entirely the same as the 'official' IE7 browser. Doublechecking on this browser is recommended.

There are still many features available to discover but that will take us too far. Downloading the tools and start playing with them is the best way to get you started on layout debugging for your websites.