10 Steps To Solving CSS Problems

ts 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

Technorati Tags: CSS Problems