Solved

@media in JSP page

Posted on 2006-07-08
9
595 Views
Last Modified: 2010-05-18
I’m trying to use CSS to apply printer-friendly feature for different pages in my web sit but the problem is when I apply that CSS by using @media or <link element and media=”print” attribute; it seems like that changes are applying directly to my web page not only on printer-friendly page for example if I put this line
<div align="right" ><a href="javascript:Clickheretoprint()" id="TopLayer"> Click here to print</a>    </div>
in my jsp page the line will never appear in my page itself :(

Notice: I have this id in CSS
#TopLayer
{
display:none;
}

Any help please?
0
Comment
Question by:ocmara
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 2
9 Comments
 
LVL 4

Expert Comment

by:Meritor
ID: 17064762
you made display:none; how can you except that it would appear in your page.

0
 
LVL 3

Expert Comment

by:mdg12
ID: 17066879
Meritor -- If you specify a medium for a section of CSS, those styles will only apply to the specified medium...  So the css within a "printer" section does not apply to the browser version

Are you sure there are no other non-print css tags that are causing the link to be hidden?   If you include the entire source I can help debug.

There are 4 ways to specify the media...  
1) For inline styles
<style type="text/css" media="print">
#toplayer {
...
}
</style>

2) With an external css file
<link type="text/css" rel="stylesheet" href="style.css" media="print" />

3) With an external css file (my preference over #2)
<style type="text/css" media="print">
@import 'style.css';
</style>

4) within a non-media-specific style set, that has a section for printable attributes
<style type="text/css">
#toplayer {
/*common attributes*/
}
@media print {
    #toplayer {
        display:none;
    }
}
</style>


Hope this helps!
0
 

Author Comment

by:ocmara
ID: 17067216
It still applies every thinks in print media section over web page still. That happen with all deferent way of specifies the print media.
I worked with WDK component, any advice!!!
0
Online Training Solution

Drastically shorten your training time with WalkMe's advanced online training solution that Guides your trainees to action. Forget about retraining and skyrocket knowledge retention rates.

 
LVL 3

Expert Comment

by:mdg12
ID: 17067860
Can you give a link to the actual page, or more source code so we can see what is going wrong?
0
 

Author Comment

by:ocmara
ID: 17070713
in JSP page there is

<html>
<head><dmf:webform/></head>

<body>

<table align='center'>
    <div align="right" ><a href="javascript:self.print()" id="toplayer"> Click here to print</a>    </div>
   <tr><td align=left class='SHeading'>Print Friendly</td></tr>
</table>
</body>
</html>
 
And in a separated XML file I point to that CSS and it work fine regardless to print media. FYI:I use component approach.
0
 
LVL 3

Accepted Solution

by:
mdg12 earned 100 total points
ID: 17072150
One problem is that you should never put a <div> directly inside a <table>..  You can move it outside the table, or put it inside a <td>

Try this:
<html>
<head><dmf:webform/></head>
<body>
<div align="right" ><a href="javascript:self.print()" id="toplayer"> Click here to print</a>    </div>
<table align='center'>
   <tr><td align=left class='SHeading'>Print Friendly</td></tr>
</table>
</body>
</html>
0

Featured Post

Secure Your WordPress Site: 5 Essential Approaches

WordPress is the web's most popular CMS, but its dominance also makes it a target for attackers. Our eBook will show you how to:

Prevent costly exploits of core and plugin vulnerabilities
Repel automated attacks
Lock down your dashboard, secure your code, and protect your users

Question has a verified solution.

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

Get to know the ins and outs of building a web-based ERP system for your enterprise. Development timeline, technology, and costs outlined.
When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

696 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