Debugging style sheets isn't a whole lot of fun. Especially for persons, like me, who aren't knee deep in BBEdit all day long. Today I am trying to get boxes to float and position the way I want them too. It's not rocket science and I've done it many, many times before but as each site is different, so are the pieces to the puzzle.
One of the more frustrating difficulties in this work is deciphering what causes a box to behave differently between all three browsers. Specifically, why is that box wider in IE when it fits fine in Firefox and Safari or visa-versa. The methods for finding the problem are good and many. On the Mac I use a combination of solid background colors assigned to each box I'm working with and measure them xScope, that wonderful utility available from Iconfactory that lets me bring a ruler overtop of any application for taking accurate measurements.
Still I have to test for Internet Explorer and that's on a separate PC where xScope can't be used. I know there are alternatives but I hate having to buy and/or install another piece of software just so I can get a quick measurement of a box width.
And then it dawned on me that any image can be placed in the background of almost any block level element. So why not create an image of a ruler? Duh.
So here it is, here you have it, a simple image that can be applied as the background to most block level elements that will help you get an idea what's going on between browsers and platforms without the need for another application. It has already saved me a bit of time and could do the same for you.
Join the fray by reading through and commenting at the end.
Well done. Use that in conjunction with my Subtraction Grid Imposition Method and we almost have a toolbox as robust and accurate as a commercial artist's pasteboard, ca. 1965.
Hey, when you're on Windows, I'd recommend using JRuler. It's free, and lets you put a ruler over just about anything...
http://www.spadixbd.com/freetools/jruler.htm
The Web Developer Extension actually has a ruler in it, too. Misc -> Display Ruler. You can also view the element's size with Information -> Display Element Information. What a great extension.
Extensions, applications are great but I wanted something I could use without having to install or open another application on my PC. Still, thanks for adding the suggestions.
Funny you should mention that Khoi, I actually did do something like this with your grid imposition method on a grid-heavy site recently.
I've also been known to hold a T-square up to my monitor in the past.
That leaves me feeling like I should have thought of it ages ago. Like... Five years ago. Way to be the alpha web designer, this will come in handy.
*smacks head and says "I should have thought of this"*
Thanks for such an awesome addition to a web designers toolbox. I'll most certainly roll this into every site I'm working on. Again, great work.
The primitiveness and brilliance of this idea (and the fact we still need to do this in the first place) makes me want to cry and laugh at the same time. I'm sure I'll get some mileage out of this - thanks for sharing it.
This ruler idea is the next HugeFooterTM.
Also ... I thought you were the first to coin DarthBook ... and I've been giving you credit in my head as I read it elsewhere. DarthBook: the next Asshat. You're essentially a clearinghouse for good ideas.
Brilliant!
What about the measureIt extension for firefox. Its free and cross platform I think? I use it on windows at the moment and it has been superb.
I was sooo going to link up Khoi's Subtraction Grid Imposition Method, but he beat me to it.
A great method for laying out a page...
I used this idea a while back when editing between a PC and a Mac. I even left it on one of my pages I liked it so much. Sort of a "making of" leftover.
Now if only I could code... *sigh*
If you have access to a PC and a Mac simultaneously, you can just run Microsoft's (free) Remote Desktop Connection client on the Mac and use your Mac utilities on top of Windows-in-a-window.
http://www.microsoft.com/mac/otherproducts/otherproducts.aspx?pid=remotedesktopclient
Somehow I think the simplicity of this idea has been lost on a generation...
Great idea. *bows*
Greg, actually I think the benefits of running Windows on your Mac screen and being able to switch to it with a Cmd-Tab far outweigh the simplicity factor here :) (of course, those with an Intel Mac can just use Parallels so no separate Windows box is required, but on a local network RDC is still very fast and uses virtually no overhead).
The most brilliant ideas are always obvious in retrospect. Nice.
Very nice Greg. I can see using this in PhotoShop as well. (I don't like the native ruler tools)
Slightly off topic...
I've placed little white and orange X's on my desktop background image for quick browser resizing. snap shot
But... What about that javascript ruler from SlayerOffice? It's not really separate software, and it gets the job done, right? Find it here.
Holy crap. Talk about a new dawn in css bug-testing. Thanks Greg!
Hi Greg. I have been using my own pixel ruler for many years for all of the reasons mentioned. It is just the first step to proving that I am not crazy and the boxes really are different sizes. I am going to try some of the other tricks listed in the comments. Thanks.
Excellent! Thanks for the ruler!
Greg,
Sweet. You are the blog Ruler of the day for this little gem.
At the moment that I thought I couldn't be more firmly in the camp which is in every way opposed to using CSS for positioning, I read this. To think of the man hours which have been irrecoverably wasted just to confirm to every single browser's pathetic failure to implement a "standard" (those scare quotes are EARNED)! Keep on debugging, CSS zealots!
Or, you could just use a line of javascript to determine the client width or height of the element...
Alain, if you've got said javascript please share, I'd like to see it.
Here's an example of the .js:
Place this part in the head:
function size() {
alert(document.getElementById('test1').clientWidth);
}
And this part in the body:
lorem ipsum dolorsize
Hope it helps.
Sorry, tried placing the code within 'code' tags in the comments and looks like they were stripped.
Basically, in the body, just create a div with the id of 'test1' and place a border around it for easier viewing.
Then create link that invokes the size() function. You should get an alert that tells you the size of the div.
When developing a CSS layout I usually just use the web developer toolbar for IE (as mentioned above by Glen C.) It isn't another program, no more than the webdev toolbar for Firefox is - infact its another case of Microsoft trying to copy Mozilla (tabbed browsing anyone?).
You can get the toolbar directly from Micro$oft. It includes a nice DOM explorer, window resizer, element outliner, and ID/Class labeler ala Firefox's webdev toolbar in addition to that ruler mentioned earlier. I highly recommend it.
Such a simple great idea. Well done Greg. I've already made use of this by adding it to CSS file to evoke a quick class="rule".
Additionally, I live by Iconico's Screen Calipers (Mac and Win).
This looks good Greg. My usual method is to take a quick screenshot into Photoshop, zoom in and measure there.
Yeah, I've been doing screenshot-zoom-measure for a while. This is an excellent tip.
Greg rules.
Grids and rulers... well, they rule :) My own design background is in newspaper design, from back in the late 1980s, eeek, an old guy lurking. Anyway, I'm a big fan of any tool that helps line up those grids. And I'm in the process of moving my web production methods over to CSS, so this is helpful. Thanks much.
Fantastic idea, thanx for sharing!
Really good!
Excelent!
I did this once, but my graphic was a bit simpler, and I used it to test some layout-resizing javascript that I was writing. It's a good solution for some situations, and as you've mentioned, you won't have to install anything on your system to use it.
I've long since stopped using my image however, in favor of the web developer extension and measureit for firefox, and the web developer toolbar for IE6. 'Screen Calipers' also works niceley, i've been told. Also, with these tools you can leave existing background images in place. Still, the background image is a useful technique and it's cool that you thought to share it.
ot: uhm...United States not very good in this world cup...i'm sorry. (by an italian soccer fanatic ^__^)
I also prefer the measureIt extension Marc and Scott suggested. It allows you to measure horizontally and vertically. There are also some instances where you need to measure a distance where you can't easily place a background image.
Plus I hate counting ruler lines...so its nice to have the number output.
Nice idea though. Its kind along the same line as changing the background color of areas to determine where problems are happening.