10 Steps To Solving CSS Problems

Its happened to all of us at one point or another, you write up some CSS code, take a look at your website, and…. it doesn’t work. That, or your website appears to be working for you but then you check your site at another computer on a different browser, and it’s a mess.

I’ll admit it happens to me… alot. So to help out I put together this top 10 list of tips regarding CSS-related issues to check over if you have any problems.

  1. Check Your Website Content
    • Is an image in your DIV Container one pixel bigger then your container’s dimension in your CSS file?
    • Do you have a long text string that’s too wide for your container set width? (ie. a long URL?)
  2. Check Your HTML Source
    • Are you typing valid HTML code? Or are you making tiny mistakes that can impact your layout? eg.
      <div id=”wrapper”><p></div></p>
    • Did you use id=”XXXX” instead of class=”XXXX” or vice versa?
  3. Check Your Spelling
    • Copy and paste element names from your CSS file to your HTML file. This avoids typing and spelling errors.
    • Did you order your CSS correctly? Make sure wrapper2 is actually inside wrapper if you write the following code: #wrapper #wrapper2 {color:#ffffff; font-size:10px;}
    • Did you make sure to include 6 characters in your hex color?
  4. Check Your Syntax
    • Are you forgetting brackets ({}) or semi-colons (;)?
    • Did you mistakenly forget to add the pound sign (#) before an ID or the period (.) before a class?
  5. Don’t Use Padding/Margins with Width
    • This is a common problem, especially with beginners. Padding or Margins combined with Width on the same element yield different results on different browsers. Example, this CSS:
      #wrapper { width:100px; margin:5px; padding:5px; }
      will appear different in Internet Explorer then in Firefox. This is especially critical if you’re using an image-dominant layout.
  6. Check The Little Things
    • Did you make sure to give your Div Container position:relative; before positioning a Div Container with position:absolute; inside it?
  7. Allow Breathing Room
    • Internet Explorer 6.0 will add a 3 pixel breathing room to some div containers, either use a “CSS hack” or build your website knowing that this can very well happen and mess up your layout.
  8. Use a Validator
    • You can use the w3c CSS validator or the validator built into the Web Developer toolbar (a Firefox Plugin) to scan your CSS and can help solve your CSS problem.
    • Opening your CSS file in Adobe Dreamweaver can sometimes give you an idea where something went wrong.
  9. Be Aware Of Some Browser’s Existing Problems
    • You may spend hours trying to find the solution when the problem lies in the Web Browser, and example includes the Peek-a-boo IE6 bug.
  10. Do Some Research
    • Odds are you aren’t the only person that’s ever had the CSS problem you’ve described, use Google and type in keywords for your search you think others would use