CSS - Printer Friendly Css Problem

what I am wanting to do is have a reverse of this so that all the areas i contain within a given <div class="printerOnly"></div> is not shown on the screen but is ready to be printed, when the print button is pressed of course. and all the other areas are not printed.

is this possible ?
Code:

<style type="text/css">
@media all {
  .page-break { display: none; }
}

@media print
{
  .page-break { display: block; page-break-befo  always; }
}

@media print {
	div.screenOnly { display: none; }
}
@media print {
	div.noborder { border-width: 0px;  border-style: none; }
}

</style>


<div class="screenOnly">
this shows on the screen
</div>

<div>this is printed</div>

Is there a way to use CSS to format printer output specifically for a sheet of paper such that page breaks can be formatted in at specific points?

Hello,

Is it possible to create a CCS stylesheet that will not only produce a printer-friendly HTML page, but create that page in the form of columns like a newsletter?

What I don't want are columns like a web page, that simply read straight down to the end of the page, giving little regard to the fact that text in column one extends to the next page before continuing to subsequent columns.

I want the text to read down from the left column to the right column, and then continue to each subsequent page, always reading from the left column to the right column--just like a newsletter.

I know I can use PDF, but I find those file huge and combersome, and would prefer to create this in HTML & CSS if possible.

I searched this board using "printer version" & columns, and when I found nothing I searched just "printer version" and found nothing. I could search just using columns, but wading through several postings about creating columns for a screen doesn't seem productive.

Thanks in advance. Angie

I have this proplem on my site where it looks perfect in IE but in Fire Fox it looks like cr@p.
http://www.bf2editor.org/

I want my CSS to look the same way on Fire Fox how can I fix this? This is my CSS doc

Code:

a:link    {color: black; text-decoration: underline}
a:visited {color: black; text-decoration: underline}
input {font-size: 12px; font-weight: bold;}



body      {
background-color: 000000; 
margin:0;
padding:0;
line-height: 1.5em;
}
hr         {color: black}

.top{

clear: left;
width: 100%;
background-image: 
url('bar2.png');
background-repeat: repeat-x
color: #FFF;
text-align: center;
font-style: arial;
font-family: arial;
}

.top2{

clear: left;
width: 100%;
background-image: 
url('bar2.png');
background-repeat: repeat-x
color: #FFF;
text-align: center;
font-style: arial;
font-family: arial;
}

.top3{

clear: left;
width: 100%;
background-image: 
url('bar2.png');
background-repeat: repeat-x
color: #FFF;
text-align: center;
font-style: arial;
font-family: arial;
margin-top: -48;
}



div#news
{
   background-color: E5E5E5;
   width: 140px;
   margin-top: 30;
   margin-left: 22;
}

div#login
{
   background-color: E5E5E5;
   width: 140px;
   margin-left: 22;
   margin-top: 2;
}

div#about
{
   background-color: #CCCCCC;
   width: 797px;
   height: 500;
   margin-top: -2;
   margin-left: 52;
}


div#who
{
   background-color: E5E5E5;
   width: 140px;
   margin-left: 22;
   margin-top: 2;
}

}

div#info
{
   background-color: 898989;
   width: 600px;
   margin-top:  1cm;
   margin-left: 4cm;
}
   div#info h2 { background: url( bar.png ); color: #ffffff; 
background-repeat: repeat-x;
}
   div#p { }


/*Page Layout*/



#maincontainer{
width: 969px; /*Width of main container*/
margin: 0 auto; /*Center container on page*/
}


#contentwrapper{
float: left;
width: 100%;
}

#contentcolumn{
margin-left: 100px; /*Set left margin to LeftColumnWidth*/
}

#leftcolumn{
float: left;
width: 160px; /*Width of left column*/
height: 836px;
margin-left: -990px; /*Set left margin to -(MainContainerWidth)*/
background: #898989;
}

.innertube{
margin: 10px; /*Margins for inner DIV inside each column (to provide padding)*/
margin-top: 0;
}

Hi All :

Currently i'm running in .NET platform together with VB.net and ASP.

I faced a problem regarding to the PAGE BREAK html tag. The problem is when i want to print out a report, it will show with scroll bar and the report is very long. So what i have to do is to apply Page-Break-After/Before into the HTML. how am i know if the report already apply the Page Break function or not? And the only style i can use is CSS. Anyone familiar with this? It's urgent !! Hope can get anyone help asap.


Regards,
JeFFery

Hey,
I think i just need someone else to look at this for me. I've been coding all day and would probably be able to figure this out if I just went to bed and did it tomorrow. If you roll over an image that's alson an anchor at www.deeperdevotion.com/wp, you'll find that it places a background-color or underline or both on it. The thing is, I can't find the code in my CSS that's causing me the trouble.

my css is located at www.deeperdevotion.com/wp/wp-content/themes/dd/styles/101106.css

Thanks.

Hello. I am new at css and web design so if these are easy problems please excuse.

First of all, the website url

http://www.onlinecasinoboss.com

In Firefox, the unordered lists <ul> in the left column do not display correctly. The left margin is way too big. I'm not sure why, please look at the page in IE to see what I want it to look like.

And in Internet Explorer, the spacing between my top image, header bar, and main page is screwy. There should be no space between the header image and header bar (the flags are in this area). Also there should only be 2px spacing between the header and the main page, however it appears there is atleast 24px there. Again please refer to the page in FF to see what I want it to look like.

I like css, and have decided to pursue my first design in css based off of the many professional designers reconmendations and reviews. But I must say it is a major headache to deal with cross-browser/platform display problems. And what professional designer wants to rely on 'css-hacks' when producing a product for a major vender.

Just beginner bitching.

Thanks for the help!

Hello everyone, I am hoping I could get some help on this.

I'm the new Marketing guy at this company. One of my duties is to fix an issue with our website which was built by the last guy to sit in this chair. I may not know how to build a proper webpage, but this guy knew exactly how not to do it and ran with just that.

So, the issue lies within this example page:
tinyurl.com/rediculouswebsite


The footer ends up under-lapping the table when viewed in IE (when not in compatibility mode) and Firefox.

I know this is a ridiculously constructed site, I just need to fix this one problem and be done with web development forever. High fives and scotch from my boss very well may ensue.

Thank you all very much.

Hey all,

I'm having this problem with some code.

as you can see, I have a wrapper div keeping everything centered. Then I have a headwrap div keeping the menu etc together and below that I want to have content. Here is the HTML

<div id="wrapper">

<div id="headwrap">
<div id="title"></div>

<div id="menuarea">
<div id="menupic"></div>

<div id="nav">
<ul>
<li id="one"><a href="#">Home</a></li>
<li id="two"><a href="#">Buy</a></li>
<li id="tre"><a href="#">Sell</a></li>
<li id="for"><a href="#">About</a></li>
<li id="fiv"><a href="#">Contact</a></li>
</ul>
</div>

</div>
</div>


<div id="content"></div>

</div>

Here is the CSS

#wrapper {
width:780px;
margin:0 auto;
text-align:left;
}

#headwrap {
width:780px;
height:auto;
margin:0px;
padding:0px;
}

#title {
float:left;
width:262px;
height:300px;
border:1px solid #97A953;
}

#menuarea {
float:right;
width:510px;
height:300px;
border:1px solid #97A953;
}

#content {
font-size:12px;
}

In IE the content div shows up below the headwrap div just fine. I can add a margin on top to drop the content down a bit without problems. BUT in FF the content div ends up enveloping the headwrap. When that happens I can't margin the top. It just ends up pushing down the headwrap div, too.

Any thoughts as to why this is happening pls?

Problem solved, thank you very much

Go to my site. Click on Pokemon.

What do I need to do to make it so the layout works on every page with every browser? Do I need to edit my .CSS file?

Hi Guys,

I need some help.

Take a look at a layout i recently coded with css and strict xhtml

http://www.invalidheart.org/my/

I'm having a problem with my coding, I don't know what I'm doing wrong, but it doesn't work properly in FireFox OR IE, the problem in firefox is the background doesn't continue with my two columns, so intead of my white background, it shows the background image, and the footer half-way through, do you see?

also, in IE, the footer is suppose to be directly at the bottom (hence, bottom:0) but, it doesn't work. But, the background works fine in IE.

Can someone help me find out the errors in my CSS coding?

here is my CSS

Code:

.hide
    {
    display: none;
    }

body
    {
    font: 11px/1.7 Garamound, Georgia, "New Century Schoolbook", "Bitstream Vera Serif", Utopia, "Times New Roman", times, serif;
    background-color: #fff;
    text-align: center;
    padding: 0;
	background: url(bg.gif);
    margin: 0;
    }
	
#container
    {
    width: 748px;
	background: #fff;
    background: url(bgfront.gif) repeat-y;
    padding-bottom: 30px;
    }
	
div#wrap {
    position: relative;
    background: url(bgfront.gif) repeat-y;
	margin:0 auto;
	text-align: left;
	width:748px;
	}

body#sectionone #menu li#one a,
body#sectiontwo #menu li#two a,
body#sectionthree #menu li#three a,
body#sectionfour #menu li#four a,
body#sectionfive #menu li#five a,
body#sectionsix #menu li#six a,
body#sectionseven #menu li#seven a
    {
    background-position: 0 -20px;
    color: #fff;
    font-weight: bold;
    }

#main {
    margin-left: 25px;
    float:left;
    width:450px;
	background: #D6E6FD;
    min-height: 550px;
	text-align: justify;
}
#sidebar {
    width:232px;
    margin-left:492px;
	background: #D6E6FD;
    min-height: 550px;
	text-align: justify;
}

#mainmiddle
	{
	width: 420px;
    padding: 3px 0 0 9px;
	}
	
#sidebarmiddle
	{
	width: 202px;
    padding: 3px 0 0 9px;
	}

#wrap > #sidebar {
	width:200px;
}
	
p
    {
    color: #555;
    margin-top: 5px;
    margin-bottom: 10px;
    }

blockquote
    {
    padding: 0 0 0 10px;
    font-style: normal;
    margin: 0 15px 0 25px;
    }

blockquote p
    {
    color: #777;
    }

h1
    {
    display: none;
    }

h2
    {
    font-size: 18px;
    line-height: 1.2;
    font-weight: normal;
    text-transform: uppercase;
    color: #666;
    margin: 18px 0;
    }

h3
    {
    font-size: 18px;
    line-height: 1.2;
    font-weight: normal;
    color: #666;
    margin: 18px 0 0 0;
    }

.caps
    {
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    }
    
ul, li
    {
    color: #666;
    list-style-type: none;
    border: 0;
    margin: 0;
    padding: 0;
    }

a:link, a:visited
    {
    color: #4B80EA;
    text-decoration: none;
    }

a:hover
    {
    color: #386DE8;
	border-bottom: 1px solid #386DE8;
    }

a:active
    {
    color: #FB7FD7;
    }

h3 a:link, h3 a:visited, h3 a:hover, h3 a:active
    {
    border: 0;
    }

#header
    {
    margin: 0 10px;
    background-image: url(header.jpg);
    height: 315px;
    width: 729px;
    }

#menu
    {
    margin-left: 25px;
    margin-right: 20px;
    }

#menu ul
    {
    border: 0;
    margin: 0;
    padding: 0;
    list-style-type: none;
    text-align: center;
    clear: left;
    }

#menu ul li
    {
    display: block;
    float: left;
    text-align: center;
    }

#menu ul li a
    {
    font: 9px/1.9em "Lucida Grande", "Trebuchet MS", "Bitstream Vera Sans", Verdana, Helvetica, sans-serif;
    background: url(navbg2.jpg) top left repeat-x;
    width: 100px;
    height: 18px;
    padding-top: 2px;
    color: #666;
    display: block;
    letter-spacing: 1px;
    text-align: center;
    text-transform: uppercase;
    font-weight: normal;
    }

html>#menu ul li a
    {
    font-size: 9px;
    }

#menu ul li a:hover
    {
    color: #000;
    background-position: 0 -60px;
    text-decoration: none;
	border: 0;
    }

#menu ul li a:active
    {
    color: #000;
    background-position: 0 -40px;
    }

#whitespace
	{
	height: 15px;
    margin-left: 25px;
	background: #fff;
    text-align: center;
	width: 700px;
	}

#copyright
    {
	position: relative;
    bottom: 0;
    width: 700px;
    font: 9px/1.8 "lucida grande", tahoma, verdana, sans-serif ;
    color: #555;
    text-align: center;
    margin-left: 25px;
    height: 18px;
    padding-top: 2px;
    background: url(navbg2.jpg) repeat-x;
    background-position: 0 0px;
    }

#copyright a:link, 
#copyright a:visited
    {
    color: #666666;
    }

#copyright a:hover,
#copyright a:active
    {
    color: #000;
    border-bottom: 1px dotted #000;
    }

Thanks so much guys for taking the time to look this over for me.

Hi, I have a div with a form in it that's not displaying properly in IE. It's meant to display a breadcrumb menu and text input on opposite sides of the screen then followed by a hr, but in IE the input displays below the menu text and interferes with the hr...

CSS:

Code:

	

#contentHeader { 
   margin-top: 2px; 
   font: 11px lucida grande, verdana, arial, sans-serif; 
   padding-top: 2px; 
   clear: all; 
} 

#pathway { 
   float: left; 
} 
#searchForm { 
   text-align:right; 
   float:right; 
   margin-right: 5px; 
} 

html:

Code:

<div id="contentHeader"> 
      <span class="pathway">Home </span>       
<div id="searchForm"><form action='index.php' method='post'><input class="inputbox" type="text" name="searchword" size="15" value="search..."  onblur="if(this.value=='') this.value='search...';" onfocus="if(this.value=='search...') this.value='';" /><input type="hidden" name="option" value="search" /></form></div> 
   </div> 
   <hr /> 

you can see what happens here - http://jmaid.org/index.php?option=c...ntpage&Itemid=1 - How can I fix this?

TIA

Hello,

I am having a bit of problem with UL code in my sidebar for my website. In Safari the two items in my list display correctly under the paragraph of text, but in most other browsers the first part of the first item, jumps up and overlays itself in the upper paragraph.

Here is my CSS code:
Code:

ul.sidebar {
  margin: 0 0 5px 0;
  padding: 5px 0 0 25px;
}

ul.sidebar li {
  font-size: 75%;
  list-style-type: circle;
}

ul.sidebar li a {
  color: black;
  list-style-type: circle;
  height: auto !important;
}

And here is its implementation on the website:
Code:

<div id="midcont">
        <!-- left body div starts here-->
        <p>Please use the contact form to the right for inquiries. Most questions are answered within 24-48 business hours. Below is our direct contact information.</p>
        <br/>
        <ul class="sidebar">
        <li><b>E-Mail:</b> xxx@xxx.com</li>
        <li><b>Phone: </b>(xxx) yyy- zzzz</li>
        </ul>
        <!-- left body div ends here-->
      </div>

Thanks in advance for all your help!

Link is he http://setupyourblog [dot] com

Hi, I am a newbie to css and have attempted to convert various webpages to css over the past few months. Although I am new to css I have been working on computers (programmer and user) for the last 13 years.

My main observation is that css is being limited by the inability or lack of interest on the part of browser developers to ensure that all pages are rendered the same in all browsers. It is very frustrating to work hard on a complicated layout only to open the page from another browser and have all your hard work look as if it has been through the spin cycle.

Of course such criticisms apply in other circles, for example different compilers handling c/c++ code is slightly different ways. For a programmer working on code to run him/herself this is not so serious since you get the code to work on the machine you want it to run on, with webpages we don't have that luxury.

Any thoughts?

R Haynes