Handy CSS tool idea/inquiry/wish

So, I was tinkering on a website that I’ve set up using e107, and found myself wishing I had a tool that would tell me more about the styles and stylesheets of the various elements of the site’s interface. I was thinking that it would be cool to have a little applet that would give me all the info about every element on the page over which the mouse cursor was currently hovering. Maybe have this stuff pop up in a tool-tip-like bubble, but have the data accessible (via the clipboard) also.

For example, I want to know about the style settings of a menu bar item, I could simply move my mouse over that element (right in the browser) and a bubble would pop up giving its CSS file (if external), the element’s class/id and all its details, what events might be triggering other classes and what those class details might be… just quick access to styling info by simply hovering the cursor over where you’d like to know stuff.

Don’t know quite how this would handle nesting, but it would be nice to see a heirarchy somehow and what styles have been assigned at what levels.

There’s probably such a tool out there. If you know of such a thing, drop a line. If you’ve not, but think it’d be cool to code (if even possible?) go for it, and keep me apprised. If you think I’m just being looney or lazy, vent it! (u prolly could use the relief! :smiley: )

Dunno 'bout fer you, but it sure beats trying to track this stuff down myself… it can be done, I know, but what a hassle - especially for a style setup that I didn’t code myself. Its hard enough trying to remember what I did, much less trying to decifer the spagetti-code of others.

Doesn’t CTRL+U allow you to view the page’s source?
Normally the stylesheet can be found there.
Or am I wrong?
If I am, I hope someone else can help you.

Page source will only show the HTML, and the link to the CSS file, unless the CSS style is inline, which is relatively rare, for good reason.

mzunga, you want the CSS viewer in Firefox to view existing pages. It lets you see exactly what is used & where. I forget if its in the default install or a plugin. Try looking for CSS & development at mozilla.