CODEWITHSUNDEEP
csslotus-notes
Richard Gapasin Tacsion
Richard Gapasin Tacsion

Reputation: 31

Stop inherit font-size for specific <div>

I'm using Lotus Domino to display document as web page.

This page uses a CSS file which has inherit or relative font-size for all the texts (p, font, td, etc...). Now there is a part of page which contains the content in the rich text field in Lotus Notes document entered by user. This part of the page should retain the font properties of the texts entered by user, like font-size and font-family. However, because of the font-size:inherit from the CSS file, the font-size of the contents entered by user is not retained.

I tried to overwrite the font-size:inherit but there is no option to retain the properties entered by user. I can't choose from the values allowed like bigger, em, px, % since any of this will still change the font-size of the content.

Do you have any idea how can retain the font-size of the content and will not based it from the CSS file? Note that it's not possible for me to not use the CSS file since some of the page contents uses it.

Upvotes: 1

Views: 1505

Answers (1)

Ken Pespisa
Ken Pespisa

Reputation: 22284

Assuming you can change the page and the CSS file, you could solve this by adding CSS classes to your elements instead of using element names as selectors (i.e. P, FONT, etc.). The output of the rich-text field won't have those CSS classes you add and thus won't be affected. For example:

<style type="text/css">
.mystyle { font-weight: bold; }
.myfooter { font-size: 0.8 em; }
</style>

<P class="mystyle">Some text</P>

<!-- My Rich Text Box -->
<P>Some text entered by user</P>
<!-- End Rich Text Box -->

<P class="myfooter">Footer text</P>

If you want to keep the element selectors, you could also just wrap everything outside of the rich text field in a div, then assign a class to that div and adjust your selectors. For example:

<style type="text/css">
#wrapper P { font-weight: bold; }
#wrapper A { text-decoration: none; }
</style>

<div id="wrapper">
    <P>Some text</P>
    <A href="www.stackoverflow.com">Stack Overflow</A>
</div>
<!-- My Rich Text Box unaffected by styles -->
<P>Some text entered by user</P>
<!-- End Rich Text Box -->

Upvotes: 1

Related Questions