API
@-Formulas
JavaScript
LotusScript
Reg Exp
Web Design
Notes Client
XPages
 
Run Java Agent In 3 Environments
Custom Search Page
Adding Dojo Date/Time Pickers In Traditional Web Development
View of Todays Documents
Sizing File Upload Controls
Accessibility Compliant Menus (Updated)
Use Different Style Sheets In Notes And Web
Accessibility Compliant Drop Down Menus
Identifying The Selected Radio Button
What Makes A Good Password?
XHTML and Firefox
UL Styles In Firefox And IE
Followup: Hiding Totals In Categorized Web View
Hiding Totals In Categorized Web View
Show View To Browsers In Multiple Columns
Making Nice Table Borders On Both Notes And Browser
R6 Update: Allow users to click on twisty or category title
Different Text Direction
Profile Document Warning
HTML Escape Characters
Popup Help on Input Fields
Saving Screen Space When Using Checkbox Fields
Agents: Run As Web User vs. Signer
Using A Base Href
Showing Single Category - Warning
Providing field help inside the field (IE only)
Allow users to click on twisty or category title
Web Color codes
Prevent Pages From Caching
Decode URL
Protect your $$ Templates from unautorized use
Prevent browser users from snooping around your database
Change View Twisty Icons
Alternate Row Colors In Web View
Open a view to a specific document
Mulit-value fields with a browser
Target another frame in @URLOpen
Use Different Style Sheets In Notes And Web
More and more we at Breaking Par are using style sheets in the Notes client. Although the CSS implementation in the Notes client isn't the greatest (at least through Notes 6.5) it is pretty good and you have lots of options. But the web certainly has more options. Instead of trying to combine all the information into one style sheet, sometimes we have a separate style sheet for the Notes client and the web browser. But how is that done?

Obviously, if you have different forms for the Notes client and web browser, no discussion is needed - just include the right style sheet on the right form. So this tip is applicable only if you are using one form for both the Notes client and the web browser. And given the Notes client's ability to now recognize JavaScript (as of R5) and pass through HTML (as of R6), more often than not we use one form for both environments. (That's drastically different than earlier releases where we would have one form for Notes and one for web because the same capabilities didn't exist in both environments).

If you want to include a different style sheet resource for the Notes client and web browser on the same form, it's pretty easy once you understand how things work. Keep in mind that items on hidden paragraphs are never sent to the web browser. So if you have a style sheet resource on a line that is hidden from the web browser, then the HTML for including the style sheet resource is not sent to the web browser. But a style sheet resource on the form, no matter if the line is hidden or not, is always brought in to the Notes client. So if you put a style sheet resource on a line that is hidden, that resource will be used in the Notes client but not the web browser.

Conversely, the HTML Head section is only used in web browsers - that section is not used on the Notes client no matter what. If you edit the HTML Head section and right-click in the formula pane, you can choose "Insert Resource" and insert a style sheet resource. It will be included as a <LINK> tag in the <HEAD> section of the web page that is generated. Since the HTML Head section is not used in the Notes client, that style sheet resource is used only in the web browser.

So, there you go. If you want to use one form but different style sheets, put the web-only style sheet resource in the HTML Head section, and the Notes-only style sheet resource on a hidden line on the form.