Checklist for CSS problems

[ggeoff]

Hi
I am still a newbie as far as using CSS is concerned. I had a problem, now resolved, where the CSS for part of my website was not working. I just couldn't see what was wrong! Eventually after a sleepless night and a search on the Web I solved the problem myself.
The reason it was not working was I had used #outerwrapper when I should have used #outerWrapper.

What I am proposing is to compile a checklist of errors and also some tips to avoid those errors. Here's a start.

1. check the spelling of each item very very carefully.
2. the CSS may be working but the effects may not be visible! set a bright background color.
3. use z-index to ensure that the content is not behind some other element.
4. when doing a web search use "syntax" as one of the search terms.
5. dont forget to use the forums- Daniweb is one of the best :)

Someone may know of a list, but I couldn't find it.

Geoff

[MJ Pieterse]

or just use W3C CSS validator

http://jigsaw.w3.org/css-validator/

[ggeoff]

Hi mj080,

Didn't know about the CSS validator. Should we use that first when encountering a problem?

Geoff

[MJ Pieterse]

well, if you do have a problem that you can't solve, it will let you know where an error (or a couple) is on the CSS. It's mainly for when you are done with your site and you want to make sure that everything is in order, but i have had other uses for it :)

[ggeoff]

well, if you do have a problem that you can't solve, it will let you know where an error (or a couple) is on the CSS. It's mainly for when you are done with your site and you want to make sure that everything is in order, but i have had other uses for it :)

I altered the website back to the error and used the validator it didn't find that error but some in lightbox! I also checked the css with css Reports - I'm using Expression Web 2 and it found the error as an Unused Style. which indicates that the CSS in the page is not being applied - in this case due to the typo. The Unused Style errors of course may just be that unused styles. Thanks once again for your contribution.

Geoff

[MidiMagic]

There are two kinds of css failure:
1. The css has errors in it that prevent correct rendering.
2. The css renders, but not the way the page creator wants.

1. Look for the following css errors if the css does not render:
- Look for typogoofical errors first.
- On Firefox, use the error console. It will tell you the line containing any syntax error.
- Make sure you spelled the classes and ids the same in all references.
- Make sure you didn't use the same name for two different classes or ids.
- Make sure you didn't use an id twice.
- Make sure that there are no units of measure on 0 values. Some browsers do not allow them.
- No special characters in classes and ids.
- Beware of deprecated and browser-specific styles and properties.

2. Look for the following if the css does not render the way desired:
- Remember that the surrounding styles (margin, border, padding) are rendered OUTSIDE any box object. Leave enough space for them to fit.
- If something intended for the same row renders below the row, it probably does not fit in the remaining space.
- Don't put size styles (width, height), and surrounding styles in the same style or tag. This is the key to inter-browser compatibility.
- Is the div shrinking, instead of containing the contents? Use the style: display: table-cell;

- Note that some displays do not differentiate colors that are close to each other.
- If you expect compatibility across different screen resolutions, use % and em to set sizes. The styles cm, in, and pt set a size based on an average display, but don't always work on the display you have. The px style makes the object change size with the screen resolution, covering different parts of the browser pane on different computers.
- Don't expect to exactly fill the browser pane vertically. It can't be done in a way that works on all computers, resolutions, aspect ratios, browsers, and restored-down window dimensions.
- Check to see if a style you do not want is inherited from a containing object. If it is, you will have to make another style for the inheriting object that cancels the inherited style.
- Always specify text-align and vertical align for all table cells. IE and FF have different defaults for these.
- Don't use absolute or fixed location. They do different things on different browsers.
- Don't use negative values for sizes. They do different things on different browsers.
- Remember that a repeated image may be incomplete at the edge of the repetition.
- Don't expect everything to look exactly the same on different browsers.
- Don't expect z-axis to always work. Some objects expect to always be on top.

[ggeoff]

Thanks midimagic that's brilliant!:)

[MidiMagic]

That's experience.