0

I can't change h2's font size for printing, even if I remove the external text style sheet. I have tried everything I can think of, but h2's font size remains fixed at about 16 points (everything else works OK, though). What am I doing wrong? TIA...

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Commodi Consequatur</title>
<link href="style.css" rel="stylesheet" type="text/css" />

<style>
#comments .entry .con,#comments .entry .name,#comments .entry .date {
    margin-left: 10px; 
    font: italic 11px "Trebuchet MS", Arial, Helvetica, sans-serif;
}

.ol
 {
    font: normal 1.2em Vollkorn; 
}

</style>

<style>

@media print {
h2, #maincontent h2, #comments h2 {
font: 20pt Georgia, "Times New Roman", Times, serif;
}

#footer, #mainnav, .noprint
{
display: none;
}

a:link, 
a:visited { 
background: transparent; 
text-decoration: none; 
}

ol.print {
font: 18pt Georgia, "Times New Roman", Times, serif;
line-height:100%;

}
</style>

</head>

<body>
<div id="topbanner">
<div class="container">
<a href="index.html"><img src="images/logo_sml.jpg" border="0" style="float: left; margin:4px 0px 0 7px;" /></a>
      <h1 id="sitename">Namius Oculus</h1>

</h1>
<div id="mainnav" class="noprint">
          <div style="margin:0px 0px 0 60px;">
            <ul>
              <li><a href="index.html">Home <span>News, etc.</span></a></li>
              <li><a href="about.html">About <span>France</span></a></li>
              <li><a href="events.html">Events <span>In Spain</span></a></li>
              <li><a href="contact.php">Contact <span>VIPs</span></a></li>
            </ul>
          </div>
        </div>
<div class="clear"></div>
</div>
</div>
<div id="pagewrap">
<div id="wrap">
<div id="headspacer">

</div>
<div id="maincontent">
<div id="pagebox">
  <div class="post">
    <div class="posthead">
<div id="comments" class="comments-list">


<h2>This is the problem heading</h2>


 <div class="entry2  alt">

<div class="ol">
<ol class=print>

<li style="margin-bottom: 10px;">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium do. <a href="join.html">Membership</a> will be available at the door.</li>

<li style="margin-bottom: 10px;">Dolores eos qui ratione voluptatem sequi.</li>

<li style="margin-bottom: 10px;">Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet</li>

<li style="margin-bottom: 10px;">Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui.</li>

</ol>
</div>

</div>
</div>

 <div class="entry " id="comment-4">


</div>
</div>


</div>
  </div>
</div>

</div> 

<div class="clear"></div>
</div>
</div>
</div>
<div id="bottom">
<div id="btmcontent">
<div class="col1">

</div>

</div>

<div id="footer" class="noprint">
        <p>Vitae dicta sunt explicabo</p>
</div>

</div>
</body>
</html>
Kara
  • 6,115
  • 16
  • 50
  • 57
James Scott
  • 3
  • 2
  • 3
    You never close the media query, perhaps that could contribute – Zach Saucier Jan 08 '14 at 23:45
  • Thanks ...I'm not sure what you mean by "close the media query". I added an extra set of style tags to enclose the print css. It made no difference, though. – James Scott Jan 09 '14 at 16:44
  • You may just need to add a closing curly brace: `@media print { h2, #maincontent h2, #comments h2 { font: 20pt Georgia, "Times New Roman", Times, serif; }}` – Appulus Jan 09 '14 at 16:48
  • Thanks, but that just increases the body text to 20 points in screen view - h2 print size is unaffected. – James Scott Jan 09 '14 at 16:59
  • Hmmm ...I discovered that adding the closing brace works, but only if i remove the external text style sheet. Maybe I'll have to play around with that a bit... – James Scott Jan 09 '14 at 17:08

0 Answers0