Layers (DIV) in Internet Explorer, print problem

  • Thread starter Thread starter zz
  • Start date Start date
Z

zz

Sorry for posting this here but unfortunatly I couldn't find any appropriate
newsgroup for this and since I've been active here with .net question I
figured you guys might be able to help.


This is a link to a very simple page that contains 2 DIV statements:
http://xsinx.no-ip.com:8880/TestEmbedDiv.html

One of them is embeded in the other. There is some clipping involved (the
red layer is smaller than the yellow one). If you look at the print preview
in Internet Explorer 6, you can see the red layer but not the yellow one.
It's just a very basic example to demonstrate a problem we have.

Our "real" project involves generating web pages with multiple objects (ex:
images, videos, etc) which are each contained in their own layer which are
in turn all included in one big layer which controls clipping of those
objects. Needless to say, when we use print preview in our project, nothing
appears, we only get blank pages (the clipping layer is empty, except for
the other DIVs).

Anyone knows a work around to this problem, or can confirm it's a bug?

Any comment/suggestion is welcomed at this point, I'm lost.

Thanks,

Alex.
 
Not sure exactly why this is happening - i'm sure someone else will though.
However , if you constrain the size of the outer div to the size of a
printed page , everything works fine.
You could move the style into a css and specify different (smaller )
dimensions for the printed style.
 
Thanks,

Do you have more info on that css method? We managed to fix part of our
problem by changing the clipping method (not sure exactly how, something
about not using overflow:off and something else instead -- I'm just relaying
questions here as the developper working on this isn't too fluent in
english).

The other problem we are having right now is that when we print, part of the
output is cut off.. ie: we only see about 750 pixels worth of the actual
site. Is there a way to specify X/Y origins for printing, or to scale
printing in any way?

Funny how we have none of these problems in FireFox :|

BTW if there is any forum more appropriate for these questions, please refer
me to them as I haven't found any.

Thanks again

Alex.
 
if you put your style info into .css style sheets or even inline styles, you
can override style setting that are used for print formatting by using the
media attribute.
try this for a quick example.

<HTML>
<head>

<!--
<link rel="stylesheet" type="text/css" href="browser.css">
<link rel="stylesheet" type="text/css" href="printer.css" media="print">
-->

<style>
div {
position:absolute;
overflow:hidden;
background-color:#ff0000;
left: 300px;
top: 100px;
width: 400px;
height:1200px;
}
.div2 {
background-color:#ffff00;
left: 20px;
top: 20px;
}
</style>

<style media='print'>
.div1 {
left: 10px;
top: 10px;
height:500px;
}
</style>

</head>
<body>
<DIV class="div1">
<DIV class="div2">
allo2
</DIV>
allo
</DIV>
</body>
</HTML>
 
Hi again Gerry... Check end of message for a code example. Our project
involves placing objects and having events hide/show them as well as move
them around in some cases. In the example bellow, you can see we assign a X
to the object. Apparently, this resets the print position... Do you have any
idea how we can avoid this?

(the commented line moves the object, uncomment it to see the problem)

Thanks,

Alex.


<HTML>
<head>

<!--
<link rel="stylesheet" type="text/css" href="browser.css">
<link rel="stylesheet" type="text/css" href="printer.css" media="print">
-->

<style>
div {
position:absolute;
overflow:hidden;
left: 300;
top: 100;
width: 800;
height:1000;
}
</style>

<style media='print'>
.divprint {
left: 0;
top: 0;
height:100%;
width:100%;
}
</style>
</head>

<body>
<DIV id="mainpanel" class="divprint" STYLE="background-color:#ff0000;">
<DIV STYLE="background-color:#ffff00; left=20; top=50; width: 1000;
height:1200;">
allo2
</DIV>
allo
</DIV>
</body>

<script>
var obj=eval("mainpanel");
//obj.style.left=400;
</script>
</HTML>
 
Back
Top