Microsoft Windows Vista Community Forums - Vistaheads
Recommended Download



Welcome to the Microsoft Windows Vista Community Forums - Vistaheads, YOUR Largest Resource for Windows Vista related information.

You are currently viewing our boards as a guest which gives you limited access to view most discussions and access our other features. By joining our free community you will have access to post topics, communicate privately with other members (PM), respond to polls, upload content and access many other special features. Registration is fast, simple and absolutely free so , join our community today!

If you have any problems with the registration process or your account login, please contact us.

Driver Scanner

problem with absolute position in IE8 while printing.

microsoft.public.internetexplorer.general






Speedup My PC
Reply
  #1 (permalink)  
Old 10-20-2009
Venkatesh Aralikatti
 

Posts: n/a
problem with absolute position in IE8 while printing.
When I was working with absolute position in IE8 with print, I encountered a
problem.


I have an image at the end of the page, while printing I will set an
absolute position (top 0px and left 0px) so that the image should come in as
a header. It works fine if the page content is with in 1 page. If the page
content exceeds the page then the image is getting placed in the top of 2nd
page or 3rd page depending upon the content (in terms of pages).
The absolute position is considered as last page's absolute position instead
of 1st page. This happens only while printing, while displaying it display’s
correctly.

Why is that so? Is their any alternate solution to this?

The absolute position works fine with IE6 while displaying as well as while
printing.
Reply With Quote
Sponsored Links
  #2 (permalink)  
Old 10-20-2009
rob^_^
 

Posts: n/a
Re: problem with absolute position in IE8 while printing.
Media@Print

And when you disable your media=Print stylesheet? (alternatively test by
choosing View>Style>No Style menu)

How many external stylesheets do you have (max 31 in IE). Don't forget to
add the appropriate media values. You can test your Print stylesheets by
only specifying a media of Screen I/o Print.

Is you page free of markup and layout errors for your chosen doctype.

Regards.

"Venkatesh Aralikatti" <Venkatesh Aralikatti@discussions.microsoft.com>
wrote in message news:8B2E4D2F-8E6F-44AF-AB3E-05D8F8ED68DC@microsoft.com...
> When I was working with absolute position in IE8 with print, I encountered
> a
> problem.
>
>
> I have an image at the end of the page, while printing I will set an
> absolute position (top 0px and left 0px) so that the image should come in
> as
> a header. It works fine if the page content is with in 1 page. If the page
> content exceeds the page then the image is getting placed in the top of
> 2nd
> page or 3rd page depending upon the content (in terms of pages).
> The absolute position is considered as last page's absolute position
> instead
> of 1st page. This happens only while printing, while displaying it display’s
> correctly.
>
> Why is that so? Is their any alternate solution to this?
>
> The absolute position works fine with IE6 while displaying as well as
> while
> printing.
>

Reply With Quote
  #3 (permalink)  
Old 10-21-2009
Venkatesh Aralikatti
 

Posts: n/a
Re: problem with absolute position in IE8 while printing.
Hi rob,

I have simple page having some content and then the image tag is added to
the bottom of the page like the one mentioned below:

<img class="print" id="siteLogoPrint"
alt="PrintTesting" src="logo.gif" width="488" height="102" />

The CSS tag used

img#siteLogoPrint.print {
position: absolute;
top:0px;
left:0px;
display: block;
}

This css will be invoked when you give a print command.

I am not using any external css files and it is also free from of markup and
layout errors as well.

This code works well with all other browsers, but it is not working in IE 8.

Please let me know where I am going wrong.

Even if you go throguh the description for absolute it should always points
to starting of the page, it does while displaying but not while printing
(while printing it is pointing to last page top).

Regards

"rob^_^" wrote:

> Media@Print
>
> And when you disable your media=Print stylesheet? (alternatively test by
> choosing View>Style>No Style menu)
>
> How many external stylesheets do you have (max 31 in IE). Don't forget to
> add the appropriate media values. You can test your Print stylesheets by
> only specifying a media of Screen I/o Print.
>
> Is you page free of markup and layout errors for your chosen doctype.
>
> Regards.
>
> "Venkatesh Aralikatti" <Venkatesh Aralikatti@discussions.microsoft.com>
> wrote in message news:8B2E4D2F-8E6F-44AF-AB3E-05D8F8ED68DC@microsoft.com...
> > When I was working with absolute position in IE8 with print, I encountered
> > a
> > problem.
> >
> >
> > I have an image at the end of the page, while printing I will set an
> > absolute position (top 0px and left 0px) so that the image should come in
> > as
> > a header. It works fine if the page content is with in 1 page. If the page
> > content exceeds the page then the image is getting placed in the top of
> > 2nd
> > page or 3rd page depending upon the content (in terms of pages).
> > The absolute position is considered as last page's absolute position
> > instead
> > of 1st page. This happens only while printing, while displaying it display’s
> > correctly.
> >
> > Why is that so? Is their any alternate solution to this?
> >
> > The absolute position works fine with IE6 while displaying as well as
> > while
> > printing.
> >

Reply With Quote
  #4 (permalink)  
Old 10-21-2009
rob^_^
 

Posts: n/a
Re: problem with absolute position in IE8 while printing.
Hi,

Here is a code snippet that I use to absolutely position an <img> tag (viz,
wrap it in a absolutely positioned div) (tested in all current browsers).

<body scroll="no" style="overflow:hidden; background-color:#000000;
padding:0px 0px;margin:0px 0px"
onload="document.getElementById('WLSearchBoxInput' ).focus();">
<!-- Bing -->
<div id="WLSearchBoxDiv" style="position:absolute; right:5px; z-index:99">
<table cellpadding="0" cellspacing="0" style="width:300px; height:32px;"><tr
id="WLSearchBoxPlaceholder"><td style="width:100%; border:solid 1px #cccccc;
border-right-style:none; padding-left:10px; padding-right:10px;
vertical-align:middle;">
<input id="WLSearchBoxInput" accesskey="e" type="text"
value="&#x4c;&#x6f;&#x61;&#x64;&#x69;&#x6e;&#x67;& #x2e;&#x2e;&#x2e;"
style="background-image:url(http://www.bing.com/siteowner/s/site...ground_k.png);
background-position:right; background-repeat:no-repeat; font-family:Arial;
font-size:14px; color:#000000; width:100%; border:none 0 transparent;"
onfocus="this.select();"/></td>
<td style="border:solid 1px #cccccc; border-left-style:none;
padding-left:0px; padding-right:3px;"><input id="WLSearchBoxButton"
type="image"
src="http://www.bing.com/siteowner/s/siteowner/searchbutton_normal_k.gif"
style="border:none 0 transparent; height:24px; width:24px;
vertical-align:top;"/></td></tr></table>
<script type="text/javascript" charset="utf-8">
var slocale = navigator.browserLanguage;
var WLSearchBoxConfiguration =
{
"global": {
"serverDNS": "www.bing.com",
"market": slocale
},
"appearance": {
"autoHideTopControl": true,
"width": 800,
"height": 600,
"theme": "Blue"
},
"scopes": [
{
"type": "web",
"caption": "&#x57;&#x65;&#x62;",
"searchParam": ""
}
]
}
</script>
<script type="text/javascript" charset="utf-8"
src="http://www.bing.com/bootstrap.js?market=en-AU&ServId=SearchBox&ServId=SearchBoxWeb&Callback=W LSearchBoxScriptReady"></script>
</div>
<!-- Bing -->
<div id="bg_image" style="position:absolute; top:0px; left:0px; height:100%;
width:100%">
<img alt="" id="imgPhoto" style="WIDTH: 100%; HEIGHT: 100%"
src="AyersRock.jpg"/>
</div>

Although I like to use a hidden div and an external (media=print) stylesheet
to print out copyright information on each page of the print-out.


Regards.

"Venkatesh Aralikatti" <VenkateshAralikatti@discussions.microsoft.com> wrote
in message news:A2B035DA-2FEB-4677-9734-DCC5C9AA57D0@microsoft.com...
> Hi rob,
>
> I have simple page having some content and then the image tag is added to
> the bottom of the page like the one mentioned below:
>
> <img class="print" id="siteLogoPrint"
> alt="PrintTesting" src="logo.gif" width="488" height="102" />
>
> The CSS tag used
>
> img#siteLogoPrint.print {
> position: absolute;
> top:0px;
> left:0px;
> display: block;
> }
>
> This css will be invoked when you give a print command.
>
> I am not using any external css files and it is also free from of markup
> and
> layout errors as well.
>
> This code works well with all other browsers, but it is not working in IE
> 8.
>
> Please let me know where I am going wrong.
>
> Even if you go throguh the description for absolute it should always
> points
> to starting of the page, it does while displaying but not while printing
> (while printing it is pointing to last page top).
>
> Regards
>
> "rob^_^" wrote:
>
>> Media@Print
>>
>> And when you disable your media=Print stylesheet? (alternatively test by
>> choosing View>Style>No Style menu)
>>
>> How many external stylesheets do you have (max 31 in IE). Don't forget to
>> add the appropriate media values. You can test your Print stylesheets by
>> only specifying a media of Screen I/o Print.
>>
>> Is you page free of markup and layout errors for your chosen doctype.
>>
>> Regards.
>>
>> "Venkatesh Aralikatti" <Venkatesh Aralikatti@discussions.microsoft.com>
>> wrote in message
>> news:8B2E4D2F-8E6F-44AF-AB3E-05D8F8ED68DC@microsoft.com...
>> > When I was working with absolute position in IE8 with print, I
>> > encountered
>> > a
>> > problem.
>> >
>> >
>> > I have an image at the end of the page, while printing I will set an
>> > absolute position (top 0px and left 0px) so that the image should come
>> > in
>> > as
>> > a header. It works fine if the page content is with in 1 page. If the
>> > page
>> > content exceeds the page then the image is getting placed in the top of
>> > 2nd
>> > page or 3rd page depending upon the content (in terms of pages).
>> > The absolute position is considered as last page's absolute position
>> > instead
>> > of 1st page. This happens only while printing, while displaying it
>> > display’s
>> > correctly.
>> >
>> > Why is that so? Is their any alternate solution to this?
>> >
>> > The absolute position works fine with IE6 while displaying as well as
>> > while
>> > printing.
>> >

Reply With Quote
  #5 (permalink)  
Old 10-21-2009
Venkatesh Aralikatti
 

Posts: n/a
Re: problem with absolute position in IE8 while printing.
Hi Rob,

Thanks for the code snippet

I was using the following doc type, after removing this doc path now I am
able to see the correct behaviour of the browser

<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

But when I hide the div tag inititally and try to unhide while printing is
not working (for any browser). Becz my requirement is not to show the image
in the page but the image should come in print out. So I am using the
following code to unhide, while printing but the image is not getting
dispalyed in print out.

<style type="text/css" media="print">

div.bg_image {
position:absolute;
top:0px;
left:0px;
display:block;
}
</style>

Here the position is working fine but display:block is not showing the image.

Why is that so ? Is their any specific doctype i need to specify for this?
becz if you add the above doc type the hide and unhide works well but the
image is getting displaying in the last page.

Regards

"rob^_^" wrote:

> Hi,
>
> Here is a code snippet that I use to absolutely position an <img> tag (viz,
> wrap it in a absolutely positioned div) (tested in all current browsers).
>
> <body scroll="no" style="overflow:hidden; background-color:#000000;
> padding:0px 0px;margin:0px 0px"
> onload="document.getElementById('WLSearchBoxInput' ).focus();">
> <!-- Bing -->
> <div id="WLSearchBoxDiv" style="position:absolute; right:5px; z-index:99">
> <table cellpadding="0" cellspacing="0" style="width:300px; height:32px;"><tr
> id="WLSearchBoxPlaceholder"><td style="width:100%; border:solid 1px #cccccc;
> border-right-style:none; padding-left:10px; padding-right:10px;
> vertical-align:middle;">
> <input id="WLSearchBoxInput" accesskey="e" type="text"
> value="Loading..."
> style="background-image:url(http://www.bing.com/siteowner/s/site...ground_k.png);
> background-position:right; background-repeat:no-repeat; font-family:Arial;
> font-size:14px; color:#000000; width:100%; border:none 0 transparent;"
> onfocus="this.select();"/></td>
> <td style="border:solid 1px #cccccc; border-left-style:none;
> padding-left:0px; padding-right:3px;"><input id="WLSearchBoxButton"
> type="image"
> src="http://www.bing.com/siteowner/s/siteowner/searchbutton_normal_k.gif"
> style="border:none 0 transparent; height:24px; width:24px;
> vertical-align:top;"/></td></tr></table>
> <script type="text/javascript" charset="utf-8">
> var slocale = navigator.browserLanguage;
> var WLSearchBoxConfiguration =
> {
> "global": {
> "serverDNS": "www.bing.com",
> "market": slocale
> },
> "appearance": {
> "autoHideTopControl": true,
> "width": 800,
> "height": 600,
> "theme": "Blue"
> },
> "scopes": [
> {
> "type": "web",
> "caption": "Web",
> "searchParam": ""
> }
> ]
> }
> </script>
> <script type="text/javascript" charset="utf-8"
> src="http://www.bing.com/bootstrap.js?market=en-AU&ServId=SearchBox&ServId=SearchBoxWeb&Callback=W LSearchBoxScriptReady"></script>
> </div>
> <!-- Bing -->
> <div id="bg_image" style="position:absolute; top:0px; left:0px; height:100%;
> width:100%">
> <img alt="" id="imgPhoto" style="WIDTH: 100%; HEIGHT: 100%"
> src="AyersRock.jpg"/>
> </div>
>
> Although I like to use a hidden div and an external (media=print) stylesheet
> to print out copyright information on each page of the print-out.
>
>
> Regards.
>
> "Venkatesh Aralikatti" <VenkateshAralikatti@discussions.microsoft.com> wrote
> in message news:A2B035DA-2FEB-4677-9734-DCC5C9AA57D0@microsoft.com...
> > Hi rob,
> >
> > I have simple page having some content and then the image tag is added to
> > the bottom of the page like the one mentioned below:
> >
> > <img class="print" id="siteLogoPrint"
> > alt="PrintTesting" src="logo.gif" width="488" height="102" />
> >
> > The CSS tag used
> >
> > img#siteLogoPrint.print {
> > position: absolute;
> > top:0px;
> > left:0px;
> > display: block;
> > }
> >
> > This css will be invoked when you give a print command.
> >
> > I am not using any external css files and it is also free from of markup
> > and
> > layout errors as well.
> >
> > This code works well with all other browsers, but it is not working in IE
> > 8.
> >
> > Please let me know where I am going wrong.
> >
> > Even if you go throguh the description for absolute it should always
> > points
> > to starting of the page, it does while displaying but not while printing
> > (while printing it is pointing to last page top).
> >
> > Regards
> >
> > "rob^_^" wrote:
> >
> >> Media@Print
> >>
> >> And when you disable your media=Print stylesheet? (alternatively test by
> >> choosing View>Style>No Style menu)
> >>
> >> How many external stylesheets do you have (max 31 in IE). Don't forget to
> >> add the appropriate media values. You can test your Print stylesheets by
> >> only specifying a media of Screen I/o Print.
> >>
> >> Is you page free of markup and layout errors for your chosen doctype.
> >>
> >> Regards.
> >>
> >> "Venkatesh Aralikatti" <Venkatesh Aralikatti@discussions.microsoft.com>
> >> wrote in message
> >> news:8B2E4D2F-8E6F-44AF-AB3E-05D8F8ED68DC@microsoft.com...
> >> > When I was working with absolute position in IE8 with print, I
> >> > encountered
> >> > a
> >> > problem.
> >> >
> >> >
> >> > I have an image at the end of the page, while printing I will set an
> >> > absolute position (top 0px and left 0px) so that the image should come
> >> > in
> >> > as
> >> > a header. It works fine if the page content is with in 1 page. If the
> >> > page
> >> > content exceeds the page then the image is getting placed in the top of
> >> > 2nd
> >> > page or 3rd page depending upon the content (in terms of pages).
> >> > The absolute position is considered as last page's absolute position
> >> > instead
> >> > of 1st page. This happens only while printing, while displaying it
> >> > display’s
> >> > correctly.
> >> >
> >> > Why is that so? Is their any alternate solution to this?
> >> >
> >> > The absolute position works fine with IE6 while displaying as well as
> >> > while
> >> > printing.
> >> >

Reply With Quote
  #6 (permalink)  
Old 10-21-2009
C A Upsdell
 

Posts: n/a
Re: problem with absolute position in IE8 while printing.
Venkatesh Aralikatti wrote:
> I was using the following doc type, after removing this doc path now I am
> able to see the correct behaviour of the browser
>
> <!DOCTYPE html PUBLIC
> "-//W3C//DTD XHTML 1.0 Transitional//EN"
> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
>


Removing the path makes the browser process the page in quirks mode,
i.e. as IE has traditionally processed pages, instead of in accordance
with the standards. If the problem goes away when you remove the path,
this suggests that your problem is caused by broken code, i.e. code
which violates the standards.

What happens if you run the page through the W3C validators when you
have the path in the DOCTYPE?
Reply With Quote
  #7 (permalink)  
Old 10-22-2009
rob^_^
 

Posts: n/a
Re: problem with absolute position in IE8 while printing.
Hi Venkatesh,

As Chuck says - always validate your markup. (Press F12 to display the
Developer tool, select the Validate>HTML menu, also note the Document Mode
and Browser Mode as displayed on the Developer tool).

This is how I do it. (except I use external stylesheets and Master Pages
(VS.net and Expression Web) for maintainability)

<html>
<head>
<title>Title</title>
<style type="text/css" media="Print">
#divCopyright
{display:block; visibility:visible}
</style>
</head>
<body>
<div id="divContent">
</div>
<div id="divCopyright" style="display:none; visibility:hidden">
This is the copyright notice. Bugger off from my code and content.
</div>
</body>
</html>

(Hungarian notation used for ease of understanding and maintainability)


"Venkatesh Aralikatti" <VenkateshAralikatti@discussions.microsoft.com> wrote
in message news:3438E1E6-C937-4177-97B8-4F98C3C535A4@microsoft.com...
> Hi Rob,
>
> Thanks for the code snippet
>
> I was using the following doc type, after removing this doc path now I am
> able to see the correct behaviour of the browser
>
> <!DOCTYPE html PUBLIC
> "-//W3C//DTD XHTML 1.0 Transitional//EN"
> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
>
> But when I hide the div tag inititally and try to unhide while printing is
> not working (for any browser). Becz my requirement is not to show the
> image
> in the page but the image should come in print out. So I am using the
> following code to unhide, while printing but the image is not getting
> dispalyed in print out.
>
> <style type="text/css" media="print">
>
> div.bg_image {
> position:absolute;
> top:0px;
> left:0px;
> display:block;
> }
> </style>
>
> Here the position is working fine but display:block is not showing the
> image.
>
> Why is that so ? Is their any specific doctype i need to specify for this?
> becz if you add the above doc type the hide and unhide works well but the
> image is getting displaying in the last page.
>
> Regards
>
> "rob^_^" wrote:
>
>> Hi,
>>
>> Here is a code snippet that I use to absolutely position an <img> tag
>> (viz,
>> wrap it in a absolutely positioned div) (tested in all current browsers).
>>
>> <body scroll="no" style="overflow:hidden; background-color:#000000;
>> padding:0px 0px;margin:0px 0px"
>> onload="document.getElementById('WLSearchBoxInput' ).focus();">
>> <!-- Bing -->
>> <div id="WLSearchBoxDiv" style="position:absolute; right:5px;
>> z-index:99">
>> <table cellpadding="0" cellspacing="0" style="width:300px;
>> height:32px;"><tr
>> id="WLSearchBoxPlaceholder"><td style="width:100%; border:solid 1px
>> #cccccc;
>> border-right-style:none; padding-left:10px; padding-right:10px;
>> vertical-align:middle;">
>> <input id="WLSearchBoxInput" accesskey="e" type="text"
>> value="Loading..."
>> style="background-image:url(http://www.bing.com/siteowner/s/site...ground_k.png);
>> background-position:right; background-repeat:no-repeat;
>> font-family:Arial;
>> font-size:14px; color:#000000; width:100%; border:none 0 transparent;"
>> onfocus="this.select();"/></td>
>> <td style="border:solid 1px #cccccc; border-left-style:none;
>> padding-left:0px; padding-right:3px;"><input id="WLSearchBoxButton"
>> type="image"
>> src="http://www.bing.com/siteowner/s/siteowner/searchbutton_normal_k.gif"
>> style="border:none 0 transparent; height:24px; width:24px;
>> vertical-align:top;"/></td></tr></table>
>> <script type="text/javascript" charset="utf-8">
>> var slocale = navigator.browserLanguage;
>> var WLSearchBoxConfiguration =
>> {
>> "global": {
>> "serverDNS": "www.bing.com",
>> "market": slocale
>> },
>> "appearance": {
>> "autoHideTopControl": true,
>> "width": 800,
>> "height": 600,
>> "theme": "Blue"
>> },
>> "scopes": [
>> {
>> "type": "web",
>> "caption": "Web",
>> "searchParam": ""
>> }
>> ]
>> }
>> </script>
>> <script type="text/javascript" charset="utf-8"
>> src="http://www.bing.com/bootstrap.js?market=en-AU&ServId=SearchBox&ServId=SearchBoxWeb&Callback=W LSearchBoxScriptReady"></script>
>> </div>
>> <!-- Bing -->
>> <div id="bg_image" style="position:absolute; top:0px; left:0px;
>> height:100%;
>> width:100%">
>> <img alt="" id="imgPhoto" style="WIDTH: 100%; HEIGHT: 100%"
>> src="AyersRock.jpg"/>
>> </div>
>>
>> Although I like to use a hidden div and an external (media=print)
>> stylesheet
>> to print out copyright information on each page of the print-out.
>>
>>
>> Regards.
>>
>> "Venkatesh Aralikatti" <VenkateshAralikatti@discussions.microsoft.com>
>> wrote
>> in message news:A2B035DA-2FEB-4677-9734-DCC5C9AA57D0@microsoft.com...
>> > Hi rob,
>> >
>> > I have simple page having some content and then the image tag is added
>> > to
>> > the bottom of the page like the one mentioned below:
>> >
>> > <img class="print" id="siteLogoPrint"
>> > alt="PrintTesting" src="logo.gif" width="488" height="102" />
>> >
>> > The CSS tag used
>> >
>> > img#siteLogoPrint.print {
>> > position: absolute;
>> > top:0px;
>> > left:0px;
>> > display: block;
>> > }
>> >
>> > This css will be invoked when you give a print command.
>> >
>> > I am not using any external css files and it is also free from of
>> > markup
>> > and
>> > layout errors as well.
>> >
>> > This code works well with all other browsers, but it is not working in
>> > IE
>> > 8.
>> >
>> > Please let me know where I am going wrong.
>> >
>> > Even if you go throguh the description for absolute it should always
>> > points
>> > to starting of the page, it does while displaying but not while
>> > printing
>> > (while printing it is pointing to last page top).
>> >
>> > Regards
>> >
>> > "rob^_^" wrote:
>> >
>> >> Media@Print
>> >>
>> >> And when you disable your media=Print stylesheet? (alternatively test
>> >> by
>> >> choosing View>Style>No Style menu)
>> >>
>> >> How many external stylesheets do you have (max 31 in IE). Don't forget
>> >> to
>> >> add the appropriate media values. You can test your Print stylesheets
>> >> by
>> >> only specifying a media of Screen I/o Print.
>> >>
>> >> Is you page free of markup and layout errors for your chosen doctype.
>> >>
>> >> Regards.
>> >>
>> >> "Venkatesh Aralikatti" <Venkatesh
>> >> Aralikatti@discussions.microsoft.com>
>> >> wrote in message
>> >> news:8B2E4D2F-8E6F-44AF-AB3E-05D8F8ED68DC@microsoft.com...
>> >> > When I was working with absolute position in IE8 with print, I
>> >> > encountered
>> >> > a
>> >> > problem.
>> >> >
>> >> >
>> >> > I have an image at the end of the page, while printing I will set an
>> >> > absolute position (top 0px and left 0px) so that the image should
>> >> > come
>> >> > in
>> >> > as
>> >> > a header. It works fine if the page content is with in 1 page. If
>> >> > the
>> >> > page
>> >> > content exceeds the page then the image is getting placed in the top
>> >> > of
>> >> > 2nd
>> >> > page or 3rd page depending upon the content (in terms of pages).
>> >> > The absolute position is considered as last page's absolute position
>> >> > instead
>> >> > of 1st page. This happens only while printing, while displaying it
>> >> > display’s
>> >> > correctly.
>> >> >
>> >> > Why is that so? Is their any alternate solution to this?
>> >> >
>> >> > The absolute position works fine with IE6 while displaying as well
>> >> > as
>> >> > while
>> >> > printing.
>> >> >

Reply With Quote
  #8 (permalink)  
Old 10-22-2009
rob^_^
 

Posts: n/a
Re: problem with absolute position in IE8 while printing.
Hi,

Just for interest..... you can use the same technique to ensure that your
page Ads (G adsence) appear on your printed page. (New Scientist Magazine,
April 2009 - Printed Ads make a bigger impact).

Regards.

"Venkatesh Aralikatti" <VenkateshAralikatti@discussions.microsoft.com> wrote
in message news:3438E1E6-C937-4177-97B8-4F98C3C535A4@microsoft.com...
> Hi Rob,
>
> Thanks for the code snippet
>
> I was using the following doc type, after removing this doc path now I am
> able to see the correct behaviour of the browser
>
> <!DOCTYPE html PUBLIC
> "-//W3C//DTD XHTML 1.0 Transitional//EN"
> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
>
> But when I hide the div tag inititally and try to unhide while printing is
> not working (for any browser). Becz my requirement is not to show the
> image
> in the page but the image should come in print out. So I am using the
> following code to unhide, while printing but the image is not getting
> dispalyed in print out.
>
> <style type="text/css" media="print">
>
> div.bg_image {
> position:absolute;
> top:0px;
> left:0px;
> display:block;
> }
> </style>
>
> Here the position is working fine but display:block is not showing the
> image.
>
> Why is that so ? Is their any specific doctype i need to specify for this?
> becz if you add the above doc type the hide and unhide works well but the
> image is getting displaying in the last page.
>
> Regards
>
> "rob^_^" wrote:
>
>> Hi,
>>
>> Here is a code snippet that I use to absolutely position an <img> tag
>> (viz,
>> wrap it in a absolutely positioned div) (tested in all current browsers).
>>
>> <body scroll="no" style="overflow:hidden; background-color:#000000;
>> padding:0px 0px;margin:0px 0px"
>> onload="document.getElementById('WLSearchBoxInput' ).focus();">
>> <!-- Bing -->
>> <div id="WLSearchBoxDiv" style="position:absolute; right:5px;
>> z-index:99">
>> <table cellpadding="0" cellspacing="0" style="width:300px;
>> height:32px;"><tr
>> id="WLSearchBoxPlaceholder"><td style="width:100%; border:solid 1px
>> #cccccc;
>> border-right-style:none; padding-left:10px; padding-right:10px;
>> vertical-align:middle;">
>> <input id="WLSearchBoxInput" accesskey="e" type="text"
>> value="Loading..."
>> style="background-image:url(http://www.bing.com/siteowner/s/site...ground_k.png);
>> background-position:right; background-repeat:no-repeat;
>> font-family:Arial;
>> font-size:14px; color:#000000; width:100%; border:none 0 transparent;"
>> onfocus="this.select();"/></td>
>> <td style="border:solid 1px #cccccc; border-left-style:none;
>> padding-left:0px; padding-right:3px;"><input id="WLSearchBoxButton"
>> type="image"
>> src="http://www.bing.com/siteowner/s/siteowner/searchbutton_normal_k.gif"
>> style="border:none 0 transparent; height:24px; width:24px;
>> vertical-align:top;"/></td></tr></table>
>> <script type="text/javascript" charset="utf-8">
>> var slocale = navigator.browserLanguage;
>> var WLSearchBoxConfiguration =
>> {
>> "global": {
>> "serverDNS": "www.bing.com",
>> "market": slocale
>> },
>> "appearance": {
>> "autoHideTopControl": true,
>> "width": 800,
>> "height": 600,
>> "theme": "Blue"
>> },
>> "scopes": [
>> {
>> "type": "web",
>> "caption": "Web",
>> "searchParam": ""
>> }
>> ]
>> }
>> </script>
>> <script type="text/javascript" charset="utf-8"
>> src="http://www.bing.com/bootstrap.js?market=en-AU&ServId=SearchBox&ServId=SearchBoxWeb&Callback=W LSearchBoxScriptReady"></script>
>> </div>
>> <!-- Bing -->
>> <div id="bg_image" style="position:absolute; top:0px; left:0px;
>> height:100%;
>> width:100%">
>> <img alt="" id="imgPhoto" style="WIDTH: 100%; HEIGHT: 100%"
>> src="AyersRock.jpg"/>
>> </div>
>>
>> Although I like to use a hidden div and an external (media=print)
>> stylesheet
>> to print out copyright information on each page of the print-out.
>>
>>
>> Regards.
>>
>> "Venkatesh Aralikatti" <VenkateshAralikatti@discussions.microsoft.com>
>> wrote
>> in message news:A2B035DA-2FEB-4677-9734-DCC5C9AA57D0@microsoft.com...
>> > Hi rob,
>> >
>> > I have simple page having some content and then the image tag is added
>> > to
>> > the bottom of the page like the one mentioned below:
>> >
>> > <img class="print" id="siteLogoPrint"
>> > alt="PrintTesting" src="logo.gif" width="488" height="102" />
>> >
>> > The CSS tag used
>> >
>> > img#siteLogoPrint.print {
>> > position: absolute;
>> > top:0px;
>> > left:0px;
>> > display: block;
>> > }
>> >
>> > This css will be invoked when you give a print command.
>> >
>> > I am not using any external css files and it is also free from of
>> > markup
>> > and
>> > layout errors as well.
>> >
>> > This code works well with all other browsers, but it is not working in
>> > IE
>> > 8.
>> >
>> > Please let me know where I am going wrong.
>> >
>> > Even if you go throguh the description for absolute it should always
>> > points
>> > to starting of the page, it does while displaying but not while
>> > printing
>> > (while printing it is pointing to last page top).
>> >
>> > Regards
>> >
>> > "rob^_^" wrote:
>> >
>> >> Media@Print
>> >>
>> >> And when you disable your media=Print stylesheet? (alternatively test
>> >> by
>> >> choosing View>Style>No Style menu)
>> >>
>> >> How many external stylesheets do you have (max 31 in IE). Don't forget
>> >> to
>> >> add the appropriate media values. You can test your Print stylesheets
>> >> by
>> >> only specifying a media of Screen I/o Print.
>> >>
>> >> Is you page free of markup and layout errors for your chosen doctype.
>> >>
>> >> Regards.
>> >>
>> >> "Venkatesh Aralikatti" <Venkatesh
>> >> Aralikatti@discussions.microsoft.com>
>> >> wrote in message
>> >> news:8B2E4D2F-8E6F-44AF-AB3E-05D8F8ED68DC@microsoft.com...
>> >> > When I was working with absolute position in IE8 with print, I
>> >> > encountered
>> >> > a
>> >> > problem.
>> >> >
>> >> >
>> >> > I have an image at the end of the page, while printing I will set an
>> >> > absolute position (top 0px and left 0px) so that the image should
>> >> > come
>> >> > in
>> >> > as
>> >> > a header. It works fine if the page content is with in 1 page. If
>> >> > the
>> >> > page
>> >> > content exceeds the page then the image is getting placed in the top
>> >> > of
>> >> > 2nd
>> >> > page or 3rd page depending upon the content (in terms of pages).
>> >> > The absolute position is considered as last page's absolute position
>> >> > instead
>> >> > of 1st page. This happens only while printing, while displaying it
>> >> > display’s
>> >> > correctly.
>> >> >
>> >> > Why is that so? Is their any alternate solution to this?
>> >> >
>> >> > The absolute position works fine with IE6 while displaying as well
>> >> > as
>> >> > while
>> >> > printing.
>> >> >

Reply With Quote
  #9 (permalink)  
Old 10-22-2009
Venkatesh Aralikatti
 

Posts: n/a
Re: problem with absolute position in IE8 while printing.
Hi,

When tested my page with DOCTYPE added with the W3C validator (Through
http://validator.w3.org/), the result was passed.
No error/warning found.

But image is getting printed on last page of the print out instead of
printing in first page.

If I remove the DOCTYPE then the image is getting printed on first page
(as desired).
This behavior is in IE8 only.


Regards


"C A Upsdell" <""cupsdell"@nospam@upsdel" wrote:

> Venkatesh Aralikatti wrote:
> > I was using the following doc type, after removing this doc path now I am
> > able to see the correct behaviour of the browser
> >
> > <!DOCTYPE html PUBLIC
> > "-//W3C//DTD XHTML 1.0 Transitional//EN"
> > "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
> >

>
> Removing the path makes the browser process the page in quirks mode,
> i.e. as IE has traditionally processed pages, instead of in accordance
> with the standards. If the problem goes away when you remove the path,
> this suggests that your problem is caused by broken code, i.e. code
> which violates the standards.
>
> What happens if you run the page through the W3C validators when you
> have the path in the DOCTYPE?
> .
>

Reply With Quote
  #10 (permalink)  
Old 10-26-2009
Venkatesh Aralikatti
 

Posts: n/a
Re: problem with absolute position in IE8 while printing.
Hi Rob,

When tested my page with DOCTYPE added with the W3C validator (Through
http://validator.w3.org/), the result was passed.
No error/warning found.

But image is getting printed on last page of the print out instead of
printing in first page.

If I remove the DOCTYPE then the image is getting printed on first page
(as desired).
This behavior is in IE8 only. Do I need to apply any other doc type ?


Regards


"rob^_^" wrote:

> Hi Venkatesh,
>
> As Chuck says - always validate your markup. (Press F12 to display the
> Developer tool, select the Validate>HTML menu, also note the Document Mode
> and Browser Mode as displayed on the Developer tool).
>
> This is how I do it. (except I use external stylesheets and Master Pages
> (VS.net and Expression Web) for maintainability)
>
> <html>
> <head>
> <title>Title</title>
> <style type="text/css" media="Print">
> #divCopyright
> {display:block; visibility:visible}
> </style>
> </head>
> <body>
> <div id="divContent">
> </div>
> <div id="divCopyright" style="display:none; visibility:hidden">
> This is the copyright notice. Bugger off from my code and content.
> </div>
> </body>
> </html>
>
> (Hungarian notation used for ease of understanding and maintainability)
>
>
> "Venkatesh Aralikatti" <VenkateshAralikatti@discussions.microsoft.com> wrote
> in message news:3438E1E6-C937-4177-97B8-4F98C3C535A4@microsoft.com...
> > Hi Rob,
> >
> > Thanks for the code snippet
> >
> > I was using the following doc type, after removing this doc path now I am
> > able to see the correct behaviour of the browser
> >
> > <!DOCTYPE html PUBLIC
> > "-//W3C//DTD XHTML 1.0 Transitional//EN"
> > "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
> >
> > But when I hide the div tag inititally and try to unhide while printing is
> > not working (for any browser). Becz my requirement is not to show the
> > image
> > in the page but the image should come in print out. So I am using the
> > following code to unhide, while printing but the image is not getting
> > dispalyed in print out.
> >
> > <style type="text/css" media="print">
> >
> > div.bg_image {
> > position:absolute;
> > top:0px;
> > left:0px;
> > display:block;
> > }
> > </style>
> >
> > Here the position is working fine but display:block is not showing the
> > image.
> >
> > Why is that so ? Is their any specific doctype i need to specify for this?
> > becz if you add the above doc type the hide and unhide works well but the
> > image is getting displaying in the last page.
> >
> > Regards
> >
> > "rob^_^" wrote:
> >
> >> Hi,
> >>
> >> Here is a code snippet that I use to absolutely position an <img> tag
> >> (viz,
> >> wrap it in a absolutely positioned div) (tested in all current browsers).
> >>
> >> <body scroll="no" style="overflow:hidden; background-color:#000000;
> >> padding:0px 0px;margin:0px 0px"
> >> onload="document.getElementById('WLSearchBoxInput' ).focus();">
> >> <!-- Bing -->
> >> <div id="WLSearchBoxDiv" style="position:absolute; right:5px;
> >> z-index:99">
> >> <table cellpadding="0" cellspacing="0" style="width:300px;
> >> height:32px;"><tr
> >> id="WLSearchBoxPlaceholder"><td style="width:100%; border:solid 1px
> >> #cccccc;
> >> border-right-style:none; padding-left:10px; padding-right:10px;
> >> vertical-align:middle;">
> >> <input id="WLSearchBoxInput" accesskey="e" type="text"
> >> value="Loading..."
> >> style="background-image:url(http://www.bing.com/siteowner/s/site...ground_k.png);
> >> background-position:right; background-repeat:no-repeat;
> >> font-family:Arial;
> >> font-size:14px; color:#000000; width:100%; border:none 0 transparent;"
> >> onfocus="this.select();"/></td>
> >> <td style="border:solid 1px #cccccc; border-left-style:none;
> >> padding-left:0px; padding-right:3px;"><input id="WLSearchBoxButton"
> >> type="image"
> >> src="http://www.bing.com/siteowner/s/siteowner/searchbutton_normal_k.gif"
> >> style="border:none 0 transparent; height:24px; width:24px;
> >> vertical-align:top;"/></td></tr></table>
> >> <script type="text/javascript" charset="utf-8">
> >> var slocale = navigator.browserLanguage;
> >> var WLSearchBoxConfiguration =
> >> {
> >> "global": {
> >> "serverDNS": "www.bing.com",
> >> "market": slocale
> >> },
> >> "appearance": {
> >> "autoHideTopControl": true,
> >> "width": 800,
> >> "height": 600,
> >> "theme": "Blue"
> >> },
> >> "scopes": [
> >> {
> >> "type": "web",
> >> "caption": "Web",
> >> "searchParam": ""
> >> }
> >> ]
> >> }
> >> </script>
> >> <script type="text/javascript" charset="utf-8"
> >> src="http://www.bing.com/bootstrap.js?market=en-AU&ServId=SearchBox&ServId=SearchBoxWeb&Callback=W LSearchBoxScriptReady"></script>
> >> </div>
> >> <!-- Bing -->
> >> <div id="bg_image" style="position:absolute; top:0px; left:0px;
> >> height:100%;
> >> width:100%">
> >> <img alt="" id="imgPhoto" style="WIDTH: 100%; HEIGHT: 100%"
> >> src="AyersRock.jpg"/>
> >> </div>
> >>
> >> Although I like to use a hidden div and an external (media=print)
> >> stylesheet
> >> to print out copyright information on each page of the print-out.
> >>
> >>
> >> Regards.
> >>
> >> "Venkatesh Aralikatti" <VenkateshAralikatti@discussions.microsoft.com>
> >> wrote
> >> in message news:A2B035DA-2FEB-4677-9734-DCC5C9AA57D0@microsoft.com...
> >> > Hi rob,
> >> >
> >> > I have simple page having some content and then the image tag is added
> >> > to
> >> > the bottom of the page like the one mentioned below:
> >> >
> >> > <img class="print" id="siteLogoPrint"
> >> > alt="PrintTesting" src="logo.gif" width="488" height="102" />
> >> >
> >> > The CSS tag used
> >> >
> >> > img#siteLogoPrint.print {
> >> > position: absolute;
> >> > top:0px;
> >> > left:0px;
> >> > display: block;
> >> > }
> >> >
> >> > This css will be invoked when you give a print command.
> >> >
> >> > I am not using any external css files and it is also free from of
> >> > markup
> >> > and
> >> > layout errors as well.
> >> >
> >> > This code works well with all other browsers, but it is not working in
> >> > IE
> >> > 8.
> >> >
> >> > Please let me know where I am going wrong.
> >> >
> >> > Even if you go throguh the description for absolute it should always
> >> > points
> >> > to starting of the page, it does while displaying but not while
> >> > printing
> >> > (while printing it is pointing to last page top).
> >> >
> >> > Regards
> >> >
> >> > "rob^_^" wrote:
> >> >
> >> >> Media@Print
> >> >>
> >> >> And when you disable your media=Print stylesheet? (alternatively test
> >> >> by
> >> >> choosing View>Style>No Style menu)
> >> >>
> >> >> How many external stylesheets do you have (max 31 in IE). Don't forget
> >> >> to
> >> >> add the appropriate media values. You can test your Print stylesheets
> >> >> by
> >> >> only specifying a media of Screen I/o Print.
> >> >>
> >> >> Is you page free of markup and layout errors for your chosen doctype.
> >> >>
> >> >> Regards.
> >> >>
> >> >> "Venkatesh Aralikatti" <Venkatesh
> >> >> Aralikatti@discussions.microsoft.com>
> >> >> wrote in message
> >> >> news:8B2E4D2F-8E6F-44AF-AB3E-05D8F8ED68DC@microsoft.com...
> >> >> > When I was working with absolute position in IE8 with print, I
> >> >> > encountered
> >> >> > a
> >> >> > problem.
> >> >> >
> >> >> >
> >> >> > I have an image at the end of the page, while printing I will set an
> >> >> > absolute position (top 0px and left 0px) so that the image should
> >> >> > come
> >> >> > in
> >> >> > as
> >> >> > a header. It works fine if the page content is with in 1 page. If
> >> >> > the
> >> >> > page
> >> >> > content exceeds the page then the image is getting placed in the top
> >> >> > of
> >> >> > 2nd
> >> >> > page or 3rd page depending upon the content (in terms of pages).
> >> >> > The absolute position is considered as last page's absolute position
> >> >> > instead
> >> >> > of 1st page. This happens only while printing, while displaying it
> >> >> > display’s
> >> >> > correctly.
> >> >> >
> >> >> > Why is that so? Is their any alternate solution to this?
> >> >> >
> >> >> > The absolute position works fine with IE6 while displaying as well
> >> >> > as
> >> >> > while
> >> >> > printing.
> >> >> >

Reply With Quote
Reply


Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

vB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off

Similar Threads
Thread Thread Starter Forum Replies Last Post
IE6 Sp2 printing problem JacquesT microsoft.public.internetexplorer.general 4 01-15-2009 21:28
IE 7 printing problem kickboxer microsoft.public.internetexplorer.general 3 12-05-2008 02:00
Printing problem MrKite microsoft.public.windows.vista.print fax scan 0 11-25-2008 17:12
CSS position: absolute does not work properly in IE 7 PO'd about IE 7 microsoft.public.internetexplorer.general 3 09-27-2008 14:05
Printing Problem jjham microsoft.public.windows.vista.mail 2 09-25-2008 05:55




All times are GMT +1. The time now is 19:10.




Driver Scanner - Free Scan Now

Vistaheads.com is part of the Heads Network. See also XPHeads.com , Win7Heads.com and Win8Heads.com.


Design by Vjacheslav Trushkin for phpBBStyles.com.
Powered by vBulletin® Version 3.6.7
Copyright ©2000 - 2014, Jelsoft Enterprises Ltd.
Search Engine Optimization by vBSEO 3.6.0 RC 2

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120