Post Archive
› August 21, 2003
CSS problem diagnosis trick
If you visited the new WebGraphics design with Windows IE, up till now, the sub-pages were all out of whack. Specifically the left (larger) column on many pages was rendering too wide for the containing block that surrounds all elements on the page, and was therefore pushed to below the navigation bar - yuck.
I fixed it just now, and - as is usually the case for me with these things, the cause was a stray margin or width setting hidden somewhere in my CSS. Of course there are many bookmarklets to that will put boxes around various elements to help you diagnose problems like this - but what happens when you highlight all divs and other elements you can think of, and still can't see the issue?
On a whim I tried using Centricle's show specific elements in an undocumented way: when it prompted me for "Which elements?", I entered: "*", it prompted me for a color, I entered "red". The result? Everything had a red box around it.
I highly recommend this diagnosis method for when things get confusing with your CSS layout.