CSS and Html debugging
Posted
Friday, August 31, 2007 4:16 PM
by
ysa
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 create. This requires a lot of experience and attention to details. Wrong design can result in unexpected things, like div's 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>
Results this view of the page :
The developer 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 element 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.
Further more, 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 shows 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 (for Internet explorer) 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 :
In short, these are tools which are a must in each web developer's toolkit. Use them wisely.