CSS - How To Make Printer Friendly Version

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;
}

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?

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>

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

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

Could someone tell me what the last standard is for css?

Thanks for taking time to read my question.

I have IE6 and IE7 on 2 different PC's. My IE6 version is 6.0.2900.2180.xpsp_sp2_qfe.070227-2300 and my IE7 version is 7.0.5730.11

I have IE7 on a third PC and it's version is 7.0.5730.13

My friend has IE7 version 7.0.5730.11 and when he looks at my web page he gets a vert scrollbar on the white content area. When I use my IE7, either version, I don't!

Another friend has IE6 version 6.0.2900.2180.xpsp_sp2_qfe.070227-2254 When she looks at my page, and mouses over the "What's New" button it goes to 2 lines of text, but when I mouse over it in my IE6 "What's New" stays on one line.

Where do these differences come from? How can I make my site work regardless of version of IE? This is getting quite stupid, now IE6 doesn't act the same as other IE6's and same with 7's!!!

Thanks again for your help.

Brad

Site: http://www.scopicdesigns.com/ZoneAll/index.htm

hi everyone,

i designed my first site with dremaweaver 3 but had problems with browser compatability. people have been telling me i should use css now as it's better so which version of dreamweaver should i be using now? thank you

Odd problem here...If I type my website address in the address bar and precede it with the "www" (ex: www . mydomain . com), the CSS is not being applied, however, if I omit the www, CSS works fine.

This is only a problem in FireFox 3.5.2. Any ideas whatsoever?

My website is http://www.orchard-homes.co.uk/developments/ and ive noticed in some versions of safari (on a mac) a big white block covers the whole of the navigation, it only affects the 4 pages under the "Developments => Current =>" section and hovering over the word "developments" makes it disappear again.

Its driving me crazy how it works in every other browser fine, anyone have any ideas?

Thanks!

Hi all,

After the latest update of Safari, my Web site has gone all Wonky in the layout. The problem occurs in table cells where there is both a field and some text.

If I put a <b> bold tag on some text in the row or even a <span> with special style attributes like plain text, the text jumps up and becomes almost a superscript and the rest of the text remains at the baseline of the text input fields in the row. I uploaded a picture, not sure how to link it into the posting though.

The forms on our site are old, 7+ years, so have been beautifully laid out until this latest Safari release.

It used to only be IE that messed up formatting with each release. This is the first Safari release I have seen do this.

Can anyone else confirm similar issues?

My web page use some CSS syntax to control the color of hyperlinks, they are listed as below:

Code:

.row1 {
	background: #e7f6fe;
	/*background: #e1f4ff;*/
}
.row1 td{
    padding: 4px;
    border-bottom: 1px solid #c3c3c3;
    font-size: 12px;
    font-family: "Arial", "Helvetica", "sans-serif";
}
.row1 a:visited {
	color: blue;
	text-decoration: none;
}

--------------
My problem is, whatever the version of IE or other browsers, some users encountered the situation that when they clicked the hyperlink, the link becomes blue, but after closing the browser and restart IE again, some users will see the link color STILL IN BLUE, while some will see the link AS A NEW LINK WITH BLACK color again.

My boss asks for the reason of this difference, in addition, he wants all users will see the link as new link again after they restart the IE.

-------------
In my point of view, I think we can't set anything using program, javascript or css, it SHOULD BE DEPENDED on browser setting.

Can anyone provide me some answers about this questions? Thx.

Hi...

Can any body tell me how to make effect mentioned below.

http://forums.devshed.com/archive/t-175080

Basically i am a designer, and i am new to programming. When the above mentioned page will open, there are links in blue color i.e "Firewall", "Backup", "internet", "Viruses", "VPN", etc etc.

I need this type of effect for my web site, can any body tell me how to make this....

Thanks

Can someone show the the CSS to make the unordered list to the right of the picture display the same way in IE as it does in FF?

HERE is my link.

Many thank yous from the CSS noob.

Hi,

I'm working on redeveloping my site using CSS (learning CSS as I go), and for the most part it's fine. I'm having a bit of a problem getting my footer (containing links to Terms & Conditions, copyright notice, etc.) to display at the bottom of the page.

I have a div called MainSection as follows :

#MainSection {
position: absolute;
border: 1px solid #000033;
top: 100px;
left: 1px;
width: 777px;
z-index: 0;
}

Within that, I have 3 divs - WhereYouAre, LeftPanel and MainBodyContent, as follows:

.WhereYouAre {
position: absolute;
width: 500px;
top: 8px;
left: 205px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 12px;
text-decoration: none;
color: #000033;
}

#LeftPanel {
position:absolute;
top: 3px;
left: 3px;
width: 190px;
border: 1px solid #000033;
}

#MainBodyContent {
position: absolute;
border: 1px solid #000033;
padding: 0px 5px 5px 5px;
top: 5px;
left: 200px;
width: 567px;
z-index: 0;
}

Then at the bottom, after the closing </div> for the MainSection, I have my div called BottomNav:

#BottomNav{
position:inherit;
margin:10px;
border-top: 1px solid #000033;
border-bottom: 1px solid #000033;
width: 780px;
left: 0px;
}

The BottomNav keeps appearing at the top of thepage instead of at the bottom - I've tried different values (inherit / relative, etc) to see can I get something to work, but no good so far... and I can't set the positon to absolute as the location of the BottomNav depends on the length of the MainSection.

Thanks a lot for any suggestions,
J.