Object borders in SiteSpinner are boring. They can only be a solid line of some user-defined width and a user-defined color. The truth is, there are a whole slew of border options available to you, but only if you are willing to use CSS.
This has a double-line border.
This has a red grooved border.
This has a dotted-line border.
This has a dashed-lined border.
This has mixed border styles.
Borders can also be applied to images, i-frames and shapes:
Shown below are a few examples and the CSS code used to create them. In the CSS code samples, the "OobjX" id name should be replaced with an actual object id name.
<style type="text/css">
#OobjX { border: double; }
</style>
<style type="text/css">
#OobjX { border-style: groove;
border-color: red }
</style>
<style type="text/css">
#OobjX { border-style: dotted; }
</style>
<style type="text/css">
#OobjX { border-style: dashed; }
</style>
<style type="text/css">
#OobjX { border-top-width: thin;
border-style: solid double; }
</style>
And do not forget that you can add padding to the object's CSS style code to improve it's appearance.
<style type="text/css">
#OobjX { border-style: double; }
</style>
<style type="text/css">
#OobjX { border-style: ridge; }
</style>
<style type="text/css">
#OobjX { border-style: inset;
background-color:aqua; }
</style>
div class='codebox'><style type="text/css">
#OobjX { border: double;
padding: 5px; }
</style>
Most people do not realize (or they forget) that the page itself is an HTML element - the tag. I am sure you have given a page a background color, or even a tiled background image. But you can also give it a border, with a few restrictions.
Most important is that you cannot count on the browsers to give the same results. The manner in which borders are rendered in Internet Explorer is totally different than that of FireFox. In IE, the border belongs to the browser and not your page. Also, the border is rendered around the browser's viewport (this is the visible area of the browser window). While your objects will still be displayed on the page, the border area is now reserved and acts like a frame around your page. Your page is displayed inside the bordered area much like an i-frame with scroll bars, if needed.
Firefox on the other hand, behaves differently depending if you have the page centered or not. If your page is not centered, any objects placed on your page that will be occupied by the border will be placed on top of the border. However, once you center your page, FF begins to act like IE in that the border becomes a reserved area. Objects that would have been displayed on top of the border are now moved inside the border area. FF also renders the border around its window area, which is not the same as the viewport. Borders rendered in FF have the top and left borders visible, but the bottom and right areas are off the scrollable area of the display.
An example of using a border on a page is shown below inside an i-frame. The displayed page consists of a solid background with a tiled background gradient image repeated across the top of the page. The border is created using a custom header containing the following CSS style code:
<style type="text/css">
body {
border: 25px ridge peru;
}
</style>
