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

Sat Feb 11 20:15:33 MST 2006

On Sat, 2006-02-11 at 19:54 -0700, Joseph Sinclair wrote:
> 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.
----
Actually, I wondered that myself since I am developing the code on a
remote system that has CentOS 4 which has Firefox 1.07 so I downloaded
it back to my house BEFORE I posted it - just to verify and it does very
similar things on Firefox 1.15 and IE 6.01 on my WinXP system so that in
my mind rules out browser issue. (the same code I posted this last
time). Same thing with Firefox 1.07 on my Linux desktop too (FC-4)
-----
> 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.
-----
yeah - html printing options are kind of lousy and I can probably do
that - that's clearly not the direction I wanted to go...as you know, I
can just put in a table to contain objects where I want them to be and
be done with it...It's just a new setup and I'm trying to work out all
of the modeling before I start making dozens of print forms. 

The truth is that all the web browsers also default to putting url's,
page numbers, date & time and stuff on printouts so the page setup
options will have to be visited anyway...as far as I can tell, those
settings seem to get lost when you quit and restart Firefox.

Thanks for the great wisdom - as always - you are the best...

ps...I am trying to work through the examples in the css section of
w3.org that you pointed out in case I am missing something but it
appears that on screen is one thing and on paper is an entirely
different matter for html.

Craig

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