Problems with inheritance

This forum is for all Flare issues related to styles, stylesheets and XML.
Post Reply
Paul Griffiths
Sr. Propeller Head
Posts: 261
Joined: Wed Apr 18, 2007 2:25 am
Location: Nottingham, UK

Problems with inheritance

Post by Paul Griffiths »

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>
LTinker68
Master Propellus Maximus
Posts: 7247
Joined: Thu Feb 16, 2006 9:38 pm

Re: Problems with inheritance

Post by LTinker68 »

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.
Paul Griffiths
Sr. Propeller Head
Posts: 261
Joined: Wed Apr 18, 2007 2:25 am
Location: Nottingham, UK

Re: Problems with inheritance

Post by Paul Griffiths »

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 ...
LTinker68
Master Propellus Maximus
Posts: 7247
Joined: Thu Feb 16, 2006 9:38 pm

Re: Problems with inheritance

Post by LTinker68 »

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.
Paul Griffiths
Sr. Propeller Head
Posts: 261
Joined: Wed Apr 18, 2007 2:25 am
Location: Nottingham, UK

Re: Problems with inheritance

Post by Paul Griffiths »

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/BrowserBugsSecti ... g-bug.html

So I tried switching to expressing font sizes as percentages and (so far) everything is OK!
LTinker68
Master Propellus Maximus
Posts: 7247
Joined: Thu Feb 16, 2006 9:38 pm

Re: Problems with inheritance

Post by LTinker68 »

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.
Post Reply