Problems with inheritance

This forum is for all Flare issues related to styles, stylesheets and XML.

Problems with inheritance

Postby Paul Griffiths on Mon Jun 02, 2008 7:42 am

I'm trying to do something which I think sould be fairly simple but it's defeating me.

I want to express my font sizes in ems, or possibly percentages, so that my WebHelp can be resized by users with visual problems. But I keep getting tripped up by inheritance.

Can anyone suggest what CSS I need to style the following so that all the Ordinary Text appears at the same size and the Smaller Text is 80% of the Ordinary Text?

Code: Select all
<body>
   <p>Ordinary Text Ordinary Text Ordinary Text</p>
   <ol>
      <li>Ordinary Text Ordinary Text Ordinary Text</li>
      <li>
         <p>Ordinary Text Ordinary Text Ordinary Text</p>
         <p>Ordinary Text Ordinary Text Ordinary Text</p>
         <p>Smaller Text Smaller Text Smaller Text</p>
      </li>
   </ol>
   <p>Ordinary Text Ordinary Text Ordinary Text</p>
   <p>Smaller Text Smaller Text Smaller Text</p>
</body>
Paul Griffiths
Sr. Propeller Head
 
Posts: 249
Joined: Wed Apr 18, 2007 2:25 am
Location: Nottingham, UK

Re: Problems with inheritance

Postby LTinker68 on Mon Jun 02, 2008 8:02 am

Create a complex selector. For instance, in the following stylesheet snippet, my <body> tag is 1.0em (or 100%) and my normal <p> and <li> tags are .8em. But when a <p> is inside the <li> (the complex selector at the bottom), then the <p> is 1.0em of its parent tag, which in this case is the <li> tag. In other words, it's equal to the size of the <li> tag, which was previously .8em of the body tag.

Code: Select all
body {
   font-family: Verdana,Arial,sans-serif;
   font-size: 1.0em;
   color: #000000;
}

p, li {
   font-size: .8em;
}

li p {
   font-size: 1.0em;
}

You can't add complex selectors directly within the Stylesheet Editor. You need to right-click on the stylesheet file in the Content Explorer, then select Open with > Internal Text Editor, and then manually enter the complex selector into the stylesheet. Once you save it, you can then go back to the Stylesheet Editor and make any other modifications you want to the complex selector. (It'll appear under the Complex Selector group at the top of the list when viewing the Stylesheet Editor in Advanced View.)
Image

Lisa
Eagles may soar, but weasels aren't sucked into jet engines.
Warning! Loose nut behind the keyboard.
LTinker68
Master Propellus Maximus
 
Posts: 7245
Joined: Thu Feb 16, 2006 9:38 pm

Re: Problems with inheritance

Postby Paul Griffiths on Tue Jun 03, 2008 3:02 am

Thanks. I was almost sort of there ... Actually I now think most of my problems may be due to IE not handling ems correctly. I may have better luck with percentages ...
Paul Griffiths
Sr. Propeller Head
 
Posts: 249
Joined: Wed Apr 18, 2007 2:25 am
Location: Nottingham, UK

Re: Problems with inheritance

Postby LTinker68 on Tue Jun 03, 2008 9:28 am

The practice of using ems for font sizing has been around for a long time, so IE shouldn't have a problem with it. IE does have a problem with not always loading the modified stylesheet and instead uses the styles in the cache. I've gotten in the habit of always deleting the output folder in Flare before building, because that forces IE to reload the files instead of using the cache. So it could be that IE just didn't load your changes before.

Plus, depending on what font you specify, the difference in em sizes may not be as noticeable unless you go really extreme when you tell IE to use larger (or smaller) fonts instead of the norm.
Image

Lisa
Eagles may soar, but weasels aren't sucked into jet engines.
Warning! Loose nut behind the keyboard.
LTinker68
Master Propellus Maximus
 
Posts: 7245
Joined: Thu Feb 16, 2006 9:38 pm

Re: Problems with inheritance

Postby Paul Griffiths on Tue Jun 03, 2008 9:39 am

I googled around and found a few references to IE having problems with ems, for example:

http://css-discuss.incutio.com/?page=UsingEms
http://www.gunlaug.no/contents/wd_additions_13.html
http://www.gtalbot.org/BrowserBugsSection/MSIE7Bugs/EM-font-resizing-bug.html

So I tried switching to expressing font sizes as percentages and (so far) everything is OK!
Paul Griffiths
Sr. Propeller Head
 
Posts: 249
Joined: Wed Apr 18, 2007 2:25 am
Location: Nottingham, UK

Re: Problems with inheritance

Postby LTinker68 on Tue Jun 03, 2008 9:45 am

Interesting. I did not know that. Damn IE. At least it's relatively easy enough to fix. Thanks for the links.
Image

Lisa
Eagles may soar, but weasels aren't sucked into jet engines.
Warning! Loose nut behind the keyboard.
LTinker68
Master Propellus Maximus
 
Posts: 7245
Joined: Thu Feb 16, 2006 9:38 pm


Return to Styles, Stylesheets and XML

Who is online

Users browsing this forum: No registered users and 8 guests