10 Steps To Solving CSS Problems

netfree · #1 (**permalink**) 05-19-2009, 07:11 AM

Hope these will help you in CS problem

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