Need common CSS debugging issues

What are some REALLY common issues (as examples) where I can go through sample debugging of the issue? E.g. one where simple validation on some random example would fix something…dunno. Can anyone think of good examples that I can pick apart and show the debugging process?

I used to have trouble with “has layout” issues.

Not recently, but then I haven’t tackled any gnarly CSS lately.

You might be better off focusing on modern CSS and issues with that. Everything else has been answered to death. Get your teeth into things like flexbox issues. That will get you some attention.

Yeah, that issue is really dead and gone now for practical porpoises. IE versions where this is relevant are well and truly 6 feet under.

I’m writing an article on how I personally go through my debugging process so basic stuff that is commmon nowadays would be perfect.

I’m just describing my process. What I look for and how I rule specific stuff out. A few people have expressed interest so I thought “why not.”

can you give us an example?
common & simple could be 5xp rather than 5px; or using wrong punctuation, like margin:0 auto:
declaring a style twice and not noticing that the second declaration is over riding the first.

Yes, selector precedence seems a problem for many.

Validation would show both of those issues though. I need something that is slightly more complex and requires more than simple validation. I need some exmaples that would go beyond validation and would require critical thinking (using “critical” loosely here :wink:)

A good part of the debugging process is to use “Developer Tools” that are built into most browsers these days. Most of them allow you to use an “inspector” tool to highlight a dom element and list the associated CSS styles.

I use this as the first post of call when a page doesn’t display correctly.

I’ll then work by disabling certain styles (floats, margins, padding etc) until I work out the problem.

Yes I’m aware of that Alex. I’m not asking people how they go about debugging, I’m asking what situations I can use as examples to showcase how I debug. Please read the question next time.

Your question wasn’t entirely clear due to the way you phrased it. Anyway, I’ll try again.

Perhaps use a cases of:

Floats not clearing properly
Line heights causing text to not be align correctly
Selector specificity & inheritance

If you are writing an article on YOUR debugging process, then why not write about what YOU actually do?

1 Like

Yes I am writing hte article about how I debug. I will reiterate once again - I need examples to go off of where I can take the said example and then debug it using my own personal process.

So once again, I would like examples of issues that are common where I can take the said examples and debug. Please and thank you :smile:

Maybe you could gain some insight here by looking at recent CSS topics?
IMHO many seem to be about positioning widgets (i.e. silders) and “parallax” problems.
Personally, I don’t care much for parallax sites, but it does see to be “hot” right now

1 Like