10 Tips For Solving CSS Problems

Some of us have been through this on multiple occasions, you type out some CSS code, go look at your website, and lo and behold, it doesn’t work. That, or your website appears to be working for a few weeks, but then you check your website at your friend’s house on a different browser, and it’s a mess. I’ve been down this path… often. I put together a list of tips regarding CSS-related issues to have a look at when you’re having 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

Good luck, hope that helps.

Sell your items online - Free Classifieds Ads Post you ads for free!

Related Posts

• Getting Ideas for Your Blog
• Ad Revenue Driven Websites - Step 5 - Execute
• Ad Revenue Driven Websites - Step 4 - Plan Your Execution