News

10 Common Errors from Last Year

The Australian Web Awards are closing fast, with only a few days to go.

Getting your entry ready for the Australian Web Awards can be a little frantic. You may even think it's just too hard. Well in general your HTML code is usually semantic and validates. It's the CSS that more often that not has those 50 plus tricky errors and warnings. Mind you if you have a good look at these errors closely, most can be easily fixed and are just issues that have sneaked into your code.

Last year we took note of some of the more common careless errors that caused sites to be eliminated from the competition, here is a summary:

1. Color me Hash

This was the number one issue, when you are defining a colour as a hexadecimal notation, ensure you have the # (hash) symbol before the numbers.  For example, color: 232323; is incorrect, it should be color: #232323;.

2. Size Properties

Lots of sites defined size attributes, in the CSS, as being width: 20; when in fact a unit of measure is required, so it should be width: 20px; or width: 5em; or  width: 25% or width: auto;.  The choice is yours just make sure you use one of em, ex, px, mm, cm, in, pt, pc or % .

3. Identification is Important

This was another very common issue, identifiers in the HTML like for example id = "somesuchthing" need to be unique, otherwise they just can't identify specifically an element on a page. So remember no duplicate IDs. .

4. Negatives as length values are a No, No

This issue occurred so many times, it wasn't funny. Negative lengths are just not on.  Setting the width: -1;  that's right no unit of measure just -1.  When a negative is being used as a value for length it's illegal. So no negative widths and heights, but zero is fine.   Remember we are not talking about positioning.

5. Doc Types

You may think it funny, but a few sites failed because they had no doc type or the doc type given didn't match the code that was within the page.  Simple mistake in the HTML, but it can be very costly.

6. End of the Line

This warning was very common, too common in fact. You need to close a property in CSS with a semi-colon.  The number of times it was missed was amazing.

7. Using the URL

This was another sad error that makes you wince, there were cases where the wrong URI syntax is used. For example code was presented as background-image: url(href="http://domainname.com/image/.big.gif");  when it really ideally should be background-image: url(../image/.big.gif);.

8. It's not Equals

The value of a property is not defined by an equals sign, but a colon. For example padding-top=10px; is wrong.  While padding-top: 10px; is correct.

9. Cells and Padding

Again another simple mistake, there are no properties for tables or cells called cell-padding and cell-spacing in CSS.

10. Delimiters

Can you see the pattern here. You will with this one. Using shorthand notation is fine, just get it right. There was a lot of misuse of delimiters such as padding: 1em, 2em, 2.5em, 0; yes it is wrong, there is no comma as a delimiter it should be padding: 1em 2em 2.5em 0;  On the other hand take font-family: Helvetica; Arial; sans-serif; it's completely wrong as is font-family: Helvetica Arial sans-serif; it should be font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; Just ensure you use the right delimiters.

There you have it a simple list of common errors from last year, we don't want to see them this year, understand.