HOUSE of CODE

CSS and Html debugging

Yossi Shmueli -

Translating UI design to a CSS & Html can be a little complicated. You receive a design from a UI team/expert in your company, which includes general look for the web site,font sizes, images , positioning in the page, distances etc... and you have to create the CSS which shows the design in the page you want create.

This requires a lot of experience and attention to details. Wrong design can result in unexpected things, like divs disappearing, partial views and wrong positions of items.

For example, this simple html:

<body>
	<div style="background-color:red;width:100px;height:100px">
		<div style="left:0px;top:0px;position:absolute;background-color:blue;width:50px;height:50px;">
		</div>
	</div>
</body>

Will result this view of the page:

You can spend hours of debugging and wondering why the panel doesn't appear in the specified position (until someone would tell him that an item is positioned according to the closest parent container which is explicitly positioned. Which means that because the first div is not positioned explicitly, the second div is positioned according to the body of the document).

This is only a simple example of bugs in CSS design. You can spend hours of trying to solve them, without much success.

Furthermore, while you write a web site , you need to view the resulting html code for debug of rendering or html injection which is done in runtime. View source is not relevant because it shows only the source of the page as it was loaded. It doesn't show modifications of the html which can be done in JavaScript (for example , when you use document.write or container.innerHTML).

There are tools that can help you debug these sorts of problems and more.

Firebug for Firefox and Internet Explorer developer toolbar allows you to do this kind of debugging. They allow you to view the current DOM of your page.
You can view the style definitions of each element, you can view the scripts and manipulate them, you can select elements by moving the mouse across the browser and a lot more.

Firebug:

IE Developer Toolbar:

These are a MUST have tools in a web developer's toolkit.