When you start developing xhtml valid websites with straight css, and div tags you really learn how to become a good UI debugger. I think I have a lot of tips that people could use when coding HTML and CSS themselves. Following these tactics can save you a lot of time wrecking your brain wondering why something doesnt work.
  1. Borders are your best friend - Turning borders on is a great method for debugging as it allows you to see the area in which you are working. You can see if the div block is too wide, in the proper location, as well as seing things around it like padding on another table that you might not want there.
    • A tactic that I like to use is setting the border on my table / div using css as you can set it to a single pixel and different colors. border: 1px solid red;
    • You can set multiple borders but be sure to use different colors for each so you know what section is which.
  2. Background colors make great debugging friends as well. Turning backgrounds on can have the same positive effect as borders do allowing you to see the exact area you are working on. Then you can see what should be inside of this area what is not etc.
  3. When coding for multiplatform make sure you have multi browsers open and check in each browser every time you make a change. This can save you a lot of headaches later on. You want things to look the same in all browsers as you go rather than fixing this kind of thing in the end.
    • I use IE 6, Firefox, Opera 9 as well I have open a standalone version of IE 5.5 and 5.0 as well. I later have someone check if for me in Safari and if it looks good in the previous browsers it usually looks perfect in Safari as well.
  4. In your CSS if you are writing custom classes or ID's ensure that you did not forget the . in front of the class and the # in front of the ID. I have wrecked my brains many a times wondering why something wouldnt work in this case. The browser simply will not render a broken css class.
  5. In your css classes ensure you do not forget a ; at the end of your classes. Again the class will not render properly.
    6.  



  6. Lastly really pay attention to widths of your div blocks. If a section is too wide for its containing section your div elements can sometimes go out of sync. Note that if you have borders on and it is doing this try turning them off first. The borders result in extra pixels that can push your div sections out of place.
  7. KISS - Keep it Simple Stupid - If you are trying to apply a class try something simple if your complex class wont work. a) For example make the font size larger font-size: 18px; This will tell you if the browser is even getting to your class. If it is not, there is an error above this class you are working on. Check to make sure #4 and #5 arent causing the errors.


More Articles