CSS: Debugging Position and Size of Elements
Listen to this article
I've been getting into a lot of CSS stuff over the last couple of days and I'm really digging it; it's so much easier to lay stuff out than with tables! (OK I'm a little slow but I've never been much of an HTML man myself.)
One of the most helpful things I've learned (thanks to my mate Stuart) is that when trying to layout, position and size an element, it helps to set the background colour to something really obvious and in contrast to the rest of the page (in my case I used bright orange). This way you can see exactly where the borders and margins are.
Thanks Stu!
Comments
The only problem with CSS positioning is that you basically throw away any cross-browser compatability, especially with older browsers. IE, in particular, doesn't do the right thing with CSS positioning, even in 6 (5.5 is really bad) - getting CSS to work in both IE and more-standards-compliant browsers is a pain that will send you running back to tables. :)
Posted by: Robert | February 5, 2006 09:34 AM
hi there,
Thanks. I tried the link you gave and got the following ERROR MESSAGE
"Apologies, but we cannot find a post with the permalink: http://www.redhillconsulting.com.au/blogs/simon/archives/000306.html"
BR,
~A
Posted by: Anjan Bacchu | February 5, 2006 10:54 AM
Check out the favelet MODI. You can mouse over items and hit keys to show and hide borders, color the backgrounds and such.
A killer lil tool.
Dion Almaer
Founder, Ajaxian.com
http://ajaxian.com
Cleaning up the web with Ajax
Posted by: Dion Almaer | February 5, 2006 02:50 PM
If you are using Firefox combined with the Web Developer extension, you can also use the function 'Display Topographic Information', which will color all your elements in shades of gray. It makes borders and margins of all your elements very clear. Web Developer has many, many other useful functions, I've been it using for a long while on every web project I do, couldn't imagine working without it!
https://addons.mozilla.org/extensions/moreinfo.php?id=60
Posted by: Nicolas Mommaerts | February 6, 2006 05:28 AM
Welcome to the goodness that is CSS. There are heaps of great resources out there to help you get your head around some nifty techniques - I reckon the number one place is A List Apart. As you would expect there are zealots and those who decry the goodness that is CSS. With apologies to Robert - who's insights are spot-on - I think that electing to revert to tables due to the difficulties implementing pure CSS is a little soft. I mean, show me a programmer who ever walked away from a challenge. There are many who have implemented fantastic CSS based websites which also render nicely (degrade gracefully) in 'lesser browsers'. I find that it is to worth drawing a line in the sand and choose support web standards. My own site is a little old, so the techniques used here are also a little dated, but I'm trying to get things tighter on recent projects.
Posted by: Travo | February 7, 2006 08:26 AM
2nd for the web developer extension. It's a must have, for a variety of reasons. Between the web developer plugin and live headers, I can't imagine writing an internet application without firefox. The javascript console in firefox will also show you errors while parsing your CSS, which is useful as well.
Posted by: Rob Meyer | February 20, 2006 05:43 PM
Travo: while the console is nice sometimes I don't want to see the css errors mixed in with javascript. Enter console squared (imagine a little superscript 2 :-)!
Posted by: Glen Stampoultzis | February 20, 2006 07:47 PM