[WSG] Difference between applied CSS and Computed CSS
Hi all, This is my first post here, I've a website which is hosted in two location and it still under development. Here I've a correct render under FF 3.6 (1) http://www.serenitude.at/margot/vmchk/spa-fontenay/soin-spa-fontenay/nos-massages/id-menu-306.html But here I noticed bigger text font under FF too (2) http://www.steit.net/dev/serenitude/vmchk/spa-fontenay/soin-spa-fontenay/nos-massages/id-menu-306.html I've tested both of those links in Chromium 5.0.335.0 (0) they show me the bigger font again. Under Firebug I've noticed that there is no difference between applied CSS for both website (tab: Style in firebug), but the calculated CSS (tab: Computed in firebug) mention that (1) has font-size: 12px and (2) has font-size: 16px. I wonder to know how this could be happen, is it a non closed tags or a misconfigured CSS that caused ambiguous inheritance. Any idea about how to figure out with this problem, how to fix the render of this page to become the same under different navigators. Thanks for any help -- Rateb BEN MOUSSA IT - Development Integration S.A.R.L. STEIT - Membre du GEEIT | URL : www.steit.net | Tel : +33 970406236 | Mob : +216 97 62 54 94 | Gtalk : bmra...@gmail.com | www.linkedin.com/in/RatebBENMOUSSA | Linux user #486726 *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] Difference between applied CSS and Computed CSS
Here I've a correct render under FF 3.6 (1) http://www.serenitude.at/margot/vmchk/spa-fontenay/soin-spa-fontenay/nos-massages/id-menu-306.html But here I noticed bigger text font under FF too (2) http://www.steit.net/dev/serenitude/vmchk/spa-fontenay/soin-spa-fontenay/nos-massages/id-menu-306.html I've tested both of those links in Chromium 5.0.335.0 (0) they show me the bigger font again. -- Rateb BEN MOUSSA Hi Rateb BEN MOUSSA When I look at the links provided (in FF 3.6) the pages are identical--no difference in font size for me. Tim *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] Difference between applied CSS and Computed CSS
Hi Rateb BEN MOUSSA
I am not seeing any difference in font size between the sites on
either Mac/FF3.5.7 or Mac/Chrome 5.0.307.9 beta.
Looking in Firebug, I see the body has been set in two places with a
font-size of 12px.
template.css (line 3)
body {
color:#00;
font-family:Arial,Helvetica,sans-serif;
font-size:12px;
}
editor.css (line 1)
body {
font-family:Arial,Helvetica,sans-serif;
font-size:12px;
}
These rules appears to be the same in both locations.
One thing I do notice is that both sites have missing CSS in Safari -
which causes large chunks of the page to appear unstyled.
The reason for this can probably be found in one of your css files:
/dev/serenitude/templates/serenitude/css/
css-5b04215701ad544b0144a40c4c2cdd38.php
In this css file you have a comment, a blank line and then an
@charset:
/*** principale.css ***/
@charset utf-8;
The @charset MUST appear in the first line of a CSS file. As the
canonical document on @charsets states:
Only one @charset rule may appear in an external style sheet and it
must appear at the very start of the document. It must not be preceded
by any characters, not even comments.
http://www.w3.org/International/questions/qa-css-charset
From personal experience, I can tell you that while all other
browsers may be forgiving, Safari will ignore an entire style sheet if
the @charset does not appear at the very start of the file.
Easy to fix, profound difference (at least in Safari) :)
HTH
Russ
On 25/02/2010, at 9:05 PM, Rateb BEN MOUSSA wrote:
Hi all,
This is my first post here, I've a website which is hosted in two
location and it still under development.
Here I've a correct render under FF 3.6
(1)
http://www.serenitude.at/margot/vmchk/spa-fontenay/soin-spa-fontenay/nos-massages/id-menu-306.html
But here I noticed bigger text font under FF too
(2)
http://www.steit.net/dev/serenitude/vmchk/spa-fontenay/soin-spa-fontenay/nos-massages/id-menu-306.html
I've tested both of those links in Chromium 5.0.335.0 (0) they show
me the bigger font again.
Under Firebug I've noticed that there is no difference between
applied CSS for both website (tab: Style in firebug), but the
calculated CSS (tab: Computed in firebug) mention that (1) has font-
size: 12px and (2) has font-size: 16px.
I wonder to know how this could be happen, is it a non closed tags
or a misconfigured CSS that caused ambiguous inheritance.
Any idea about how to figure out with this problem, how to fix the
render of this page to become the same under different navigators.
Thanks for any help
--
Rateb BEN MOUSSA
IT - Development Integration
S.A.R.L. STEIT - Membre du GEEIT
| URL : www.steit.net
| Tel : +33 970406236
| Mob : +216 97 62 54 94
| Gtalk : bmra...@gmail.com
| www.linkedin.com/in/RatebBENMOUSSA
| Linux user #486726
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
Re: [WSG] Difference between applied CSS and Computed CSS
Hi
One problem might be that you have the word paris before your doctype,
which shows up as the page is rendering:
paris
!DOCTYPE html P
Which could affect the CSS somewhat (at a guess). Try removing everything,
including white space and line breaks before the doctype.
I see the font size difference between the two different engines.
Gecko - Firefox 3.5.8
Webkit - Chrome (5.0.307.9 beta) / Arora (0.10.1)
Both Chrome and Arora show a larger font size than Firefox in the text
content under the Massage-modelage*
Dorsal/dev/serenitude/58-massage-modelage*-dorsal/flypage-ask-dynprice-duo.tpl.html
heading.
Additionally, it's fine to serve your CSS from any file provided it's valid
CSS of course and it sends the correct header to the browser. e.g in PHP
?php
header('Content-Type: text/css');
//stuff
?
- which you are doing judging by the file headers. The file extension
doesn't matter, it's just text.
Cheers
James
On Thu, Feb 25, 2010 at 9:59 PM, Russ Weakley r...@maxdesign.com.au wrote:
Hi Rateb BEN MOUSSA
The reason for this can probably be found in one of your css files:
/dev/serenitude/templates/serenitude/css/css-5b04215701ad544b0144a40c4c2cdd38.php
In this css file you have a comment, a blank line and then an @charset:
/*** principale.css ***/
@charset utf-8;
The @charset MUST appear in the first line of a CSS file. As the canonical
document on @charsets states:
Only one @charset rule may appear in an external style sheet and it must
appear at the very start of the document. It must not be preceded by any
characters, not even comments.
http://www.w3.org/International/questions/qa-css-charset
From personal experience, I can tell you that while all other browsers may
be forgiving, Safari will ignore an entire style sheet if the @charset does
not appear at the very start of the file.
Easy to fix, profound difference (at least in Safari) :)
HTH
Russ
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
Re: [WSG] Difference between applied CSS and Computed CSS
Hi,
I'm sorry because as said Tim Duffy, the render was the same and I confirm
that in (OpenSuse11.2/FF 3.6) after a cache purge.
I've tuned a specified component which insert comment /*** filename.css
***/ in the cached generated css and now I put @charset utf-8; in
place. This helped me to retrieve the original layout under Safari/Chrome.
Removing any characters before !DOCTYPE ... really does miracles, because
now the layouts is much better under IE/Safari/Chrome/FF.
Now see the difference:
(1)
http://www.serenitude.at/margot/vmchk/spa-fontenay/soin-spa-fontenay/nos-massages/id-menu-306.html
(Fixed)
(2)
http://www.steit.net/dev/serenitude/vmchk/spa-fontenay/soin-spa-fontenay/nos-massages/id-menu-306.html
The lesson was taken, thanks for you all.
On 25 February 2010 13:11, James Ellis james.el...@gmail.com wrote:
Hi
One problem might be that you have the word paris before your doctype,
which shows up as the page is rendering:
paris
!DOCTYPE html P
Which could affect the CSS somewhat (at a guess). Try removing everything,
including white space and line breaks before the doctype.
I see the font size difference between the two different engines.
Gecko - Firefox 3.5.8
Webkit - Chrome (5.0.307.9 beta) / Arora (0.10.1)
Both Chrome and Arora show a larger font size than Firefox in the text
content under the Massage-modelage*
Dorsalhttp://dev/serenitude/58-massage-modelage*-dorsal/flypage-ask-dynprice-duo.tpl.html
heading.
Additionally, it's fine to serve your CSS from any file provided it's valid
CSS of course and it sends the correct header to the browser. e.g in PHP
?php
header('Content-Type: text/css');
//stuff
?
- which you are doing judging by the file headers. The file extension
doesn't matter, it's just text.
Cheers
James
On Thu, Feb 25, 2010 at 9:59 PM, Russ Weakley r...@maxdesign.com.auwrote:
Hi Rateb BEN MOUSSA
The reason for this can probably be found in one of your css files:
/dev/serenitude/templates/serenitude/css/css-5b04215701ad544b0144a40c4c2cdd38.php
In this css file you have a comment, a blank line and then an @charset:
/*** principale.css ***/
@charset utf-8;
The @charset MUST appear in the first line of a CSS file. As the canonical
document on @charsets states:
Only one @charset rule may appear in an external style sheet and it must
appear at the very start of the document. It must not be preceded by any
characters, not even comments.
http://www.w3.org/International/questions/qa-css-charset
From personal experience, I can tell you that while all other browsers may
be forgiving, Safari will ignore an entire style sheet if the @charset does
not appear at the very start of the file.
Easy to fix, profound difference (at least in Safari) :)
HTH
Russ
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
--
Rateb BEN MOUSSA
IT - Development Integration
S.A.R.L. STEIT - Membre du GEEIT
| URL : www.steit.net
| Tel : +33 970406236
| Mob : +216 97 62 54 94
| Gtalk : bmra...@gmail.com
| www.linkedin.com/in/RatebBENMOUSSA
| Linux user #486726
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
Re: [WSG] Difference between applied CSS and Computed CSS
On 2010/02/26 12:00 (GMT+1100) Stephen Holmes (Gmail) composed: the computed size of the font would have been 16pt, the default in IE 6 The standards mode default font size of IE[6-8] is and always has been 12pt. Most often that translates to 16px, but often users and laptop vendors change the default DPI from 96, which is what results in 16px, to something higher, most commonly 120, which results in a 20px default. In IE[6-8] quirks mode fonts in sizes specified by keywords or relatively are slightly larger, to match equivalent size specification results of older IE versions, many of which are tabled on: http://fm.no-ip.com/auth/IE/absolute-sizes-IE5.html -- Our Constitution was made only for a moral and religious people. It is wholly inadequate to the government of any other. John Adams, 2nd US President Team OS/2 ** Reg. Linux User #211409 Felix Miata *** http://fm.no-ip.com/ *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
