Common Errors
We all make mistakes. The word “typo” wasn’t invented without reason. Here are some of the most common problems that creep up with CSS.
- Missed Spellings
- Just so you know, leftt is not the same as left and this could be the reason something is on the right instead of the left side of your page. Putting a 30ps for a margin won’t get much of a result, but 30px will. Missed spelling errors are common and easy to overlook. Luckily, CSS validators can often catch these tiny mistakes for us.
- Forgotten Details
- As creative as you can be with CSS, there are some ground rules you have to follow. Every selector must be identified as an ID or CLASS unless it is a HTML TAG. It must be laid out as selector { property: value; property: value; } and the braces, colon and semi-colon must be there. Miss one of these little details and nothing will happen, or strange things might. CSS validators will usually catch these little forgotten details for you.
- Wrong Selector
- Putting all your wonderful designs in #content when they were supposed to be in #context-text doesn’t help your layout. Luckily, you can usually see these immediately upon viewing the page, so just cut and paste them in the right tag…and then remember what you deleted from #content. Of course, you can refer to your frequently backed-up file to get the lost code. Hint-Hint!
- Wrong Template Module
- As useful as WordPress’ new modular templates are, many a time a user has made a modification in comments.php instead of comments-popup.php or other similarly named files by mistake. Double check which modular section you are supposed to be working on all the time. And if you mess one up by accident, there is always that faithful backup file to make things new again.
- Multiple Choice
- CSS can’t read your mind. If there are two references to the same selector with conflicting information, it has to decide which one it will use. This is very common if you are bringing your original style sheet in on top of a new one. If you are fighting with a selector for, say, the h1 heading, and nothing is changing, search through the style sheet to see if there is another reference to that selector.
Pest Control – Watching Out For Browser Bugs
No matter how hard we try to make our web pages beautiful, it can take the viewing of the web page in a different browser to totally screw up our lovely design.
Different browsers view web pages differently. Older browsers won’t recognize new CSS standards, while newer ones often “see” things differently from their brethren. The results are often not pretty, causing blinking, jumping, or missing design elements, shifting layouts, and distorted positions.
How do you know it’s the browser and not your design causing the problem? You often don’t. If you play with CSS a lot, you will learn to recognize the symptoms. In general, here are the clues:
- Text jumps around or blinks as you scroll down the page.
- Links and text jump around as you move the mouse over a link.
- Lists with links jump around and move as you move your mouse over them.
- Layouts look different. Columns are wider or narrower between browsers.
- Graphics overlap the text or lists.
- Special effects such as filters don’t look the same or aren’t there.
