// you’re reading...

Design

Starting with CSS and bug fixing tips

By rossboardman ⋅ April 30, 2008 ⋅ Post a comment
I receive a lot of e-mail per day and some of them are from people who want my help on CSS or if I know why certain things don’t work or show up in IE 6 or 7 etc. If I could help fix their problem? In a lot of cases I need to e-mail back that the code they’re using is full of errors and that they’re using old school techniques (tables for layout), inline styling etc. So the first tip here is, learn about Web Standards and learn about coding with CSS for layout. There are a lot of good books out there to learn this from the start. This is the basis of good web design.

Learn about Web Standards

If you have no idea what I'm talking about, then here is your chance to start to learn about all this.
Why Web Standards
Learn what Web Standards are and why you should use them in every site or web page you build. Most of these articles are old but the benefits are still valid if you start coding the best practice way.
Starting
Get started and turn the knowledge you've learned into practice by using CSS for layout. If you have no clue where to start this adventure you'll find these links handy I think.
Lynda.com (video based tutorials - paying)
Books
There are a lot of good books out there and this is just a small selection of them that I think are well suited towards beginners.

CSS bug fixing

This is one of the things that a good web designer has to go through each time he or she codes a page using CSS for layout. Following Web Standards is the way to go and it should be an obvious choice when you take your job serious. Today I want to share some of my thinking process and the steps I usually go through when I'm at this phase of the process. But before jumping on the bandwagon to fix things consider these criteria...
Make sure your markup is well structured
Make sure your markup is well structured, in other words use the appropriate markup for the appropriate content. Use headings for titles, paragraphs for blocks of text, ordered and unordered lists to sum things up in list form or for your navigation, fieldsets in combination with legend and label elements for forms... Last but not least, use tables only for what they're meant for, tabular data.
Validate your markup
It's not just about the green check mark in the bottom right hand corner of your browser or 0 errors or warning on the W3C Validator that matters. This is only an extra check and a confirmation that your code validates. The W3C markup validator or W3C CSS validator should be your tools for sure. Tools that help you create the right coding, but keep in mind that this is just a machine that runs a test for you. Certain coding mistakes, such as using the wrong or structure-less code for certain content will not be seen as a mistake by this machine, so make sure this is in order. Validating your pages is an absolute requirement before you start to fix any CSS layout problems.

Fixing for IE 6 and/or 7

Ok, your code is well structured and your page validates. The page looks fine in browsers that follow the standards like Firefox and Safari, but you still need to fix a few things for IE6 and 7. How do you proceed? Here are the steps I usually follow. It comes down to analyzing and trying to isolate the problem...
Isolate the problem via XHTML
You can try to disable certain blocks of code in your XHTML. Use comment tags and put certain blocks of XHTML coding in comments. View the page and see if the problem is still there. Do this block by block starting with the bigger ones: left column, right column, content, header etc. At a certain point chances are you see your problem disappear. If you commented out a big block of content, uncomment smaller nested blocks of content now to isolate the problem until you have as less code in comment as possible.
Isolate the problem via CSS
Isolating the problem via XHTML is not always an option and so you can also try to disable certain properties of styles or certain styles all together to see what happens. Some styles might interfere with other styles. Some styles need to be more specified before they have effect because they've been overwritten by another style etc. Everybody has his or her own method to try to solve things and we all have our favorite tools. Mine are Adobe DreamWeaver for the HTML coding in combination with CSSEdit for my CSS styling. Especially CSSEdit's Preview feature in combination with the XRay mode has saved me a ton of time. When you are in XRay mode you simply select an element, and you'll see its margins and padding (if any) and the space this element takes. At the top of the Preview page you see the all the parent elements with classes and id naming etc. All of them are clickable as well. In the Inspector panel you'll see all CSS styles that apply to the selected element. Clicking on one of the styles in the Inspector panel will open the CSS stylesheet (if it's not open yet) and will bring you to the selected style. You can preview URLs and import the styles and use the overwrite method. I use that a lot when I try to help someone out. When you need to experiment while you debug, you can use the Milestones feature. Compare this a bit with the Snapshot function in the History panel of Photoshop. I say this is pretty neat stuff :) CSSEdit's XRay feature in action
Color the background of elements
In a lot of cases div containers are jumping down or they've moved to the left or right. It might be that the div has grown in width. Try adding background colors to your divs or elements to see the exact box of space they take.
Is it a known bug?
Check the Internet Explorer vs. the Standards "list" of known bugs or check the Explorer Exposed! list. At the bottom of this article I list a few sites that are good resources for CSS bug fixing.
Use conditional comments
I always use a separate CSS stylesheet for Internet Explorer 6 and 7 and link to the stylesheet via a conditional comment. With this conditional comment you address Internet Explorer lower than version 8:
  1. <!--[if lt IE 8]>
  2. <link rel="stylesheet" href="ie.css" type="text/css" media="screen" />
  3. <![endif]-->
Avoid hacks
I'm using the * html selector for IE 6 specific styles and I place them in a separate stylesheet using a conditional comment that only lower versions of IE 8 will read. The rules starting with * html will not be executed by IE 7. Rules without * html are for both IE 6 and 7.

CSS bug fix resources

You'll run into trouble sooner or later and these sites can help you to figure out what's going on.
Print This Post

Discussion

No comments for “Starting with CSS and bug fixing tips”

Post a comment