www.webdeveloper.com
Results 1 to 3 of 3

Thread: layers /browsers

  1. #1
    Join Date
    Dec 2002
    Location
    Berlin
    Posts
    68

    layers /browsers

    hello

    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.

    thanks a lot

    P.

  2. #2
    Join Date
    Feb 2003
    Location
    Michigan, USA
    Posts
    5,774
    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.

    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:

    FIGURE 1.
    <div id="layer1">&amp;nbsp;</div>


    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:

    FIGURE 2.
    Code:
    <style type="text/css">
    <!--
    
    #layer1 {
     position: absolute;
     width: 100px;
     height: 300px;
     z-index: 1;
     left: 150px;
     top: 300px;
    }
    
    -->
    </style>
    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 http://www.w3schools.com/).

    position: absolute; - Removes the div tag from the normal document flow and creates a new document flow within the div tag.

    width: 100px; - Sets the width of the div to 100 pixels.

    height: 300px; - Sets the height of the div to 300 pixels.

    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.

    left: 150px; - Puts the div (or layer if you want to call it that) 150 pixels from the left side of the browser window.

    right: 300px; - Puts the div 300 pixels from the top of the browser window.

    Browser compatibility
    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.

    Netscape Navigator 4.x and the <layer> tag

    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:

    FIGURE 3.
    Code:
    <layer width="100"
           height="300"
           left="150"
           top="300"
           bgcolor="red"
           padding="10"
    >
    Content of layer.
    </layer>
    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.

    FIGURE 4.
    <layer>Layer 1</layer>
    <layer>Layer 2</layer>


    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."

    Hope this helps out.

  3. #3
    Join Date
    Dec 2002
    Location
    Berlin
    Posts
    68
    very much so. thanks a lot.

    P.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles