Welcome to WebmasterWorld Guest from

Forum Moderators: not2easy

Message Too Old, No Replies

CSS Troubleshooting

& reminder about how to Post Code and not URL's

1:05 pm on Oct 14, 2004 (gmt 0)

Senior Member

WebmasterWorld Senior Member suzyuk is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Oct 1, 2002
votes: 0

a refresher course for us all, old and new..

Posting URL's (even non-promotional ones) is against the TOS [webmasterworld.com], this is for many reasons. What we see here mostly in the "code" Forums are non-promotional "test" pages, but the thing with them is that they can and do change (get fixed?), or even be removed. Therefore the whole discussion could become meaningless for later readers if it were focused on either a broken link or a fixed page! (btw the same applies for "Sticky Me" messages..)

Posting Code can be a bit of a grey area, but because of the above, it is necessary in some instances to illustrate a problem. However it should always be examplified/stripped as much as possible. In general in my experience of my time here:
Shorter questions get quicker, more focused answers!
added to that it is often the act of stripping your own code which can help track any errors easier ;)

[added] see: Stripping/Debugging CSS code to isolate a Quirk / Bug - A Case Study [webmasterworld.com] [/added]

ergophobe recently posted Troubleshooting 101 revisited [webmasterworld.com] in the PHP Forum, A LOT of points in his thread apply cross forum too , especially points 1, 2 & 3

The CSS Charter [webmasterworld.com] holds some advice along more specific guidelines and You really should read the timeless advice in:
WebmasterWorld Member Guidelines on Posting Code.

My experience, and I've posted my fair share of questions, is that you will get more quality, focused replies if you do some of the work yourself rather than posting a whole page of code, a lot of members here may well know how to help but if it means copy/pasting and stripping a whole page of code first then it very probably won't happen.. they either just don't have the time or maybe they're just fed up writing code for the day! By nature people are often more willing to help people who have made the effort to help themselves first..

I know that sometimes it's difficult to spot if a CSS rule is in conflict with another area of code. But here's a very basic guide to begin troubleshooting your CSS:

  • Validate the HTML [validator.w3.org] {checking for incorrectly nested elements}
  • Validate the CSS [jigsaw.w3.org] {check for punctuation/parse errors}
  • Take a copy of your page before you start
  • Remove all the HTML between the <body></body> tags
  • strip out all your CSS rules.
  • add back in main layout Divs and their CSS rules {size, positioning, padding and margin rules etc., {not the "pretty" fluff, font styling etc..}, one by one
  • add back any headers and footers one by one
  • add temporary background colors to these layout divs to see if they are where you expect them to be
  • add padding and margin rules back in one by one
  • add in some content.. some plain <hn> and <p> to start with, then add their margin/padding/border rules
  • add some specific content <ul>s <images> <forms>, then their margin/padding/border rules
  • finally add some font-sizes and line-heights
  • Navigation menus/Effects should be built in a seperate page to make sure they're working as you'd expect before adding them into your layout page

If at any point during the above process you trigger your problem you will either have found your own "error" or you will have a basic layout for posting. Before posting remember to remove all urls, <a href="#"> will do, we don't need full paths to images, font-families, or even all instances of a dropdown list/special effect (one will do). Image urls are not required but sizes can sometimes be helpful.

Finally to quote from Tom's post, as it applies here too..

If that doesn't work, I usually go out for a run and if it still doesn't make sense, I post my question here.

LOL...I sometimes solve a problem while walking over the hills, when I'm nowhere near a text editor!

And remember, the Mods here at WebmasterWorld are quite friendly you know ;), while we possibly won't answer your question "off board" we might be able to help you rephrase your question in order to help you get the best from your post.


edit reason: added case study link (Oct 2004)
reason2 - updated charter link

[edited by: SuzyUK at 7:43 am (utc) on July 6, 2008]

2:55 pm on Oct 14, 2004 (gmt 0)

New User

10+ Year Member

joined:June 19, 2004
votes: 0

Thanks so much for the list of sensible steps for trouble shooting, Suzy. I have been trying to work out such logical steps myself - you have saved my sanity :o))
3:00 pm on Oct 14, 2004 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:June 6, 2004
votes: 0

Suzy, thanks for the refresher. We should make sure this thread stays near the top of the forum for a while to be sure new members spot it, too.

One question regarding URLs (since you mentioned it), what are the 'rules' regarding references to online resources? Obviously, links to the W3C and Google are kosher, but I've noticed that some pages are blocked while others are let through as a link (one example being ALA, a link to which is automatically broken whe posted, while PIE is not). I've never seen anything in the TOS about this, but we all refer to pre-existing tutorials and/or articles from time to time and it'd be nice to know what the limits are.

Thanks again!

3:04 pm on Oct 14, 2004 (gmt 0)

Senior Member from CA 

WebmasterWorld Senior Member encyclo is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Aug 31, 2003
votes: 6

Great guide!

I'm not a CSS guru like SuzyUK who can cut through 100kb CSS files at a single glance, and so if I see a markup snippet longer that about five or six lines each for the HTML and CSS. I tend to just step away and let someone else tackle the problem.

Assuming you've already cut down your test markup to the bone, just mention which doctype you're using, then only paste the relevant snippets, leaving out the head section completely, and the body, html and other such tags unless absolutely vital. I can fill in the rest myself, and it concentrates my focus on the problem.

4:07 pm on Oct 14, 2004 (gmt 0)

Senior Member

WebmasterWorld Senior Member suzyuk is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Oct 1, 2002
votes: 0

just mention which doctype you're using,..

Good important point encyclo, yes it does help to mention that.. (sorry my bad, I forgot that;) I test in both cases by default hehe) Yes that narrows the focus too, you know even if you're not using one, mention that too!

>>Resource Urls
yes the well known ones are fine, as long as the resource is is authoritative, unique, tried and tested! A general "rule of thumb" for what's not allowed = no "blogs" or web design companies.
Reasoning: Around these forums everyone has them. Singling out one is bound to be a conflict of interest to our Members. To avoid grey areas between what might be self promotion (intentional or otherwise) and what is tried/tested facts, and to protect the integrity of WebmasterWorld policy in general they have to be avoided. Quote from TOS#13 [webmasterworld.com]

We tend to err on the side of caution to protect the integrity of the system

Again Moderators can and do discuss/use their judgement in exceptional cases (e.g. new groundbreaking, techniques) so if you're unsure just ask..

If a URL is filtered it is likely someone did something that earned them a place on said filter.. See this thread [webmasterworld.com] for more info.


10:06 am on Oct 15, 2004 (gmt 0)

Junior Member

10+ Year Member

joined:May 30, 2004
votes: 0

That helps out a lot Suzy... Thank You.
9:16 pm on Oct 17, 2004 (gmt 0)

Senior Member

WebmasterWorld Senior Member drdoc is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Mar 15, 2002
votes: 0

Excellent post, Suzy ;)