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.
Many browsers now have an inspect element feature, either right click or press F12.
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.
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>.
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.
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 | 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.
Reduce your HTML/CSS down to a small test case by:
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 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] }
As supplied by the course and a couple of my own.
You must be logged in to post a comment.