subject:"Re\: \[css\-d\] Font sizing"

Re: [css-d] font-sizing bug in generated content in IE 10 ?

2013-05-08 Thread Eric

I've been thinking about this issue since it was first posted because it seems
to relate, at least a bit, to a bug in IE9 and 10 that I reported late last
year. See IE bug ID 772679
http://connect.microsoft.com/IE/feedback/details/772679/ie10-not-recognizing-font-decloration-when-rem-is-used-as-font-size-unit-of-measure
.
In thebug IE won't use the REM unit in any font-size rule including the font
shorthand syntax. In fact does it not use the REM it completely ignores the
entire font related rule and falls all the way back to its default serif or
sans-serif skipping the full stack. Interestingly, IE will use the REM unit to
size elements (as I do regularly).

I battled with their bug reporting system for months, it kept closing the bug
with 'as designed' and I had to keep reactivating it. Finally I contacted out
Fearless and Famous Leader, Mr. CSS Wizard himself, Eric Meyer who talked to
some IE Engineers he knows who then started working on the issue via internal
bug IDsMany thanks Eric!!

Anyway, this issue shines another light on the whole problem in IE. As I recall
generated content is handled differently by the UA's parser. My guess is that
when generated content is present a header is added to it before it enters the
CSS parser and this header contains information that then allows IE to recognize
and use the REM unit. I'll add a note to the bug ID containing the info from
this problem...maybe it will help them id and fix the bug faster.

In the meantime the only work-around that I've found is to include a font-sizing
rule using pixels before one using REMs. Yes, I know it's a pain but the REM
unit is just too powerful and flexible to let EM get in the way.

Hope that helps a bit,

Eric

__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] font-sizing bug in generated content in IE 10 ?

2013-04-26 Thread Philippe Wittenbergh


Le 26 avr. 2013 à 00:17, Gabriele Romanato gabriele.roman...@gmail.com a 
écrit :

  You first declared a font-size on a type selector, p, with
 a pseudo-element, then you declared a class with another pseudo-element on
 the same element type

The font-size is applied on the pseudo-element, not on the p. For both 
paragraphs the pseudo-element should compute the font-size based on the parent 
element.

Yukka wrote:

 This looks definitely like a bug to me. The main practical issue with it is 
 that we don’t know what really triggers it, so we can’t say for sure how to 
 avoid or circumvent it.

Definitely a bug. And IE 9 has the same issue. Surprisingly, IE 8 has it right 
(when substituting the CSS2.1 notation using a single column). And no, using 
the CSS2.1 notation does not make it work in IE 9 and 10… No idea what secret 
sauce the MSIE team has added in the mix, so I can't suggest any possible 
workaround.

Philippe
--
Philippe Wittenbergh
http://l-c-n.com




__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] font-sizing bug in generated content in IE 10 ?

2013-04-26 Thread Georg


On 26.04.2013 05:00, Philippe Wittenbergh wrote:
No idea what secret sauce the MSIE team has added in the mix, so I 
can't suggest any possible workaround. 


This IE bug makes me break the convention not to use fixed font-size on 
web pages, applying font-size in px on the generated content in IE9+ 
only - hacked in. Seems to work reasonably well.


regards
Georg

__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] font-sizing bug in generated content in IE 10 ?

2013-04-26 Thread Philip TAYLOR



Georg wrote:

 This IE bug makes me break the convention not to use fixed font-size on
 web pages, applying font-size in px on the generated content in IE9+
 only - hacked in. Seems to work reasonably well.

Better than rem, Georg ?  Having been forced to use rem for this
fix, I am now considering adopting them more widely.

Philip Taylor
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] font-sizing bug in generated content in IE 10 ?

2013-04-26 Thread Tom Livingston

On Fri, Apr 26, 2013 at 2:35 PM, Philip TAYLOR p.tay...@rhul.ac.uk wrote:


 Georg wrote:

 This IE bug makes me break the convention not to use fixed font-size on
 web pages, applying font-size in px on the generated content in IE9+
 only - hacked in. Seems to work reasonably well.

 Better than rem, Georg ?  Having been forced to use rem for this
 fix, I am now considering adopting them more widely.

 Philip Taylor


Support isn't too bad for rem. What's best practice fall back for using rem?



--

Tom Livingston | Senior Front-End Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] font-sizing bug in generated content in IE 10 ?

2013-04-26 Thread Georg


On 26.04.2013 14:35, Philip TAYLOR wrote:
Better than rem, Georg ? Having been forced to use rem for this 
fix, I am now considering adopting them more widely.


Haven't bothered to test out what's best in bug-cases like this, only 
what works and seem to do no real harm. The rem unit do look better on 
paper though.


regards
Georg

__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] font-sizing bug in generated content in IE 10 ?

2013-04-25 Thread Gabriele Romanato

You wrote: font-size: 0.5rem. Is it a typo? Anyway, I think it's somewhat
related to the cascade and inheritance behavior when applied to
pseudo-elements. You first declared a font-size on a type selector, p, with
a pseudo-element, then you declared a class with another pseudo-element on
the same element type (p). The point is that they're both Ps, so they
inherit from each other. This is a controverted question. I think this IE's
behavior **might** be correct.



On Thu, Apr 25, 2013 at 12:41 PM, Philip TAYLOR p.tay...@rhul.ac.uk wrote:

 Please take a look at :


 http://hellenic-institute.rhul.ac.uk/research/Etheridge-development/Test/

 (transcript below) and compare its appearance in IE 10
 and another browser (I use Seamonkey; it will almost
 certainly appear in Firefox as it does in Seamonkey,
 as they use the same rendering engine).

 If you use page zoom (Ctrl +) to make everything clearly
 visible, you will see that in IE, the generated content
 on line two is about one half of the generated content
 on line one, whilst the generated content on line four is
 exactly the same size as that on line three.  Lines one
 and two use em units for the generated content, lines
 three and four use rem units.  The only difference between
 the first and second line of each pair is that the P element
 is placed in a class, and the CSS rule applies both to the
 classless and classed P elements.

 It seems to me that IE may be incorrectly applying the font-size
 attribute of the rule twice in the case of the classed P elements
 (but not the content attribute)  -- once for the P and once for
 the class;  what do others think ?

 Philip Taylor
 
 !DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01//EN
 http://www.w3.org/TR/html4/strict.dtd;
 HTML
 HEAD
 META http-equiv=Content-Type content=text/html; charset=utf-8
 TITLEIE generated content test/TITLE
 STYLE type=text/css
 DIV.em P::before, DIV.em P.EOF::before
 {font-size: 0.5em; content:em-units: }
 DIV.rem P::before, DIV.rem P.EOF::before
 {font-size: 0.5rem; content:rem-units: }
 /STYLE
 /HEAD

 BODY
 DIV class=em
 PLine one/P
 P class=EOFLine two/P
 /DIV
 DIV class=rem
 PLine three/P
 P class=EOFLine four/P
 /DIV
 /BODY
 /HTML
 __
 css-discuss [css-d@lists.css-discuss.org]
 http://www.css-discuss.org/mailman/listinfo/css-d
 List wiki/FAQ -- http://css-discuss.incutio.com/
 List policies -- http://css-discuss.org/policies.html
 Supported by evolt.org -- http://www.evolt.org/help_support_evolt/




-- 

Gabriele Romanato

Referente IWA ITALY - Regione Abruzzo

International Webmasters Association Italia

http://www.iwa.it  | e-mail:  abru...@iwa.it

Professionista Web - Legge 4/2013


http://gabrieleromanato.com/

http://gabrieleromanato.name/  (English)
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] font-sizing bug in generated content in IE 10 ?

2013-04-25 Thread Jukka K. Korpela


2013-04-25 18:17, Gabriele Romanato wrote:


You wrote: font-size: 0.5rem. Is it a typo?


I’m pretty sure Philip intentionally tested both with em and with rem. 
The bug manifests itself when em is used, not when rem is used, 
suggesting that IE 10 indeed calculates em wrong, when there is a 
pseudo-element with a class and font-size is set on it using the em unit.



Anyway, I think it's somewhat
related to the cascade and inheritance behavior when applied to
pseudo-elements.


There is no inheritance involved when a property is set on an element.


You first declared a font-size on a type selector, p, with
a pseudo-element, then you declared a class with another pseudo-element on
the same element type (p). The point is that they're both Ps, so they
inherit from each other.


No, they don’t. Elements only inherit from their parents. And selectors 
are not elements.



I think this IE's
behavior **might** be correct.


This looks definitely like a bug to me. The main practical issue with it 
is that we don’t know what really triggers it, so we can’t say for sure 
how to avoid or circumvent it.


Yucca


__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] font sizing and ie 7 alignment help please!

2009-12-15 Thread David Laakso

Melinda Odom wrote:
 Hi,

 I am having a terrible time with font sizing in all browsers because I want a 
 fixed width and height site.

 Page is:
 http://www.designhosting.biz/support2.html

 The left column is only text. The right is a css scrolling menu.

 Using percentages on the body tag shows good in mozilla and safari but looks 
 terrible in opera. At the ie rendering site the text is longer using ie 8. 
 Also ie 7 shows the navigation buttons at the top higher off the ledge.

 I tried points for the text style which seems to show the best but don't know 
 if this is good.

 I tried pixels and ems but get about the same results or worse.

 Is there a way to keep the fonts all the same?  I see on other sites they 
 look about the same in safari, mozilla, and opera browsers.

 Thanks!

 Best Regards,
 Melinda Odom

   



Delete the height on the outermost wrapper (let the content determine 
height):
#container {
border: 1px solid red; -- :: 4 position only-- delete
padding-bottom: 40px;  : : add rule
width: 980px;
margin-right: auto;
margin-left: auto;
height: 460px; :: delete
background-color: #FFFCF7;
}

Re-set the font-size, and the font-stack, on the body declartion to:

body {
background-color: #F7F4EE;
 background-image: url(bg_body0.jpg);
background-repeat: repeat;
color: #514E4C;
font-family: Arial, Helvetica, sans-serif; -- :: delete
font-size: 80%; -- :: delete
line-height: 1.5; -- :: delete
font: normal 100%/1.4  Helvetica Neue,  Helvetica, Arial, sans-serif; 
- :: add rule
}

In other words feed Macs Helvetica Neue,  Helvetica; and, feed PCs 
Arial. Feed all OS default 100% on 1.4 line-height.
Use percent thereafter throughout the style sheet on individual selectors.

If you are pimping accessibility then normally primary content p is 
100%, secondary content p is 95%, and tertiary content p is 90%.

Once you get worked out, bring it back. Someone will help with remaining 
corrections for IE/7.

Best,
~d















__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

48 matches

Mail list logo