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
Related Posts
Leave a Reply
You must be logged in to post a comment.