<DIV> compressing to size of child control on print (not screen) 1

[RandyBlackburn]

I have a .jpg file with a white opaque <div> overlaying the top of it. Embedded in the <div> is a smaller .jpg logo.

This works fine on the screen, but the <div> is not opaque in printing, although the embedded logo is. I can only surmise that for some reason, the <div> is compressing to the size of the embedded image when it prints.

How can I get past this problem. Someone suggested embedding a small while gif that covers the entire div, then creating another overlay div, and embedding the logo into it.

Is this the best solution? Where can I get such a gif?
why in the world would the print operate differently than the screen?

Thanks,
Randy

 

[Vragabond]

You're not seeing the effect because printing backgrounds is, by default in every browser, set to off. And the white colour on the div is a background. I cannot say what you are doing, but is there a good reason that you have an image, on top of that a white div and on top of that another image? Could you not have one image that has all of that? It would save you all this aggravation.

 

[RandyBlackburn]

Thanks for the reply.

I'm trying to cover up the top of the base image/jpg (a big incorrect logo), and replace it with a smaller logo under certain conditions.

Is there a way to set the browser to print the background?

Also, I tried that suggestion to make the gif the same size as the div, and it appears to work, but now I'm trying to understand why it's happening, and look to alternatives.

How might I "have one image that has all of that"

As I'm a newbie, any suggestion would be appreciated.

Randy

 

[Vragabond]

Read faq215-4714 on how to turn on printing backgrounds across different browsers. However, be aware that you won't be able to turn this on programmatically. Each user will have to turn it on by themselves.

As for the one image idea. Maybe I am not understanding you correctly, but you have a big image, on top of that image you have a white square that covers part of the image and in that white square you have another image. Well, if you fire up your favourite image manipulation program, open both images, put a white box over the big image and paste the little image in that area. Save the new picture and put that one in the website. Much less hassle and the same result.

 

[RandyBlackburn]

Gotcha,

thanks... you're right... it's a lot less complicated.