Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > A tool to display current selected webpage's text css?

Reply
Thread Tools

A tool to display current selected webpage's text css?

 
 
John Dalberg
Guest
Posts: n/a
 
      04-24-2005

Is there a tool or browser addon where if I select a text on a webpage, it
displays the css attributes that made up its display?

--

John Dalberg
 
Reply With Quote
 
 
 
 
Oli Filth
Guest
Posts: n/a
 
      04-24-2005
John Dalberg wrote:
> Is there a tool or browser addon where if I select a text on a webpage, it
> displays the css attributes that made up its display?
>


The Web Developer's toolbar for Firefox.

https://addons.update.mozilla.org/ex...info.php?id=60

--
Oli
 
Reply With Quote
 
 
 
 
Travis Newbury
Guest
Posts: n/a
 
      04-24-2005
Oli Filth wrote:
> John Dalberg wrote:
>> Is there a tool or browser addon where if I select a text on a
>> webpage, it displays the css attributes that made up its display?

> The Web Developer's toolbar for Firefox.
> https://addons.update.mozilla.org/ex...info.php?id=60


At the very least it does this. This and the google bar extensions are
my favorite.

--
-=tn=-
 
Reply With Quote
 
Oli Filth
Guest
Posts: n/a
 
      04-24-2005
Travis Newbury wrote:
> Oli Filth wrote:
>
>> The Web Developer's toolbar for Firefox.
>> https://addons.update.mozilla.org/ex...info.php?id=60

>
> At the very least it does this. This and the google bar extensions are
> my favorite.


The web developer plug-in is an amazing tool. CSS editing, HTML
validation links, auto window-resizing, cookie inspector, header
inspector, CSS cursor, div/img/frame/ highlighting, the list is endless.

--
Oli
 
Reply With Quote
 
Blinky the Shark
Guest
Posts: n/a
 
      04-24-2005
Oli Filth wrote:

> Travis Newbury wrote:


>> Oli Filth wrote:


>>> The Web Developer's toolbar for Firefox.
>>> https://addons.update.mozilla.org/ex...info.php?id=60


>> At the very least it does this. This and the google bar extensions are
>> my favorite.


> The web developer plug-in is an amazing tool. CSS editing, HTML
> validation links, auto window-resizing, cookie inspector, header
> inspector, CSS cursor, div/img/frame/ highlighting, the list is endless.


Agreed. But I don't see where it does what OP asked for. It will show
CSS without user having to dig it up from the link, but I don't know of
a way to just show relevant styles for a bit of text, as requested.

--
Blinky Linux Registered User 297263
Killing all Usenet posts from Google Groups
Info: http://blinkynet.net/comp/uip5.html
 
Reply With Quote
 
Oli Filth
Guest
Posts: n/a
 
      04-24-2005
Blinky the Shark wrote:
> Oli Filth wrote:
>
>>The web developer plug-in is an amazing tool. CSS editing, HTML
>>validation links, auto window-resizing, cookie inspector, header
>>inspector, CSS cursor, div/img/frame/ highlighting, the list is endless.

>
> Agreed. But I don't see where it does what OP asked for. It will show
> CSS without user having to dig it up from the link, but I don't know of
> a way to just show relevant styles for a bit of text, as requested.


CSS->View Style Information option.

You get a nice crosshair pointer, and when you hover it over an area on
the page, it tells you what the relevant ID/Class is, e.g.

html > body > div#container > p > span.special

When you click, it brings up the relevant style info.



--
Oli
 
Reply With Quote
 
Blinky the Shark
Guest
Posts: n/a
 
      04-25-2005
Oli Filth wrote:
> Blinky the Shark wrote:
>> Oli Filth wrote:


>>>The web developer plug-in is an amazing tool. CSS editing, HTML
>>>validation links, auto window-resizing, cookie inspector, header
>>>inspector, CSS cursor, div/img/frame/ highlighting, the list is endless.


>> Agreed. But I don't see where it does what OP asked for. It will show
>> CSS without user having to dig it up from the link, but I don't know of
>> a way to just show relevant styles for a bit of text, as requested.


> CSS->View Style Information option.


> You get a nice crosshair pointer, and when you hover it over an area on
> the page, it tells you what the relevant ID/Class is, e.g.


> html > body > div#container > p > span.special


> When you click, it brings up the relevant style info.


Too cool. I thought I'd hit all of the selections in all of the menus
off the WebDev toolbar; must've missed that one. Thanks!

Once more: what a bitchin' extension that is.

--
Blinky Linux Registered User 297263
Killing all Usenet posts from Google Groups
Info: http://blinkynet.net/comp/uip5.html
 
Reply With Quote
 
John Dalberg
Guest
Posts: n/a
 
      04-25-2005
On Sun, 24 Apr 2005 23:12:57 GMT, Oli Filth wrote:

> Blinky the Shark wrote:
>> Oli Filth wrote:
>>
>>>The web developer plug-in is an amazing tool. CSS editing, HTML
>>>validation links, auto window-resizing, cookie inspector, header
>>>inspector, CSS cursor, div/img/frame/ highlighting, the list is endless.

>>
>> Agreed. But I don't see where it does what OP asked for. It will show
>> CSS without user having to dig it up from the link, but I don't know of
>> a way to just show relevant styles for a bit of text, as requested.

>
> CSS->View Style Information option.
>
> You get a nice crosshair pointer, and when you hover it over an area on
> the page, it tells you what the relevant ID/Class is, e.g.
>
> html > body > div#container > p > span.special
>
> When you click, it brings up the relevant style info.


Thanks. However I can't get it to display inline styles. See demo below. If
you click "line 2" with the crosshair, it doesn't display the underline
style. Am I missing something?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
td {
font-family: Verdana, Arial, Helvetica, sans-serif;

}
-->
</style>
</head>

<body>

<table><tr><td style="text-decoration: underline; ">Hello World</td></tr>
</table>
<span style="text-decoration: underline;">Line 2</span>

</body>
</html>




--

John Dalberg
 
Reply With Quote
 
Lachlan Hunt
Guest
Posts: n/a
 
      04-25-2005
John Dalberg wrote:
> Is there a tool or browser addon where if I select a text on a webpage, it
> displays the css attributes that made up its display?


The DOM inspector (Tools > DOM Inspector) in Mozilla/Firefox will show
you what you need, plus much more.

--
Lachlan Hunt
http://lachy.id.au/
http://GetFirefox.com/ Rediscover the Web
http://GetThunderbird.com/ Reclaim your Inbox
 
Reply With Quote
 
John Dalberg
Guest
Posts: n/a
 
      04-25-2005
On Mon, 25 Apr 2005 04:28:17 GMT, Lachlan Hunt wrote:

> John Dalberg wrote:
>> Is there a tool or browser addon where if I select a text on a webpage, it
>> displays the css attributes that made up its display?

>
> The DOM inspector (Tools > DOM Inspector) in Mozilla/Firefox will show
> you what you need, plus much more.


How? I am not able to display any css in the results and the treeview shows
generic #text's which doesn't tell me which text exactly?


--
John Dalberg
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
need help to fill textboxes from a selected item in datagrid-selected index changed. mldardy ASP .Net 0 09-28-2010 02:59 PM
selected=selected in the center of option list John HTML 5 03-01-2010 08:30 PM
Selected ListItem in DropDownList does not appear selected Nathan Sokalski ASP .Net Web Controls 0 10-05-2008 10:29 PM
Selected ListItem in DropDownList does not appear selected Nathan Sokalski ASP .Net 0 10-05-2008 10:29 PM
DropDownList 2 always returns Selected = 0 for all items - even selected item Iain ASP .Net 3 12-11-2006 11:07 AM



Advertisments