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

[Craig White]

On Sat, 2006-02-11 at 22:22 -0700, Joseph Sinclair wrote:
> 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.
----
No - you misunderstood...I didn't want text over the graphic at all.

I simply want it inline with the graphic but I want to control it and
not let the vague handling of html allow the text to jump around. That
is why I was going for the <div> tags and obviously a table allows me to
have two side by side cells

-------------------------------------------------------------------
|                    |                                            |
|                    |                                            |
|                    |                                            |
| picture here       |       text would go here                   |
|                    |                                            |
|                    |                                            |
|                    |                                            |
-------------------------------------------------------------------

It's simple to do and inline is the default but I can't have these
things bouncing around since it is their logo and the header of the
page. I wanted absolute positioning for the logo to the left and the
text to the center of the page.

As you can see, I can have a table lock things into place and the issue
I have to deal with is that the 'text' really isn't in the center of the
page itself, but rather in the center of the table which is an entirely
different thing but for now, it will work.

Thanks

Craig