title: How can I find out what css is overriding the css in my style sheet?
body: <p>I created a print style sheet which links to my html page. Changes to the font, colors etc. work in the print version, but I can not change the size of my divs in the print version. For example, if I have a content div that is 300px X 300px on my page, it won't change it if I change the dimensions in the print version. 
  To figure out the root of the problem, I used inspect element to see if an css was overriding that in my print page. I found that the content div width is controlled by the body width. So I tried changing the content height and the body div in the print stylesheet. That did not work. I also tried creating a separate style sheet for both the main css and the print css. That did not work. Is there another way I can troubleshoot this issue...something similar to breakpoints maybe, but for html?</p>
  
  <p>HTML:</p>
  
  <pre><code>    &lt;!DOCTYPE html&gt;
      &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
      &lt;head&gt;
      &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
      &lt;!--- TITLE - FROM SPECIFIC TO GENERAL ---&gt;
      &lt;title&gt;Page&lt;/title&gt;
      &lt;cfinclude template="/assets2011/webfonts/comment.htm" /&gt;
      &lt;link rel="stylesheet" type="text/css"        href="/assets2011/MyFontsWebfontsOrderM2845569_css.css" /&gt;
      &lt;link rel="stylesheet" type="text/css" href="/assets2011/css/global.css" /&gt;
      &lt;link  href="print.css" type="text/css" rel="stylesheet" media="print"/&gt;
      &lt;style&gt;
  
       body{
       width: 8700px;
       height:2000px;
       overflow: hidden;
       }
       #section{
       width: 8000px;
       float: left;
        height: 1000;
        z-index: 1;
        }
           #content{
         width: 1000px; height:300px; margin-top: 10px; margin-left: 50px; overflow: auto;
         }
        .navbarLeft{
        height: 700px;
        width: 40px;
         top:0;
       z-index: 2;
         position:absolute;
        background-position: 50% 30%;
         background-image: url(navL.png);
       background-repeat: no-repeat;
      opacity: 0.05;
        }
        .navbarLeft:hover{
         opacity: 0.5;
         }
          .navbarRight{
         height: 700px;
        width: 40px;
      top: 0;
       z-index: 2;
      position: absolute;
      background-position: 50% 30%;
      background-image: url(navR.png);
      background-repeat: no-repeat;
      opacity: 0.05;
      left: 2013px;
       }
      .navbarRight:hover{
        opacity: 0.5;
      }
      table,tr,td {
      border:1px solid black;
      }
  
      &lt;/style&gt;
  
       &lt;/head&gt;
        &lt;body&gt;
        &lt;!--Factor 1--&gt;
       &lt;div class="section" id="factor1"&gt;
       &lt;div id="content"&gt;  
       &lt;!--Begin Content--&gt;
              &lt;p&gt;textiyiuypilkhjkujp;mjl;juipoupoj;hikhiyuiuj&lt;/p&gt;
          &lt;/div&gt;  
      &lt;!--End Content--&gt;
  
        &lt;!-- Navigation --&gt;
       &lt;ul class="nav"&gt;  
      &lt;a href="#factor2"&gt;&lt;div class= "navbarLeft" id="menu" style="left: 755px;"&gt;&lt;/div&gt;&lt;/a&gt;
        &lt;/ul&gt;
        &lt;/div&gt;
        &lt;!--End Factor 1--&gt; 
  
  
     &lt;!--Factor 2--&gt;
     &lt;div class="section" id="factor2"&gt;
      &lt;div id="content"&gt;
          &lt;p&gt;text2khlikhlkj;ljlji0piomloj;lkjoippm,klikp&lt;/p&gt;
       &lt;/div&gt;
       &lt;ul class="nav"&gt;
       &lt;a href="#factor1"&gt;&lt;div class= "navbarRight" id="menu" style="left: 2005px;"&gt;&lt;/div&gt;  
        &lt;/a&gt;
       &lt;a href="#factor3"&gt;&lt;div class= "navbarLeft" id="menu" style="left: 2755px;"&gt;&lt;/div&gt;&lt;/a&gt;
       &lt;/ul&gt;
      &lt;/div&gt;
       &lt;!--End Factor 2--&gt;
  
      &lt;!--JavaScript--&gt;
       &lt;script type="text/javascript"   
                 src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="../newUI/jquery.easing.1.3.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript"&gt;
              $(function() {
                  $('ul.nav a').bind('click',function(event){
                      var $anchor = $(this);
                      $('html, body').stop().animate({
                          scrollLeft: $($anchor.attr('href')).offset().left
                      }, 1000);
                      event.preventDefault();
                  });
              });
        &lt;/script&gt;
        &lt;/body&gt;
      &lt;/html&gt;
  </code></pre>
  
  <p>CSS Print Style Sheet:</p>
  
  <pre><code>       body{
           width: 1000px;
          }
  
      #section, .navbarLeft, .navbarRight{
      display:none;
      }
  
      #content{
         font-size: 110px;
         overflow:visible;
         height: 1000px;
         page-break-after: always;
         margin-top:10px; 
         margin-left:50px; 
      } 
  
      p a:after {
      content: " (" attr(href) ")";
      font-size: 50%;
      }
  </code></pre>