Using external CSS files with Fusion

CSS applied to make a border - define a border style and apply with html button inside tag add class='style_name' - view source for details

The image to the left was set with a CSS style named .image, having only the border set to double and 3 px. Positioning was done by setting the cell properties to top left.

All CSS on this page was written in TopStyle®.  CoolMaps Code Tweaker component was used to remove the Fusion style and site CSS references (click view source to see the 2 blank lines where they used to be) then Ingo’s Insert It component was used to place the sniffer script in the HEAD of the page.... The CSS tags were set with the HTML button on the picture properties palette and placing class=”name_of_CSS” inside the tag

A separate IE and NN CSS file was written and is used depending on which browser the visitor has.

To fully appreciate the different CSS files being served, view this page in both Internet Explorer and Netscape 4.x   For effect, the page background is different in each browser.

 

The image on the right was set using a CSS named .imageRight. The border is inset (12px) the positioning was set with CSS using float:right.  The cell was NOT formatted...  all positioning and framing is pure CSS... This gives a picture frame effect in Internet Explorer. This tag is not supported in Netscape nor is the positioning so the border property is not in the netscape css file.

Cell borders were intentionally retained to illustrate image positioning within the cells

 

Image borders set to inset (20px) and from paragraph tab margins and indents settings of top, bottom, left and right given 25 pixels. (style name .spaceMargin)

I could not get border padding to apply to images (i.e padding the borders away from the image... works with text but not with images but does not crash the browser).


This is about all of the CSS I can get to apply to images. There is not a float=”center” available so only left and right positioning within a table can be accomplished in IE. If you examine the font sizes with IE and NN you will see that they are very close.  The Paragraph setting in the IE style sheet is set to 14px and in the NN style sheet it is set to 15px.... I have made the background and text colors different for each browser to better illustrate what can be done with independent CSS files for specific browsers...

With a little planing the same information can be presented in an almost identical format in any browser by using a browser specific css file.

View the styleIE5pc.css

View the styleNN43pc.css

View the sniffer that does this

View the tweaker.txt file

You can use this same technique to address a single external CSS file with Fusion. You will lose the WYSIWYG ability in design view unless you maintain an identical internal CSS file but if you need to call an external CSS file, such as with a department web page within a larger corporate web site that must use a master CSS file that is maintained by someone else you can "trick" Fusion into working with an external CSS file for you.