css functions differently between Notes Client and Web Browser

Question

I have the following in a resource css and applied to an XPage:

.wfsHeader     {background:rgb(230,230,230) ; font-size:12pt; font-weight:bold;}
.wfsHeaderLite {background:rgb(240,240,240) ; font-size:10pt; font-weight:bold;}
.separator  {height:1px ; background:rgb(230,230,230);}
.SeperatorLite {height:1px ; background:rgb(240,240,240);}
.separator2  {height:2px ; background:rgb(192,192,192);}
.label      {font-size: 8pt; font-weight:bold ;}
.label10     {font-weight:bold;font-size:10pt ;}

When the XPage is viewed in a browser the wfsHeader and wfsHeaderLite and sperator all display as expected. However, when viewed in a Notes client the seperator works correctly (displays a 1 px grey line but the wfsHeader and wfsHeaderLite have no effect. I can't see any real difference between the markup for the seperator and the wfsHeader other than one is expressed in height and the other in font size. They are all applied to individual panels or table cells. I was under the impression that the css should work the same between the Notes Client and the Web Browser. very confused as to why the seperator works in both but the wfsHeader only works in the web browser.

Answer 1

XPiNC is based on Mozilla XULRunner which can behave differently than your favorite browser. XULRunner was upgraded to newer version in Notes 9.0.1 so you might want to try that.

Answer 2

Try your CSS in a Firefox browser. If it looks fine there, it should look fine in Notes-Client, too.

Use the Firefox developer tools (STRG+I) to check which CSS rule applies to which element.

Answer 3

The XULRunner Component is subject to caching of HTTP Ressources that provide an appropriate HTTP Header for that. So it MIGHT be a cache issue by not refetching the CSS file after you have altered it. You have two options: closen Notes and Designer to quit all vbelonging processes and restart. Then the cache gets it in most cases an a refetch is done. But Because this is extremely cumbersome you might also use the "Clear private Data" Option of the XPinc Browser Refresh Button (use the small down arrow beside it to make use of this option)