I just got tagged by a tag! I’m really annoyed because it took me so long to figure out and I’m interested now in being a better CSS detective going forward. The site in question is new…it has a “header” section with the logo and some other images and links. Under that is a “main” section" containing outerwrap, innerwrap, saran wrap, etc. etc. ok? I got a report that the link in the header banner was not working, even though the identical banner on another page had the same link working fine. On mouseover, the pointer did not change, no indication of a link there at all. I thought maybe something was blocking the link, but the code in the div was fine, no errors in console. I turned on all the secret colored borders I use. Huh. No diff at all. Except… in frustration I decided to make an imagemap of the link to tide me over for the moment, as the site was live. I pulled it into Dreamweaver for that purpose, and surprise! – DW’s interface showed me that the main div below the header had pulled up (due to positioning changes I had to make yesterday) and it was just covering up the link in the header. I pushed it down and the link saw daylight again. LL: We need to always remember that our divs are not always the lovely vertical stacked bricks we think they are…a bubble quashed in one place can pop up a bubble somewhere else, where you least suspect. I don’t know how you account for something like that…
I read through, and good job diagnosing it, but I’m having trouble finding any sort of problem here? I apologize if that isn’t the purpose of this thread; I just want ot make sure that if there is an issue you are having, we can get you sorted out right away.
"I’m interested now in being a better CSS detective going forward. "
Correct me if I’m wrong, but I got the impression the O.P. was asking if anybody had any great ways of troubleshooting CSS issues. I for one would be interested in hearing about people’s different strategies and what works best.
Same here. I am under the impression that the OP was opening a topic by sharing his experience as an example and asking folks to contribute by sharing their tips/experiences about trouble shooting.
I would recommend developing a methodical approach such that if initial “instincts” don’t seem to bear fruit, one can fall back on a series of tests including HTML and CSS validation, and step through them without skipping any. Sometimes it’s the ones we tend to gloss over that hold the key.
If I’m really desperate, and all other techniques I use don’t work, I will comment out the entire css file, and uncomment things a bit at a time until I find the problem area.
But I would only do that if all else has failed. 
I’ve done that more than once and it worked every time! The HTML can also be commented out to help narrow down the source of the problem especially if HTML attributes or “data-” attributes are involved. I did the HTML thing with a particularly troublesome form once. Found the culprit in about 5 minutes.
I don’t have a one-stop-shop for diagnosing problems. I just look at a problem and the surrounding code and formulate hypothesis. Past experience and knowledge sort of tells me what the issue probably is. Just envision the code in your head and think to yourself what is causing the issue, or what could be applied to get certain behavior.
On my website, I wrote a blog article actually detailing reasoning as to how I solved a code issue. Each case is unique though.
Commenting out code is a last resort though. I’ve only had to do that 3-4 times in my life (the most recent was a random BOM character which caused the entire CSS file after that BOM to be useless. Validator didn’t pick up on it…)
The immediate issue is resolved. I think what I imagine is a better outline or color-coding tool. When I used Firefly, I would turn on outlining, but unless you already know what you are looking for, it is too much…a jumble of lines. I thought maybe somebody knew a trick so that when
you change padding,for example, you can see that you did not just stretch THIS div, you also overlapped THATone. I suppose you can do it manually…but what a time sink,you know?
I use outlines freely when coding or modifying a page to help assure that I’m aware of where the boxes are laid out and in some cases to determine what else might be nearby. Outlines plus Firebug are my biggest helpers along with a text editor that highlights matching brackets and can help identify HTML brackets with errors between the open and close tags.
In my style sheet I have color classes (fg0…fg6, bg0…bg6) set so that appending the class changes either the div’s foreground and/or background color. Also set are .hhh {display:none} and quite a few others.
A PHP constant, LOCALHOST, is set to TRUE, if and only if I am running locally. If TRUE a “Hunky_Dory.php” debugger is included - which is toggled and can be seen working in the following top-right-hand link:
The debugger routine is mostly used for trying to keep GWT happy by showing Title, Description page contents, etc. but is also useful to quickly add test links e.g. HTML and CSS Validators, Pingdom, etc
Bottom right hand shows Class and View names which is very handy.
Seldom do I have to resort to rem the style sheet using a binomial routine which halves the problem - is it greater or less than, if so rem the other half.
Those are my favourite tools, too - along with the W3Cvalidators, of course. I also really like the Web Developer Toolbar, which has a number of helpful tools, including one to check a local HTML or CSS page in the validator with just a single click.
[quote=“TechnoBear, post:13, topic:118125”]I also really like the Web Developer Toolbar, which has a number of helpful tools, including one to check a local HTML or CSS page in the validator with just a single click.
[/quote]
Those look like they could be useful. For the most part, I use the developer tools in the browser, particularly things like ‘inspect element’ and the coloured box model tools to see what’s going on. The bracket matching stuff in Notepad++ is very handy too.
For a problem like the OP was having, I could see turning the borders on for adjacent code blocks being useful too - hopefully that would have shown the overlap.
I want to thank everyone for their posts on this topic…This has been helpful to me, and I have a few new ideas on how to work more effecitvely.
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.