OT: Using CSS for layering (was RE: web design and screen resolution)

Sat Feb 11 19:54:11 MST 2006

It looks like you may be encountering a defect in the browser at this point.  The code you have SHOULD print correctly.  That it doesn't is a sign the browser is not rendering the page correctly.

I noticed one thing from earlier.  When you placed the image in the DIV background, it viewed correctly on screen, but did not print at all.  One of the settings in most browsers is whether to print background colors and images or not.  The default in many systems is to not print these things.  In Firefox you can change this via File|Page Setup.  I wonder if you might have better results if you tried putting the image on the background again, and just set that option before print preview?
It wouldn't be ideal, but it should at least get you the option to produce what you're looking for in the face of this defect in the browser's CSS z-ordering support.

Craig White wrote:
> On Sat, 2006-02-11 at 17:32 -0700, Joseph Sinclair wrote:
> 
>>You're still placing the text as a child of the background image.  Try placing the text in a sibling div or try placing the image as a child of the text.
>>
> 
> ----
> I'm starting to feel like a moron - this looks great until I try to
> print preview it...
> 
> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
> 
> <html xmlns="http://www.w3.org/1999/xhtml">
>         <head>
>                 <meta http-equiv="content-type"
> content="text/html;charset=utf-8" />
>                 <meta name="generator" content="Adobe GoLive" />
>                 <title>Referral Note</title>
>                 <link
> href="../../../public/stylesheets/th_stylesheet.css" rel="stylesheet"
> type="text/css" media="all" />
>                 <style type="text/css" media="screen"><!--
> #section1 { height: 118px; width: 128px; left:  36px; top: 2px;
> position: absolute; visibility: visible; }
> #section2 { height: 150px; width: 634px; left: 155px; top: 2px;
> position: absolute; visibility: visible; }
> .lower-layer { z-index: 10; }
> .upper-layer { z-index: 20; background-color: transparent; }
> --></style>
>         </head>
> 
>         <body>
>                 <div id="section1" class="lower-layer"><img
> src="http://www.tobyhouse.com/images/tobyLogo_2005.gif" alt=""
> height="112" width="128" border="0" />
>                 </div>
>                 <div id="section2" class="upper-layer">
>                         <h1>REFERRAL NOTE</h1>
>                 </div>
>                         <div id="test" class="upper-layer"><p>More
> text</p>
>                 </div>
>         </body>
> </html>
> 
> 
> 
> ---------------------------------------------------
> PLUG-discuss mailing list - PLUG-discuss at lists.plug.phoenix.az.us
> To subscribe, unsubscribe, or to change  you mail settings:
> http://lists.PLUG.phoenix.az.us/mailman/listinfo/plug-discuss
> 