Link to home
Start Free TrialLog in
Avatar of ocmara
ocmara

asked on

@media in JSP page

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?
Avatar of Meritor
Meritor
Flag of India image

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

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!
Avatar of ocmara
ocmara

ASKER

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!!!
Can you give a link to the actual page, or more source code so we can see what is going wrong?
Avatar of ocmara

ASKER

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.
ASKER CERTIFIED SOLUTION
Avatar of mdg12
mdg12
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial