Troubleshooting CSS

Categories: Resources.

Learning how to fix CSS problems in just a few steps, which can be repeated many times over.

From a course on Sitepoint css-troubleshooting-in-six-easy-steps-2869.

Using a Browser

Many browsers now have an inspect element feature, either right click or press F12.

Scroll Into View

Right clicking on an element and selecting “Scroll into view” will show the element on the web page without having to scroll to it yourself.

Editing HTML

You can edit HTML in the Elements window. Changing the opening tag will also change the closing one. For example changing h1 to h2 will also change the closing tag to </h2>.

CSS Syntax

Note that CSS rules with the incorrect syntax are not applied. The Developer Tools window shows a warning if the rules shown are wrong. Watch placement of commas and ensure there are no spaces within hyphenated properties.

Targetting CSS

CSS must be targetted correctly or the desired rule won’t work. Try putting a red outline (not a border) with CSS on the element you are trying to style to confirm the selector is correct.

Selector Weight

Selector IDs Classes Types Weight Total
h2 {} 0 0 1 0-0-1 1
#nav h2 {} 1 0 1 1-0-1 5
.intro h2 {} 0 1 1 0-1-1 3

The #nav h2 {} rule would be used as it has the most weight. The values are calculated as if they are a binary number.

If two rules have the same “weight” then the last one will be implemented.

Isolating the Issue

Reduce your HTML/CSS down to a small test case by:

  • Comment out chunks of HTML/CSS
  • Create new test files
  • Build a simple demo using online tools eg, JS Fiddle, CSS Desk or Pastebin.

Dealing with Old Browsers (eg. IE 6, 7 and 8)

Test your page using the latest IE browser by pressing F12 to bring up the Developer Tools panel and then change the User Agent String to the required browser.

This doesn’t replicate all of IE’s bugs with the older versions.

Try:

BrowserStack Free for 30 minutes then US$30 per month!
Browsershots Very slow, results are displayed up to 30 minutes after submitting. It only takes URLs and no local file uploading. It would be useful for testing sites already published and after making modifications to existing sites.
CrossBrowserTesting Similar to BrowserStack but you get 7 days to try and after that it’s US$30 per month.
Sauce Labs Similar to BrowserStack but it’s only US$19 per month.
Turbo Net Virtual machine software needs to be download to use the service, for me it ran once and then it stopped with an error each time.
Net Renderer Only tests URLs, not local files.

As most are subscription websites it may be worth installing the old browsers on your computer, or set up virtual machine with Virtual Box and set up as many old browsers as you like.

Old Browser CSS

Old browsers can have their own CSS by using:

<!--[if lt IE 7]><html class="lt-ie9 lt-ie8 lt-ie7" lang="en"><![endif]-->
<!--[if IE 7]><html class="lt-ie9 lt-ie8" lang="en"><![endif]-->
<!--[if IE 8]><html class="lt-ie9" lang="en"><![endif]-->
<!--[if gt IE 8]><!--> <html lang="en"> <!--<![endif]-->

Target old browsers by using for example:

.lt-ie9 li.menu {
     [ie v7 rules here]
}

Online Resources

As supplied by the course and a couple of my own.

HTML/CSS Editors


Browsers


Online tools to help validate your CSS


CSS cascade and selector weight


Online code snippet sites


Online browser checking


Further reading

Leave a Reply