[Webinar] Streamline your web hosting managementRegister Today

x
?
Solved

Print Style Sheet - Not all content from jquery tabs is showing up

Posted on 2010-03-28
6
Medium Priority
?
331 Views
Last Modified: 2012-05-09
I have tabs set up using jquery and am using display:inline-block !important; to override the inline element display:none.  This does work, but instead of getting a page break when the content reaches the end of the page it just doesn't show up. Well at least not in firefox.  It shows up in safari, and in ie I get a scrollbar, but still not all the content.  

I've tried page break, overflow and a number of other things, but I'm just not having any success pinpointing the problem.

To view the site live go to: http://www.massagecenters.webbdemo.com/services

Thanks for the help!
Jules
0
Comment
Question by:Jules Webb
  • 3
  • 3
6 Comments
 
LVL 22

Accepted Solution

by:
remorina earned 2000 total points
ID: 28950518
Hi JulesWebb,

Try adding the below css class to the end of your print.css
#bd {overflow:visible;padding:0;}

Open in new window

0
 
LVL 2

Author Comment

by:Jules Webb
ID: 28953145
Thanks remorina

That did help, but there is still content missing on page 2 of the print preview.  I checked some of the other pages that use the tabs and they all seem to have the same problem.  Can you please take another look for me?

Thanks!
Jules
0
 
LVL 22

Expert Comment

by:remorina
ID: 28955654
Hi JulesWebb,
Unfortunately I'm unabvle to track it further on my PC since I don't have an offline version for the site and one saved locally isn't complete and looks like it misses some other css files or scripts.

You can follow my method in tracking what's causing this and it wouldn't take you minutes to figure out what's causing it.

I start disabling the css files being loaded, like styles.css, and check the print, if everything is fine then there is a class in styles.css not being reversed in print.css
Then I start deleting chunks of css lines and check which part is affecting the desired area then narrow it down till I get hold of the single class that when removed it would be working fine.
Then finally you can reverse the properties of this class in the print.css.
This was exactly what I've done to get you the above solution.

Hope this helps you tracking it down.
0
Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

 
LVL 2

Author Comment

by:Jules Webb
ID: 28958325
Thanks for the tip! I tracked it down immediately:-)  All I needed to do was add margin:0; to the css you initially suggested.

Cheers!
jules
0
 
LVL 2

Author Closing Comment

by:Jules Webb
ID: 31708222
Thanks for your help!
0
 
LVL 22

Expert Comment

by:remorina
ID: 28959378
Great, so it was more useful than just fixing the issue ;)

Best of luck
Remon
0

Featured Post

Receive 1:1 tech help

Solve your biggest tech problems alongside global tech experts with 1:1 help.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

When writing CSS, there are a few simple rules that will make your life easier.    1. Using ‘* {box-sizing:border-box;}’. Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …
CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
Suggested Courses
Course of the Month8 days, 13 hours left to enroll

613 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question