hello<br />
<br />
Anyone can tell me where to look up in which browser/version layers (and maybe: what features of layers) do and do not work? I'm sure this is written down somewhere on the net, but i just can't find it.<br />
<br />
thanks a lot<br />
<br />
P.<!--content-->I don't know of any tutorials, but I can tell you from experience what features are available in what browsers as far as layers are concerned.<br />
<br />
Layers are actually a combination of <div> tags and CSS, for standards compliant browsers anyhow. Netscape 4.x implimented it using the <layer> tag, which no other browser supports. NS 4.x does support limited and very frustrating support for <div> tag layers formatted using CSS. I'll start out with the web standards way:<br />
<br />
FIGURE 1.<br />
<div id="layer1"> </div><br />
<br />
We'll start out simple, with a div tag with its id attribute set to "layer1." On your page, you can only have 1 instance of the layer1 id. Now on to CSS:<br />
<br />
FIGURE 2.<br />
<br />
<style type="text/css"><br />
<!--<br />
<br />
#layer1 {<br />
position: absolute;<br />
width: 100px;<br />
height: 300px;<br />
z-index: 1;<br />
left: 150px;<br />
top: 300px;<br />
}<br />
<br />
--><br />
</style><br />
<br />
<br />
Figure 2 shows the main style definitions for using div tag layers. You can also apply any of the other CSS properties to the tag (see <!-- m --><a class="postlink" href="http://www.w3schools.com/">http://www.w3schools.com/</a><!-- m -->).<br />
<br />
position: absolute; - Removes the div tag from the normal document flow and creates a new document flow within the div tag.<br />
<br />
width: 100px; - Sets the width of the div to 100 pixels.<br />
<br />
height: 300px; - Sets the height of the div to 300 pixels.<br />
<br />
z-index: 1; - Sets the stacking order. Lower z-indexes are stacked "lower" when displayed in a web browser. Z-index: 2; will float above a z-index of 1.<br />
<br />
left: 150px; - Puts the div (or layer if you want to call it that) 150 pixels from the left side of the browser window.<br />
<br />
right: 300px; - Puts the div 300 pixels from the top of the browser window.<br />
<br />
Browser compatibility<br />
IE 4 and newer for PC and MAC (IE4 may be a bit buggy though). NS 4.x supports positioning and z-indexing fine, but it will only make the div 100 pixels wide if it has enought content to make it 100 pixels wide. The same philosophy holds true for the height. NS 6.2 and newer work fine, as does Mozilla 1.0, and Opera 6 and 7.<br />
<br />
Netscape Navigator 4.x and the <layer> tag<br />
<br />
As a general rule, don't even bother using this tag. Only 2% of users have a browser that supports this tag (and that's being generous). Any how:<br />
<br />
FIGURE 3.<br />
<br />
<layer width="100"<br />
height="300"<br />
left="150"<br />
top="300"<br />
bgcolor="red"<br />
padding="10"<br />
><br />
Content of layer.<br />
</layer><br />
<br />
<br />
The layer tag cannot be formatted into a layer using CSS, so you must use HTML attributes instead. <layer> tags that come first in the HTML document are placed "lower" on the screen than the layer tags that come after it.<br />
<br />
FIGURE 4.<br />
<layer>Layer 1</layer><br />
<layer>Layer 2</layer><br />
<br />
<br />
The layer tags containing the text Layer 1 would be placed below the layer tags containing Layer 2, if you set the left and top attributes of each tag to the same numbers. In other words, "Layer 2" would float over top of "Layer 1."<br />
<br />
Hope this helps out.<!--content-->very much so. thanks a lot.<br />
<br />
P.<!--content-->
<br />
Anyone can tell me where to look up in which browser/version layers (and maybe: what features of layers) do and do not work? I'm sure this is written down somewhere on the net, but i just can't find it.<br />
<br />
thanks a lot<br />
<br />
P.<!--content-->I don't know of any tutorials, but I can tell you from experience what features are available in what browsers as far as layers are concerned.<br />
<br />
Layers are actually a combination of <div> tags and CSS, for standards compliant browsers anyhow. Netscape 4.x implimented it using the <layer> tag, which no other browser supports. NS 4.x does support limited and very frustrating support for <div> tag layers formatted using CSS. I'll start out with the web standards way:<br />
<br />
FIGURE 1.<br />
<div id="layer1"> </div><br />
<br />
We'll start out simple, with a div tag with its id attribute set to "layer1." On your page, you can only have 1 instance of the layer1 id. Now on to CSS:<br />
<br />
FIGURE 2.<br />
<br />
<style type="text/css"><br />
<!--<br />
<br />
#layer1 {<br />
position: absolute;<br />
width: 100px;<br />
height: 300px;<br />
z-index: 1;<br />
left: 150px;<br />
top: 300px;<br />
}<br />
<br />
--><br />
</style><br />
<br />
<br />
Figure 2 shows the main style definitions for using div tag layers. You can also apply any of the other CSS properties to the tag (see <!-- m --><a class="postlink" href="http://www.w3schools.com/">http://www.w3schools.com/</a><!-- m -->).<br />
<br />
position: absolute; - Removes the div tag from the normal document flow and creates a new document flow within the div tag.<br />
<br />
width: 100px; - Sets the width of the div to 100 pixels.<br />
<br />
height: 300px; - Sets the height of the div to 300 pixels.<br />
<br />
z-index: 1; - Sets the stacking order. Lower z-indexes are stacked "lower" when displayed in a web browser. Z-index: 2; will float above a z-index of 1.<br />
<br />
left: 150px; - Puts the div (or layer if you want to call it that) 150 pixels from the left side of the browser window.<br />
<br />
right: 300px; - Puts the div 300 pixels from the top of the browser window.<br />
<br />
Browser compatibility<br />
IE 4 and newer for PC and MAC (IE4 may be a bit buggy though). NS 4.x supports positioning and z-indexing fine, but it will only make the div 100 pixels wide if it has enought content to make it 100 pixels wide. The same philosophy holds true for the height. NS 6.2 and newer work fine, as does Mozilla 1.0, and Opera 6 and 7.<br />
<br />
Netscape Navigator 4.x and the <layer> tag<br />
<br />
As a general rule, don't even bother using this tag. Only 2% of users have a browser that supports this tag (and that's being generous). Any how:<br />
<br />
FIGURE 3.<br />
<br />
<layer width="100"<br />
height="300"<br />
left="150"<br />
top="300"<br />
bgcolor="red"<br />
padding="10"<br />
><br />
Content of layer.<br />
</layer><br />
<br />
<br />
The layer tag cannot be formatted into a layer using CSS, so you must use HTML attributes instead. <layer> tags that come first in the HTML document are placed "lower" on the screen than the layer tags that come after it.<br />
<br />
FIGURE 4.<br />
<layer>Layer 1</layer><br />
<layer>Layer 2</layer><br />
<br />
<br />
The layer tags containing the text Layer 1 would be placed below the layer tags containing Layer 2, if you set the left and top attributes of each tag to the same numbers. In other words, "Layer 2" would float over top of "Layer 1."<br />
<br />
Hope this helps out.<!--content-->very much so. thanks a lot.<br />
<br />
P.<!--content-->