7 replies [Last post]
wisbin
Offline
Enthusiast
Netherlands
Last seen: 15 years 51 weeks ago
Netherlands
Joined: 2004-10-28
Posts: 71
Points: 0

Hi,

I just upgraded to webdeveloper 0.9 and as I was testing the View Style Information when I noticed something odd.

The style information I get from this Vie Style Information -when clicking on an element- was different than the original CSS declarations I defined.

for example, I get this from the webdevelopper:

div#maincolumn img.big    (line 322)
{
    padding-top: 8px;
    padding-right-value: 8px;
    padding-bottom: 8px;
    padding-left-value: 8px;
    padding-left-ltr-source: physical;
    padding-left-rtl-source: physical;
    padding-right-ltr-source: physical;
    padding-right-rtl-source: physical;
    margin-top: 0px;
    margin-right-value: 0px;
    margin-bottom: 0px;
    margin-left-value: 0px;
    margin-left-ltr-source: physical;
    margin-left-rtl-source: physical;
    margin-right-ltr-source: physical;
    margin-right-rtl-source: physical;
    background-color: white;
    background-image: none;
    background-repeat: repeat;
    background-attachment: scroll;
    -x-background-x-position: 0%;
    -x-background-y-position: 0%;
    -moz-background-clip: initial;
    -moz-background-origin: initial;
    -moz-background-inline-policy: initial;
    border-top-width: 1px;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 1px;
    border-top-style: solid;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    border-top-color: rgb(221, 221, 221);
    border-right-color: rgb(221, 221, 221);
    border-bottom-color: rgb(221, 221, 221);
    border-left-color: rgb(221, 221, 221);
}

and what I put in the css-file is this:

div#maincolumn img.big {
	padding:8px;
	margin:0px;
	background:white!important;
	border:1px solid #DDD;
}

Could somebody explain what this translation is? Is it just adding defaults and what about the different "shorthand"?

... I am confused Wink

Tags:
SteveG
Offline
Regular
Last seen: 15 years 49 weeks ago
Joined: 2004-11-16
Posts: 37
Points: 0

FF 1.0 Webdevelopper -view style info

I believe what you actually see when you select 'View CSS' is the style sheet as the browser interprets it.
That is why you see Firefox specific CSS such as

    -moz-background-clip: initial;
    -moz-background-origin: initial;
    -moz-background-inline-policy: initial; 

And any CSS shorthand is expanded.

Steve

DCElliott
DCElliott's picture
Offline
Leader
Halifax, Canada
Last seen: 3 years 24 weeks ago
Halifax, Canada
Timezone: GMT-3
Joined: 2004-03-22
Posts: 828
Points: 0

FF 1.0 Webdevelopper -view style info

You have to remember that in the Gecko rendering engine the entire browser window is rendered as HTML. You can actually view all of the internal '-moz' styles and such if you look up a file called html.css in your Firefox install subdirectory .\res - usually something like: C:\Program Files\Mozilla Firefox\res\html.css. All kinds of neat stuff in there. It is basically the default stylesheet for rendering any html element.

These defaults get mixed in with the styles you specified as everything gets rolled out in the Document Object Model and any shorthand gets expanded into individual properties.

DE

David Elliott

Before you ask
LearnXHTML|CSS
ValidateHTML|CSS

wisbin
Offline
Enthusiast
Netherlands
Last seen: 15 years 51 weeks ago
Netherlands
Joined: 2004-10-28
Posts: 71
Points: 0

FF 1.0 Webdevelopper -view style info

ok, thanks guys.

I don't like it. .. i guess.

I thought I had the opportunity to view css styles on selected elements. So I don't have to display ID & Class details first and view the css and look for it, when I want to have a quick look.

anyway...

Still this Webdeveloper is the best little thing that happened to me in 2004 Wink

cheers!


PS that are some pretty scary css files DE Sad

DCElliott
DCElliott's picture
Offline
Leader
Halifax, Canada
Last seen: 3 years 24 weeks ago
Halifax, Canada
Timezone: GMT-3
Joined: 2004-03-22
Posts: 828
Points: 0

FF 1.0 Webdevelopper -view style info

wisbin wrote:
Still this Webdeveloper is the best little thing that happened to me in 2004 Wink(
Hmmm, wisbin, I think you need to get out more - preferably in the company of some "enthousiaste jonge dames."

DE

David Elliott

Before you ask
LearnXHTML|CSS
ValidateHTML|CSS

wisbin
Offline
Enthusiast
Netherlands
Last seen: 15 years 51 weeks ago
Netherlands
Joined: 2004-10-28
Posts: 71
Points: 0

FF 1.0 Webdevelopper -view style info

wisbin wrote:

...Still this Webdeveloper is the best little thing that happened to me in 2004 Wink
...

you still make a point though Wink

DCElliott
DCElliott's picture
Offline
Leader
Halifax, Canada
Last seen: 3 years 24 weeks ago
Halifax, Canada
Timezone: GMT-3
Joined: 2004-03-22
Posts: 828
Points: 0

FF 1.0 Webdevelopper -view style info

You just hit 50 posts and are now in the Enthusiast category so my post is very apt - it is an omen, in fact. Go out and impress those dames with your "style!"

body {
  height:tall;
  hair:dark;
  appearance:handsome;
  background:mysterious;
} 
You get the picture . . .

DE

David Elliott

Before you ask
LearnXHTML|CSS
ValidateHTML|CSS

Gerry
Offline
newbie
Last seen: 15 years 39 weeks ago
Timezone: GMT+8
Joined: 2005-01-19
Posts: 1
Points: 0

FF 1.0 Webdevelopper -view style info

Yeah he is right though, "View Style Information" is supposed to make things easier, not harder. It would be great if they included a filter or something. Maybe I should go tell them instead of you guys. :oops: Laughing out loud