Diagnosing problems with CSS

[nkaisare]

This is for those people who wish to use CSS-based design but are finding goings tough due to the learning curve associated with it. Here are some tips on how to get your CSS working.

1. VALIDATE your HTML and CSS:
http://validator.w3.org/
http://jigsaw.w3.org/css-validator/
Most of the times, errors get sorted out just by doing this.
2. Remove all the other styles. The problem is not with font-family and font-style. Keeping 1KB of that stuff is only going to make your job of sifting through style sheets more difficult.
3. Use background colors for the various divs you are trying to position/float. This will make it clear to you where the divs are, and how much space (width/height) they occupy.
4. Test in a good browser. Mozilla or firebird is highly recommended. Download it from one of the links provided in the left-hand bar at http://www.mozilla.org/. I personally use Opera 7.21 (http://www.opera.com/). But don't use IE because its an old browser.
5. Try to use bare-bones content. Focus on whats wrong with the way the site displays. If #left and #middle overlap, focus on them... forget that #right exists for the time being. Sort out issues one at a time.
6. ALWAYS BACK UP YOUR WORK AS YOU GO ALONG. So that if you go too far away and can't get back to the place you started, you can start over with one of your backed-up copies.

Remember:
Things that were easy with tables may not be equally easy with CSS.
Things that were impossible or too difficult with tables may be straightforward.
Think outside the box. View your page consisting of several divisions... almost like cutouts on the paper... you can then glue these individual cutouts on a canvas. You couldn't think in this manner with tables... but with CSS you can!!

The following link might be useful in debugging:
http://css-discuss.incutio.com/?page=DiagnosticCss

Moderators, can you make this post sticky?

[spufi]

Originally posted by nkaisare
4. Test in a good browser. Mozilla or firebird is highly recommended. Download it from one of the links provided in the left-hand bar at http://www.mozilla.org/. I personally use Opera 7.21 (http://www.opera.com/). But don't use IE because its an old browser.

As much as we rip on IE, and rightly so, it is still used by something like mid 80%/90% of the net. To not include IE because it's an"old" broweser sounds foolish to me. A person is going to have to learn how to make the needed hacks for IE anyway.

[MotherNatrsSon]

spufi you said it correctly...HACKS for IE...

If you want to actually learn CSS test it in Mozilla, Firebird Netscape 7 and then HACK to get it to work in IE.

If you get it right in IE first, chances are it is wrong to begin with.

Use the browser(s) that best support standards so you actually learn the CSS and not the HACKS

MNS

[PeOfEo]

I often make a page and discover it looks great in mozilla but its crap in ie. But I always set ie as my first priority b/c the most ppl use it. I try to make me site work on ie 6 and 5 then I go back and try to correct what gets screwed up when I am optimizing for ie on the other browsers. In the end it looks good on all browsers but ie is first and foremost.

[nkaisare]

The thread is on trouble shooting, not on CSS design.

Of course there is not an iota of doubt that you cannot and should not ignore IE. But the thing is that if you have a problem with the way a page displays, you should use a standards-compliant browser.

Why? Because when something doesn't quite go right, you would want to refer to published documents (read W3C recommendations) to understand what a specific command is supposed to do. And if the browser doesn't confirm to these specs, well that would leave you confused.

Consider the example:
http://www.positioniseverything.net/abs_relbugs.html
If you place a div within a positioned div, and give it position: absolute; then this div should be positioned with respect to the containing div. Right? Thats what the specs say, thats what you'd think should happen.

But no, IE has a bug. What if these divs contained menu and/or images? Unless you are an expert (and most of us aren't), you wouldn't know if its a browser bug or problem in your thinking.

Hence, I would use Firebird to get the CSS problems sorted. Once thats done, I will view this in IE. I will then try to find possible reasons for the way IE displays it, and then think of workarounds.

The whole point is that once you have narrowed down where exactly the problem might be, you get in a position to ask specific questions, and are in a much better position to get help quickly.

The purpose of this message was to make people think about their problem and ask a question as specific as they can. It would really be good for everyone reading the posts.

[toicontien]

There's one line of CSS that I find infinitely helpfull when debugging: display: none;

Just place the boldface text in the style definitions for ANY element that you do not need displayed when trouble-shooting one or two specific elements.

And for IE: position: relative; and position: static; are often needed.

I've found that when things do not display correctly in IE Mac/PC, it is a bug in IE positioning elements.

[MotherNatrsSon]

Originally posted by PeOfEo
I often make a page and discover it looks great in mozilla but its crap in ie. But I always set ie as my first priority b/c the most ppl use it. I try to make me site work on ie 6 and 5 then I go back and try to correct what gets screwed up when I am optimizing for ie on the other browsers. In the end it looks good on all browsers but ie is first and foremost.

That sure is he longway around. Why not be sure it is right in the compliant browsers first? Then you know the CSS IS correct and if IE chokes on it you can find a HACK to fix it just for IE. You must like wasting time.

MNS

[pyro]

Niket, why don't you submit (http://www.webdevfaqs.com/contribute.php) it to the Web Dev FAQs? We'd love to have it, and then it can be easily linked to/found by people. I also remember you had one other bit of content that would have been appropriately added, which we'd love to have, as well!

[PeOfEo]

Originally posted by MotherNatrsSon
That sure is he longway around. Why not be sure it is right in the compliant browsers first? Then you know the CSS IS correct and if IE chokes on it you can find a HACK to fix it just for IE. You must like wasting time.

MNS did you read what I said? I design it and find it working in mozilla first, thats when I go back and redisgn it for ie then I clean it up again for mozilla. I have to make sure the hacks I used for ie dont screw up what I have on mozilla...

[Robert Wellock]

One of the most valuable tools with CSS testing is: /* */ either to comment out CSS code or leave notes while testing.