OT: Using CSS for layering (was RE: web
design and screen resolution)
Joseph Sinclair
plug-discuss at stcaz.net
Sat Feb 11 22:22:11 MST 2006
Craig White wrote:
> 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)
> -----
----
Actually, the fact that all the browsers do it doesn't make it not a defect, it makes it a common defect. The CSS spec says that the formatting should work the same on page and screen if possible. Since it's almost certainly both possible and not difficult, I would say the behavior you see is a defect.
That said, the fact that the defect is present certainly doesn't help your situation.
----
>
>>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.
----
How would using tables enable you to put text on top of an image. In my experience anything that works with tables works just as well with CSS layout, in almost all cases. I'd be interested to see a simple example where table layout creates the effect on page and screen that you're looking for.
----
>
> 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.
----
The screen and page are definitely different, there are even some styles that only apply to print media. That might, BTW, help you find what you're looking for, since you could probably set the screen and print layouts a bit differently using media types.
Another solution might be to use SVG for the graphic, have the SVG place text on top of the raster image, then include the SVG in the HTML via an object tag. That would be another way to composite the information the way you want.
----
>
> 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>
>>>
>>>
More information about the PLUG-discuss
mailing list