css code preventing page from printing

Need help troubleshooting css code. Page won't print.

[katieray]

Hello everyone.

I rarely post, I mainly just read. I work for a small community college. I am having a difficult time with a website I was handed. I had no input on the design and did not create the code, yet I was the one that got handed the mess to update and maintain.

My problem is that the interior pages will not print. If you try to print it only prints the header and footer. I am convinced it is in the css code. I use css and tables and I hand code my stuff. However, I am not that experienced with it css. And for the life of me I cannot figure out why it won’t print the whole page.

I’m pretty sure that I cannot post enough information on here for someone to help me without posting the urls and css code, so I was hoping that one of you fine people might let me email you the information and css code.

I really appreciate any help you can give.

[BadBoyMcCoy]

Is the css linked using an external stylesheet?

If so one solution would be to add 'media="screen"' to the link like so:

<link rel="stylesheet" type="text/css" href="css/styles.css" media="screen" />

This should stop the printer from getting any of the css.

If you want to add css specifically to the printer, create a new stylsheet and link it like so in your header

<link rel="stylesheet" type="text/css" href="css/print.css" media="print" />

Then you can create completly new css for the printer.

Usually the way i test my print css is to load the page in a browser and do a print preview, its more enviromentally friendly than printing off a page each time. Also sometimes different browsers display the page differently, so watch out for that if your going to use print css

Also if this doesnt work feel free to ask for my email so you can send me some code or urls

[edited by: BadBoyMcCoy at 5:06 pm (utc) on Oct. 15, 2008]

[katieray]

First, thank you so much for your help! I really appreciate it!

I added the <link rel="stylesheet" type="text/css" href="/css/subpage.css" media="screen" />

And it worked, the middle section printed. However the guy who created the page put these drop down menus in it, and he said, “I had to add some code to make it work in IE7” or something like that. When the css isn’t linking right then it shows the drop down list as a bulleted list.

So on the screen it is displaying correctly, but when I go to print, it prints them out in bulleted format. All my other pages print just fine, it is just the pages that have this extra middle navigation list. Errrrrr. Lol, I really do appreciate all the help…

[BadBoyMcCoy]

One thing you could do is create a print stylesheet and create something similar to this

.extralink {display:none;}

This way when you go to print the extra links should disappear

if the extra links already have some css applied to them you could do this

div#nav ul li ul li {display:none;}

That css should remove second level list items

If you do decide to use print css remember to put the link on everypage of your site, but im sure you probably already know

Hope this helps

[edited by: BadBoyMcCoy at 12:38 pm (utc) on Oct. 16, 2008]

[katieray]

Thank you so much. I created a separate css print and then did a display none on all the div tags that I needed to eliminate. It was tedious because he had many nested tags, but it got done and I thank you from the bottom of my heart for the help!