a webmaster learning community
     Home    Register     Search      Help      Login    
FrontPage Alternative
Sponsors

Hosting from $3.99 per month!

Shopping Cart Software
Ecommerce software integrated into Frontpage, Dreamweaver and Golive templates. No monthly fees and available in ASP and PHP versions. dd

Website Templates
We also have a wide selection of Dreamweaver, Expression Web and Frontpage templates as well as webmaster tools and CSS layouts.

Frontpage website templates
Creative Website Templates for FrontPage, Dreamweaver, Flash, SwishMax

Search Forums
 

Advanced search
Recent Posts

 Todays Posts
 Most Active posts
 Posts since last visit
 My Recent Posts
 Mark posts read

 

Does having scrollbars turned on in the content area affect print style?

 
View related threads: (in this forum | in all forums)

Logged in as: Guest
Users viewing this topic: none
Printable Version 

All Forums >> Web Development >> Cascading Style Sheets and Accessibility >> Does having scrollbars turned on in the content area affect print style? 		Page: [1]
 
gwmyers

 

Posts: 9
Joined: 5/2/2006
Status: offline

  		Does having scrollbars turned on in the content area af... - 5/10/2006 17:39:30   
My client wants to have scrollbars in the content area so you can scroll the content up and down without moving the header, sidebar and footer (like frames but have done with CSS).

Well I have done this for him but he also wants to have a print layout without all of the screen stuff showing up. Well I am doint the print in CSS as well. The problem I am having is that the content is cutting off at the bottom and I believe it is because of the scrollbars. I have tested this without the content scrollbars and it works fine.

I have attached an image of the problem. Hopefully it is clear enough for you to understand.

Has anyone had any similiar experiences with this and could suggest some fixes?



Thumbnail Image
:)

Attachment (1)
jaybee

 

Posts: 14207
Joined: 10/7/2003
From: Berkshire, UK
Status: offline

  		RE: Does having scrollbars turned on in the content are... - 5/10/2006 19:32:00   
You are doing what a lot of people do when they do this.

You are not trying to print the screen you're trying to print a print so you apply a different stylesheet . Make the content box bigger, no scrollbars and remove anything else people won't want to print, such as full colour backgrounds that empty your ink cartridge faster than you can spit.

Then you have two stylesheets applied to the page, one for screen and one for print.

Take a looky here.

_____________________________

If it ain't broke..... fix it until it is.
:)

:)
GAWDS
Now where did I put that Doctype?

(in reply to gwmyers)
rubyaim

 

Posts: 757
Joined: 6/22/2005
Status: offline

  		RE: Does having scrollbars turned on in the content are... - 5/10/2006 19:56:14   
<edit> must make note to self to check for other answers after being distracted when starting a post :) </edit>

Hi, if you have a height set for this in your screen style remove it for the print. Have you removed 'overflow:scroll' ?

Here is a basic example that might help: 
<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<title>Print Scroll</title>

<style type="text/css" media="screen">
.scrollthing {
	margin: auto;
	border:1px solid #000; display:block;
	padding:2.0em;
	width:50%;
	height:10.0em;
	overflow:scroll
	}
</style>

<style type="text/css" media="print">
.scrollthing {
	margin: auto;
	padding:0;
	}
</style>

</head>
<body>

<div class="scrollthing">
It was the man from Ironbark who struck the Sydney town,<br />
He wandered over street and park, he wandered up and down.<br />
He loitered here, he loitered there, till he was like to drop,<br />
Until at last in sheer despair he sought a barber's shop.<br />
"'Ere! shave my beard and whiskers off, I'll be a man of mark,<br />
I'll go and do the Sydney toff up home in Ironbark."<br />
<br />
The barber man was small and flash, as barbers mostly are,<br />
He wore a strike-your-fancy sash, he smoked a huge cigar;<br />
He was a humorist of note and keen at repartee,<br />
He laid the odds and kept a "tote", whatever that may be,<br />
And when he saw our friend arrive, he whispered, "Here's a lark!<br />
Just watch me catch him all alive, this man from Ironbark."<br />
<br />
There were some gilded youths that sat along the barber's wall.<br />
Their eyes were dull, their heads were flat, they had no brains at all;<br />
To them the barber passed the wink, his dexter eyelid shut,<br />
"I'll make this bloomin' yokel think his bloomin' throat is cut."<br />
And as he soaped and rubbed it in he made a rude remark:<br />
"I s'pose the flats is pretty green up there in Ironbark."<br />
It was the man from Ironbark who struck the Sydney town,<br />
He wandered over street and park, he wandered up and down.<br />
He loitered here, he loitered there, till he was like to drop,<br />
Until at last in sheer despair he sought a barber's shop.<br />
"'Ere! shave my beard and whiskers off, I'll be a man of mark,<br />
I'll go and do the Sydney toff up home in Ironbark."<br />
<br />
The barber man was small and flash, as barbers mostly are,<br />
He wore a strike-your-fancy sash, he smoked a huge cigar;<br />
He was a humorist of note and keen at repartee,<br />
He laid the odds and kept a "tote", whatever that may be,<br />
And when he saw our friend arrive, he whispered, "Here's a lark!<br />
Just watch me catch him all alive, this man from Ironbark."<br />
<br />
There were some gilded youths that sat along the barber's wall.<br />
Their eyes were dull, their heads were flat, they had no brains at all;<br />
To them the barber passed the wink, his dexter eyelid shut,<br />
"I'll make this bloomin' yokel think his bloomin' throat is cut."<br />
And as he soaped and rubbed it in he made a rude remark:<br />
"I s'pose the flats is pretty green up there in Ironbark."<br />
 </div>

</body>
</html>


_____________________________

Sally

(in reply to gwmyers)
gwmyers

 

Posts: 9
Joined: 5/2/2006
Status: offline

  		RE: Does having scrollbars turned on in the content are... - 5/11/2006 10:02:52   
I am a little confused by your "<edit>" ...but I did check the postings and didn't see anything that I thought related to my problem...anyway...I do not have the scroll in my print style. Here is the code I have for both screen and print. Maybe this will clear things up and maybe it won't...

Screen code: 


html {
	height:100%; 
	max-height:100%;
	padding:0; 
	margin:0; 
	border:0; 
	background:#fff; 
	font-size:80%; 
	font-family:"trebuchet ms", "trebuchet", "verdana", sans-serif;
	/* hide overflow:hidden from IE5/Mac */ 
	/* \*/ 
	overflow: hidden; 
	/* */ 
}

body {
	height:100%;
	max-height:100%;
	overflow:hidden;
	padding:0;
	margin:0;
	border:0;
	font: 12px/1.5 verdana, arial, helvetica, sans-serif;
	color:#333;
	scrollbar-3dlight-color:#ccffcc;
	scrollbar-arrow-color:#009966;
	scrollbar-base-color:#009966;
	scrollbar-darkshadow-color:#99CC99;
	scrollbar-face-color:#ccffcc;
	scrollbar-highlight-color:#99CC99;
	scrollbar-shadow-color:#ccffcc
}

a:active {
	font-weight: normal; 
	text-decoration: none; 
	color: #009966;
	}
	
a:link { 
	font-weight: normal; 
	text-decoration: none; 
	color: #00cc66;
	}
	
a:visited { 
	font-weight: normal; 
	text-decoration: none; 
	color: #009966;
	}
	
a:hover, a:active { 
	text-decoration: none; 
	color: #33cccc;
	}

#content {
	overflow:auto;
	position:absolute;
	z-index:-1;
	top:145px;
	bottom:135px;
	left:160px;
	right:0;
	background:#fff;
}

* html #content {
	height:100%;
 	width:95%;
  	top:0;
   	left:0;
    border-top:145px solid #fff;
    border-bottom:135px solid #fff;
    border-left:160px solid #fff;
}


#dept h2 {
	color:#009966;
	font-size:14pt;
	margin-left: 565px;

}
#title h4 {
margin-left:20px;
font-size:12pt;
color:#009966;
}

#content p {
	padding:0 10 0 10;
	color:#333;
	margin-left:10px;

}
	
#content table {
	font: 12px/1.5 verdana, arial, helvetica, sans-serif;
	padding:0 10 0 10;
	margin-left:20px;
}
/* top header banner */

#topcontainer
{
background: url('Images/AHBanner_nologo2.jpg') no-repeat top left;
width:100%;
margin:0px;
line-height:150%
}

#bannerlogo h3
{
	background: url('Images/AHIntranetLogo.gif') no-repeat top left; 
	height: 47px;
	margin-top: 30px;
	margin-left: 90px
}
#bannerlogo h3 span {
	display:none
}

#logolink
{
	height: 47px;
	margin-top: -60px;
	margin-left: 90px;
}

/* top navigatgion */

#navcontainer ul
{
	padding: 1px 0px 1px 0px;
	margin-top: 22px;
	margin-left: 0px;
	background-color: #009966;
	color: white;
	float: left;
	width: 100%;
	font: bold 9px Arial;
}

#navcontainer ul li { display: inline; }

#navcontainer ul li a {
padding: 0.5em 4em;
background-color: #009966;
color: White;
text-decoration: none;
font-size:10pt;
font-weight: bold; 
float: left;
border-right: 1px solid #009966;
}

#navcontainer ul li a:hover {
background-color: #00cc99;
color: #fff;
font-family: Arial;
font-size:10pt;
font-weight: bold; 
}

#login {
	margin-top: -140px;
	margin-left: 935px;
	color: #fff;
	font-family: Arial;
	font-size: xx-small;
	font-weight: bold; 
	letter-spacing: 1px
	}
	
#search p.s1 {
	margin-top: 95px;
	margin-left: 725px;	
	color: #fff;
	font-family: Arial;
	font-size: 10pt;
	font-weight: bold;
		}
	
#search form.s2 {
	margin-top: -40px;
	margin-left: 785px;
}

/* left navigation */

#menuSystem	{
 	position: absolute; 
 	left:0px; 
 	top: 139px; 
 	z-index: 1;
 }
 
#menuSystem table { 
	font-family:Arial; 
	font-size: 9pt; 
	border-collapse:collapse;
}

#menuSystem table	td	{
 	padding:0px; 
 }

#mainTable table { 
	border:1px 
	outset #009966; 
	border-collapse:collapse; 
}

#mainTable th {
 	background-color: #009966;
  	padding-left: 3px;
  	padding-right: 3px;
    width:150; 
    text-align:left; 
    color:#ffffff
}
#mainTable table td {
	 background-color: #ffffff;
	 padding-left: 15px;
	 padding-right: 2px;
	 text-align:left;
}

#mainTable a  { 
	color: #000000; 
	padding-left: 3px;
 	padding-right: 3px;
 	font-family: Arial;
   	font-size: 8pt;
    text-decoration: none
}
     
#mainTable a:link {
	color: #000000;
	padding-left: 3px;
	padding-right: 3px;
	font-family: Arial;
	font-size: 8pt;
	text-decoration: none
}
#mainTable a:hover {
	color: #000000;
	padding-left: 3px;
	padding-right: 3px;
	background-color:#d9fff2;
	font-family: Arial;
	font-size: 8pt;
	text-decoration: none;
	display:block; 
}


#footer {
position: absolute;
bottom: 0;
padding: 5px;
width: 96%;
color: #333333;
font-size: xx-small;
font-family:verdana, arial, helvetica, sans-serif;
}

#hline {
border-bottom: thin solid #009966;
}

#logos ul li{
list-style-type: none;
display: inline;
padding: 0.2em 2.5em;
}

#questions {
text-align: center
}
#copyright {
text-align: center
}
#internal {
text-align: center
}


Print code: 


a:active {
display:none;
	}
	
a:link { 
   color: blue;
   background: transparent;
   text-decoration: underline;
	}
	
a:visited { 
   color: blue;
   background: transparent;
   text-decoration: underline;
	}
	
a:hover, a:active { 
display:none;
	}

* html #content {
   	top:-90pt;
   	margin-left:-50pt;
   	margin-right:10pt;
	overflow:hidden;
	background:#fff;
}

#dept h2 {
	top:-150px;
	color:#009966;
	font-size:14pt;
	margin-left:0px;
}

#title h4 {
top:-120px;
margin-left:0px;
font-size:12pt;
color:#009966;
}

#content p {
	color:#000;
	margin-left:-10px;
	margin-right:0px;
	margin-bottom:0px;
	font-size:12pt;
}
	
/* top header banner */

#topcontainer 
{
display:none;
}

/* top navigatgion */

#navcontainer ul
{
display:none;
}

#navcontainer ul li { 
display:none; 
}

#navcontainer ul li a {
display:none;
}

#navcontainer ul li a:hover {
display:none;
}

#login {
display:none;
	}
	
#search p.s1 {
display:none;
		}
	
#search form.s2 {
display:none;
}

/* left navigation */

#menuSystem	{
display:none;
 }
 
#menuSystem table { 
display:none;
}

#menuSystem table	td	{
 	display:none;
 }

#mainTable table { 
display:none;
}

#mainTable th {
display:none;
}

#mainTable table td {
display:none;
}

#mainTable a  { 
	display:none;
}
     
#mainTable a:link {
display:none;
}

#mainTable a:hover {
display:none;
}


#footer {
display:none;
}

#hline {
display:none;
}

#logos ul li{
display:none;
}

#questions {
display:none;
}
#copyright {
display:none;
}
#internal {
display:none;
}

(in reply to rubyaim)
rubyaim

 

Posts: 757
Joined: 6/22/2005
Status: offline

  		RE: Does having scrollbars turned on in the content are... - 5/11/2006 20:40:35   
quote:

I am a little confused by your "<edit>"

Sorry gwmyers! That was directed ay myself as Jaybee had already answered your question with good info in between the time I started to post and actually submitted it (it took me around half an hour as I was distracted by work) :)

Re the code you posted - would you also be able to post the code for the page or post a link? I'm not much good at just looking at styles alone and have not really got anything here to replicate the problem with.

With a bit of luck someone else will be able look at your styles and have an 'Aha' moment that will help you fix the issue :)



_____________________________

Sally

(in reply to gwmyers)
gwmyers

 

Posts: 9
Joined: 5/2/2006
Status: offline

  		RE: Does having scrollbars turned on in the content are... - 5/11/2006 22:42:18   
Oh...sorry for the confusion...or rather my confusion:). My page has includes (FrontPage includes...not my favorite editor :)) for the header, left nav and footer so I will post all the code tomorrow. I am beat tonight. I didn't want to overwelm people with code...but I guess it's the only way if I am ever going to figure this thing out.

Gayle

(in reply to rubyaim)
Page:   [1]
OutFront Discoveries

All Forums >> Web Development >> Cascading Style Sheets and Accessibility >> Does having scrollbars turned on in the content area affect print style? 		Page: [1]
Jump to: 1





New Messages No New Messages
Hot Topic w/ New Messages Hot Topic w/o New Messages
Locked w/ New Messages Locked w/o New Messages
 Post New Thread
 Reply to Message
 Post New Poll
 Submit Vote
 Delete My Own Post
 Delete My Own Thread
 Rate Posts


Back to top

  Microsoft Corporation in no way endorses or is affiliated with "OutFront."
  OutFront is published and edited by Thomas Brunt.
  440 Great Circle Dr., St. Matthews, SC 29135.
  © 2009 All Rights Reserved
  Click here to view our privacy statement.