10 Tips For Solving CSS Problems

Wednesday, August 22nd, 2007

Categories: Troubleshooting

RSS Comment Feed

Trackback

AddThis Social Bookmark Button

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. :)

Bookmark this blog using any bookmark manager!
Subscribe to Pat-Burt.com via RSS

Error. Page cannot be displayed. Please contact your service provider for more details. (11)



Related Posts


Subscribe to this Post

8 Responses to “10 Tips For Solving CSS Problems”

  1. Yas Says:

    Regarding # 5. Don’t Use Padding/Margins with Width

    I don’t get why we can’t add margin and padding to elements with widths.
    Can you explain it please, i am a n00b. lol.
    Is it the browser differences?
    And what alternative could we use?

    :)

    Thanks for the article by the way. :)

    Found this site on digg.com after searching css and latest stuff.
    In case you wanted to know. :)

  2. Patrick Burt Says:

    Hi Yas,

    For margin/padding + width. Between Firefox and Internet Explorer, I don’t really know specifically, but I know one browser makes sure the div container is that specific width and then tacks on padding/margin; the other figures out the width but the width that comes out at the end isn’t the one you specified.

  3. Zachary Says:

    Dear Patrick,

    I saw your comment on iiVee Blogs(http://iivee.com/blog/two-powerful-and-elegant-wordpress-themes/8/) and just wanted to say thanks! I enjoy sharing what I have learned, but for a site like this to flourish, it is great to have people like yourself contribute too. Hope to see you around the site more in the future!

    Zachary

    ==================================
    On August 22nd, 2007 you wrote:
    ==================================
    Great looking templates, I especially liked the second one m8.

  4. Zachary Says:

    Great list, a lot thing to be check for a new website, and w3c CSS validator is good helper.

  5. achmadbiz Says:

    and for fast debug , don’t forget to use Firebug (Firefox addons) – http://www.getfirebug.com/

  6. Patrick Burt Says:

    Thanks for the tip achmad, I used Firebug for a while, I even tried ySlow for a little bit (it integrates with Firebug).

  7. Linkek - webdesign - 07.09.24. | Keresőoptimalizálás blog - Longhand Says:

    [...] 10 tipp CSS hibák megoldására Legjellemzőbb CSS hibákat alapul véve ír le 10 tippet a cikkek, hogy mi vezethet megoldásra a hiba megtalálásához. [...]

  8. karen millen dresses Says:

    I searched for something completely different, but found your website! And have to say thanks. Nice read. Will come back.