Submit Hint Search The Forums LinksStatsPollsHeadlinesRSS
14,000 hints and counting!

A bookmarklet to outline (not border!) HTML elements Web Browsers
One popular trick for Web designers has been to use a Javascript bookmark to add visible borders to the HTML elements on the current page, making it easier to tell where their margins and padding may be colliding. This works pretty well, but the added one-pixel borders change the dimensions of the elements slightly, so what you see isn't quite what you were getting.

Safari, however, supports the outline CSS2 attribute, which draws a line outside the border but doesn't affect the dimensions of the element. So we can use this bookmarklet instead - click it now to see its effect on this page, or drag it to your bookmarks to have it always available.
    •    
  • Currently 1.50 / 5
  You rated: 1 / 5 (4 votes cast)
 
[8,165 views]  

A bookmarklet to outline (not border!) HTML elements | 6 comments | Create New Account
Click here to return to the 'A bookmarklet to outline (not border!) HTML elements' hint
The following comments are owned by whoever posted them. This site is not responsible for what they say.
A bookmarklet to outline (not border!) HTML elements
Authored by: Cameroon on May 28, '05 11:21:16AM

That will definitely help the layout process.

Of course, it sucks that so many browsers (*cough*IE*cough*) can't do CSS properly and so you end up having to screw with stuff even when the layout is right.



[ Reply to This | # ]
A bookmarklet to outline (not border!) HTML elements
Authored by: restiffbard on May 28, '05 02:51:41PM

Thanks for that. Very handy. :)



[ Reply to This | # ]
A bookmarklet to outline (not border!) HTML elements
Authored by: Werd on May 28, '05 04:06:13PM

Yes, thank you! Also showing dimensions would be even better, but I suppose that would take a special plugin.



[ Reply to This | # ]
Re: A bookmarklet to outline (not border!) HTML elements
Authored by: Uncle Asad on May 29, '05 01:39:52AM

This also works in iCab 3 and (not-so-well) in nightly versions of Gecko browsers. Thanks!



[ Reply to This | # ]
A bookmarklet to outline (not border!) HTML elements
Authored by: kaidoh on May 29, '05 06:15:03AM

You might try the <a href="http://www.laszlo.com.pl/webdev/index.php">WebDevAdditions-Plugin for Safari</a>. It proviedes useful menu entries to outline various elements on a webpage. And it's free.



[ Reply to This | # ]
A bookmarklet to outline (not border!) HTML elements
Authored by: kaidoh on May 29, '05 06:22:44AM
I'm sorry, I missed the "HTML Formatted"-Button in my upper post. Try to click this: Safari WebDevAdditions

[ Reply to This | # ]