SitePoint Sponsor

User Tag List

Results 1 to 5 of 5

Thread: CSS Priht

  1. #1
    SitePoint Enthusiast
    Join Date
    May 2007
    Posts
    43
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS Priht

    Hi

    Well i have created a syle sheet specifically to make a page moire print friendly via removing the header graphic, navigation etc, but when I use the print preview window in either FF or IE, the text appears 'cut' off the print preview window, is this normal?

  2. #2
    SitePoint Zealot AVdes's Avatar
    Join Date
    Jun 2005
    Location
    GA
    Posts
    106
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Post the script so we can see what your doing.
    CSS Club mantra; "I hate IE6, I hate IE6, I hate IE6".
    http://www.avdes.com

  3. #3
    SitePoint Enthusiast
    Join Date
    May 2007
    Posts
    43
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well heres the css

    Code:
    * {margin:0; padding:0;}
    
    html,body{height:100%;}
    
    body{background:#1F1F1F;}
    
    p {font: 12px/18px "Lucida Grande", Verdana, sans-serif; color: #333; padding:5px; }
    .first {padding-top:10px;}
    .p {font: 12px/18px "Lucida Grande", Verdana, sans-serif; color: #333; padding:5px; }
    .pp {font: 12px/18px "Lucida Grande", Verdana, sans-serif; color: #333; padding:2px; width:150px; }
    h1 { padding-left:5px; font: 22px "Lucida Grande", Verdana, sans-serif; color: #333; padding-bottom:12px; border-bottom: 1px solid #CCCCCC; width:400px;}
    h2 { padding-left:5px; font: 18px "Lucida Grande", Verdana, sans-serif; color: #333; padding-bottom:12px; border-bottom: 1px solid #CCCCCC; width:400px; padding-top:15px; font-weight:100;}
    h3 { padding-left:5px; font: 18px "Lucida Grande", Verdana, sans-serif; color: #333; padding-bottom:12px; border-bottom: 1px solid #CCCCCC; width:400px; padding-top:20px; font-weight:100;}
    h4 { padding-left:5px; font: 18px "Lucida Grande", Verdana, sans-serif; color: #333; padding-bottom:12px; border-bottom: 1px solid #CCCCCC; width:400px; padding-top:20px; font-weight:100;}
    
    
    #wrapper{width:940px;margin:-161px auto 0 auto; overflow:hidden;}
    * html #wrapper{height:100%;}
    head+body #wrapper{min-height:100%;}
    
    #header{display:none;}
    
    #navigation {
    display:none;}
     
    #navigation ul{
    list-style:none; 
    margin-top:15px;}
    
    #navigation li a:link, #navigation li a:visited{
    text-decoration:none;
    padding-top:4px;
    height:22px;
    padding-left:8px;
    margin-left:9px;
    color:#000000; 
    display:block;
    background-repeat:no-repeat;
    border-bottom:1px dotted #CFCFCF;
    width:150px;
    }
    
    #navigation li a:hover {font-weight:bold; background-color:#EEEEEE;}
    
    
    #content{width:725px;float:right; background-image:url(../images/top_box.JPG); background-repeat:no-repeat; background-color:#FFFFFF;  padding-left:17px; padding-right:18px;}
    #content2 {width: 725px; border-left:1px solid #DDDDDD; border-right:1px solid #DDDDDD; margin-top:50px; }
    #container{border-top:162px solid #1F1F1F;}
    
    #footer{background:#333333;height:30px;width:942px;margin:auto;color:#ffffff;}
    .menu {
    text-decoration:none;
    margin-left:14px;
    color:#000000; 
    display:block;
    width:150px;
    
    font-weight:bold;
    }
    
    .menutop {
    text-decoration:none;
    margin-left:14px;
    color:#000000; 
    display:block;
    width:150px;
    padding-top:20px;
    font-weight:bold;
    }
    
    .bs  
    {
    	float:right; padding-right:15px;}
    #right {float:right; padding-right:15px;}
    
    th {
    	font: 12px "Lucida Grande", Verdana, sans-serif;
    	color: #4f6b72;
    	border-right: 1px solid #C1DAD7;
    	border-bottom: 1px solid #C1DAD7;
    	border-top: 1px solid #C1DAD7;
    	text-transform: uppercase;
    	text-align: left;
    	padding: 6px 6px 6px 12px;
    	background: #CAE8EA url(images/bg_header.jpg) no-repeat;
    }
    
    th.nobg {
    	border-top: 0;
    	border-left: 0;
    	border-right: 1px solid #C1DAD7;
    	background: none;
    }
    
    td {
    	border-right: 1px solid #C1DAD7;
    	border-bottom: 1px solid #C1DAD7;
    	background: #fff;
    	padding: 6px 6px 6px 12px;
    	color: #4f6b72;
    }
    
    
    td.alt {
    	background: #F5FAFA;
    	color: #797268;
    }
    
    th.spec {
    	border-left: 1px solid #C1DAD7;
    	border-top: 0;
    	background: #fff url(images/bullet1.gif) no-repeat;
    	font: 10px "Lucida Grande", Verdana, sans-serif;
    }
    
    th.specalt {
    	border-left: 1px solid #C1DAD7;
    	border-top: 0;
    	background: #f5fafa url(images/bullet2.gif) no-repeat;
    	font:  10px "Lucida Grande", Verdana, sans-serif;
    	color: #797268;
    }
    
    fieldset {  
    margin: 1.5em 0 0 0;  
    padding: 5px;
    width:700px;
    color: #FFFFFF;
    }
    legend {  
    margin-left: 1em;  
    color: Gray; 
    font-weight: bold;
    
    }
    fieldset ol {  
    padding: 1em 1em 0 1em;  
    list-style: none;
    }
    fieldset li {  
    padding-bottom: 2em;
    }
    fieldset.submit {  
    border-style: none; }
    
    label {  
    float: left;  
    width: 10em;  
    margin-right: 1em;
    font: 12px/18px "Lucida Grande", Verdana, sans-serif; color: #333;
    }
    legend {font: 14px "Lucida Grande", Verdana, sans-serif; color: #333;}
    
    .button {font: 13px "Lucida Grande", Verdana, sans-serif; color: #333; padding:3px; width:70px;}

  4. #4
    SitePoint Enthusiast
    Join Date
    May 2007
    Posts
    43
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh and heres the markup, its messy due to the page is generated using ASP.NET

    Code:
    <!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>Untitled Document</title>
        <link href="../CSS/SimpleMenu.css" rel="stylesheet" type="text/css" />
        <link href="../CSS/Layout.css"rel="stylesheet" type="text/css"  />
        <link href="../CSS/print.css" rel="stylesheet" type="text/css" media="print" />
    
    </head>
    <body>
    <form name="aspnetForm" method="post" action="alfa-romeo-147.aspx" id="aspnetForm">
    <div>
    <input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwULLTEwMDUyNjYzMjgPZBYCZg9kFgICAg9kFgYCBRA8KwANAgAPFgIeC18hRGF0YUJvdW5kZ2QMFCsABgUTMDowLDA6MSwwOjIsMDozLDA6NBQrAAIWDh4EVGV4dAUESG9tZR4FVmFsdWUFBEhvbWUeC05hdmlnYXRlVXJsBR0vQXV0b21vdGl2ZWRldi5jb20vaW5kZXguYXNweB4HRW5hYmxlZGceClNlbGVjdGFibGVnHghEYXRhUGF0aAUdL2F1dG9tb3RpdmVkZXYuY29tL2luZGV4LmFzcHgeCURhdGFCb3VuZGdkFCsAAhYOHwEFBE5ld3MfAgUETmV3cx8DBRwvQXV0b21vdGl2ZWRldi5jb20vbmV3cy5hc3B4HwRnHwVnHwYFHC9hdXRvbW90aXZlZGV2LmNvbS9uZXdzLmFzcHgfB2dkFCsAAhYOHwEFBENhcnMfAgUEQ2Fycx8DBRwvQXV0b21vdGl2ZWRldi5jb20vY2Fycy5hc3B4HwRnHwVnHwYFHC9hdXRvbW90aXZlZGV2LmNvbS9jYXJzLmFzcHgfB2dkFCsAAhYOHwEFCkNhciBJbWFnZXMfAgUKQ2FyIEltYWdlcx8DBQwvQWxmYS1Sb21lby8fBGcfBWcfBgUML2FsZmEtcm9tZW8vHwdnZBQrAAIWDh8BBQpGaW5kIGEgQ2FyHwIFCkZpbmQgYSBDYXIfAwUdL0F1dG9tb3RpdmVkZXYuY29tL0NhciBGaW5kZXIfBGcfBWcfBgUdL2F1dG9tb3RpdmVkZXYuY29tL2NhciBmaW5kZXIfB2dkZGQCCRA8KwANAgAPFgIfAGdkDBQrAAIFAzA6MBQrAAIWDB8BZR8CZR8EZx8FaB8GBSQ4ZWFjMTZiMi04Y2MxLTQwZjUtYjljMi04ZjgyNmEzZDBhOTEfB2cUKwAJBR8wOjAsMDoxLDA6MiwwOjMsMDo0LDA6NSwwOjYsMDo3FCsAAhYQHwEFBEF1ZGkfAgUEQXVkaR8DBQYvYXVkaS8eB1Rvb2xUaXAFCUF1ZGkgY2Fycx8EZx8FZx8GBQYvYXVkaS8fB2dkFCsAAhYQHwEFA0JNVx8CBQNCTVcfAwUFL2Jtdy8fCAUIQk1XIGNhcnMfBGcfBWcfBgUFL2Jtdy8fB2dkFCsAAhYQHwEFB0ZlcnJhcmkfAgUHRmVycmFyaR8DBQkvZmVycmFyaS8fCAUMRmVycmFyaSBjYXJzHwRnHwVnHwYFCS9mZXJyYXJpLx8HZ2QUKwACFhAfAQUGSmFndWFyHwIFBkphZ3Vhch8DBQgvamFndWFyLx8IBQtKYWd1YXIgY2Fycx8EZx8FZx8GBQgvamFndWFyLx8HZ2QUKwACFhAfAQULTGFtYm9yZ2hpbmkfAgULTGFtYm9yZ2hpbmkfAwUNL2xhbWJvcmdoaW5pLx8IBRBMYW1ib3JnaGluaSBjYXJzHwRnHwVnHwYFDS9sYW1ib3JnaGluaS8fB2dkFCsAAhYQHwEFDU1lcmNlZGVzIEJlbnofAgUNTWVyY2VkZXMgQmVueh8DBQ8vbWVyY2VkZXMtYmVuei8fCAUSTWVyY2VkZXMgQmVueiBjYXJzHwRnHwVnHwYFDy9tZXJjZWRlcy1iZW56Lx8HZ2QUKwACFhAfAQUHUG9yc2NoZR8CBQdQb3JzY2hlHwMFCS9Qb3JzY2hlLx8IBQtQb3NjaGUgY2Fycx8EZx8FZx8GBQkvcG9yc2NoZS8fB2dkFCsAAhYQHwEFFk90aGVyL0FsbCBNYW51ZmFjdHVyZXMfAgUWT3RoZXIvQWxsIE1hbnVmYWN0dXJlcx8DBQUvYWxsLx8IBQtQb3NjaGUgY2Fycx8EZx8FZx8GBQUvYWxsLx8HZ2RkZAINEDwrAA0CAA8WAh8AZ2QMFCsABwUXMDowLDA6MSwwOjIsMDozLDA6NCwwOjUUKwACFg4fAQUNQ2FyIEluc3VyYW5jZR8CBQ1DYXIgSW5zdXJhbmNlHwMFJS9BdXRvbW90aXZlZGV2LmNvbS9jYXItaW5zdXJhbmNlLmFzcHgfBGcfBWcfBgUlL2F1dG9tb3RpdmVkZXYuY29tL2Nhci1pbnN1cmFuY2UuYXNweB8HZ2QUKwACFg4fAQUHUmVudGFscx8CBQdSZW50YWxzHwMFIy9BdXRvbW90aXZlZGV2LmNvbS9jYXItcmVudGFscy5hc3B4HwRnHwVnHwYFIy9hdXRvbW90aXZlZGV2LmNvbS9jYXItcmVudGFscy5hc3B4HwdnZBQrAAIWDh8BBQlVc2VkIENhcnMfAgUJVXNlZCBDYXJzHwMFIS9BdXRvbW90aXZlZGV2LmNvbS91c2VkLWNhcnMuYXNweB8EZx8FZx8GBSEvYXV0b21vdGl2ZWRldi5jb20vdXNlZC1jYXJzLmFzcHgfB2dkFCsAAhYOHwEFBVRvb2xzHwIFBVRvb2xzHwMFKC9BdXRvbW90aXZlZGV2LmNvbS9hdXRvbW90aXZlLXRvb2xzLmFzcHgfBGcfBWcfBgUoL2F1dG9tb3RpdmVkZXYuY29tL2F1dG9tb3RpdmUtdG9vbHMuYXNweB8HZ2QUKwACFg4fAQUGUmVwYWlyHwIFBlJlcGFpch8DBSkvQXV0b21vdGl2ZWRldi5jb20vYXV0b21vdGl2ZS1yZXBhaXIuYXNweB8EZx8FZx8GBSkvYXV0b21vdGl2ZWRldi5jb20vYXV0b21vdGl2ZS1yZXBhaXIuYXNweB8HZ2QUKwACFg4fAQULQWNjZXNzb3JpZXMfAgULQWNjZXNzb3JpZXMfAwUnL0F1dG9tb3RpdmVkZXYuY29tL2Nhci1hY2Nlc3Nvcmllcy5hc3B4HwRnHwVnHwYFJy9hdXRvbW90aXZlZGV2LmNvbS9jYXItYWNjZXNzb3JpZXMuYXNweB8HZ2RkZGThkgHs86djv8nNptrp89J7sUjAOQ==" />
    </div>
    
    
    <script src="/Automotivedev.com/JavaScript/AdapterUtils.js" type="text/javascript"></script>
    <script src="/Automotivedev.com/JavaScript/MenuAdapter.js" type="text/javascript"></script>
    <div id="header">
    <img src="../images/header-graphic-trans.png" alt="autmotive image" title="Automotive" />
    </div>
    
    <div id="wrapper">
    
    <div id="container">
    <div id="content">
    <div id="content2">
    <div id="right">
    
    
    <span id="Bookmark1"><nobr><a href="http://****.com/submit?url=http&#37;3a%2f%2flocalhost%3a2533%2fAutomotivedev.com%2falfa-romeo%2falfa-romeo-147.aspx&title=" title="****" target="_blank"><img src="../images/****.gif" border="0" width="16" alt="****" /></a></nobr>&nbsp;<nobr><a href="http://del.icio.us/post?url=http%3a%2f%2flocalhost%3a2533%2fAutomotivedev.com%2falfa-romeo%2falfa-romeo-147.aspx&title=" title="del.icio.us" target="_blank"><img src="../images/del.icio.us.gif" border="0" width="16" alt="del.icio.us" /></a></nobr>&nbsp;<nobr><a href="http://www.furl.net/storeIt.jsp?u=http%3a%2f%2flocalhost%3a2533%2fAutomotivedev.com%2falfa-romeo%2falfa-romeo-147.aspx&t=" title="FURL" target="_blank"><img src="../images/FURL.gif" border="0" width="16" alt="FURL" /></a></nobr>&nbsp;<nobr><a href="http://reddit.com/submit?url=http%3a%2f%2flocalhost%3a2533%2fAutomotivedev.com%2falfa-romeo%2falfa-romeo-147.aspx&title=" title="Reddit" target="_blank"><img src="../images/Reddit.gif" border="0" width="16" alt="Reddit" /></a></nobr>&nbsp;<nobr><a href="http://myweb2.search.yahoo.com/myresults/bookmarklet?u=http%3a%2f%2flocalhost%3a2533%2fAutomotivedev.com%2falfa-romeo%2falfa-romeo-147.aspx&t=" title="Yahoo!" target="_blank"><img src="../images/Yahoo!.gif" border="0" width="16" alt="Yahoo!" /></a></nobr></span>
    
    </div>
        
        <h1>Information</h1>
        <p>
        jThe alternative solution involves three steps:
       1. The users select their preferred style -- they click a hyperlink or choose an option from a dropdown list.
       2. The server-side script reads the visitors' selection and sets a cookie on their machine to record that selection.
    
       3. On every subsequent visit, this cookie is recalled by our server-side script and the perferred stylesheet is selected accordingly.
    
    Let's look at each of these steps in detail.
    
       1. Choose the Preferred Style
      </p>
    
    </div>
    </div>
    </div>
    
    <div id="navigation">
    <ul>
    <li class="menutop">Main</li>
    </ul>
        
    <div class="AspNet-Menu-Vertical">
    	<ul class="AspNet-Menu">
    		<li class="AspNet-Menu-Leaf">
    			<a href="/Automotivedev.com/index.aspx" class="AspNet-Menu-Link">
    
    				Home</a>
    		</li>
    		<li class="AspNet-Menu-Leaf">
    			<a href="/Automotivedev.com/news.aspx" class="AspNet-Menu-Link">
    				News</a>
    		</li>
    		<li class="AspNet-Menu-Leaf">
    			<a href="/Automotivedev.com/cars.aspx" class="AspNet-Menu-Link">
    
    				Cars</a>
    		</li>
    		<li class="AspNet-Menu-Leaf">
    			<a href="/Alfa-Romeo/" class="AspNet-Menu-Link">
    				Car Images</a>
    		</li>
    		<li class="AspNet-Menu-Leaf">
    			<a href="/Automotivedev.com/Car Finder" class="AspNet-Menu-Link">
    
    				Find a Car</a>
    		</li>
    	</ul>
    </div>
    
        
    <ul>
    <li class="menu">Car Manufactures</li>
    </ul>
        
    <div class="AspNet-Menu-Vertical">
    	<ul class="AspNet-Menu">
    
    		<li class="AspNet-Menu-WithChildren">
    			<span class="AspNet-Menu-NonLink">
    				</span>
    			<ul>
    				<li class="AspNet-Menu-Leaf">
    					<a href="/audi/" class="AspNet-Menu-Link" title="Audi cars">
    						Audi</a>
    				</li>
    
    				<li class="AspNet-Menu-Leaf">
    					<a href="/bmw/" class="AspNet-Menu-Link" title="BMW cars">
    						BMW</a>
    				</li>
    				<li class="AspNet-Menu-Leaf">
    					<a href="/ferrari/" class="AspNet-Menu-Link" title="Ferrari cars">
    						Ferrari</a>
    				</li>
    
    				<li class="AspNet-Menu-Leaf">
    					<a href="/jaguar/" class="AspNet-Menu-Link" title="Jaguar cars">
    						Jaguar</a>
    				</li>
    				<li class="AspNet-Menu-Leaf">
    					<a href="/lamborghini/" class="AspNet-Menu-Link" title="Lamborghini cars">
    						Lamborghini</a>
    				</li>
    
    				<li class="AspNet-Menu-Leaf">
    					<a href="/mercedes-benz/" class="AspNet-Menu-Link" title="Mercedes Benz cars">
    						Mercedes Benz</a>
    				</li>
    				<li class="AspNet-Menu-Leaf">
    					<a href="/Porsche/" class="AspNet-Menu-Link" title="Posche cars">
    						Porsche</a>
    				</li>
    
    				<li class="AspNet-Menu-Leaf">
    					<a href="/all/" class="AspNet-Menu-Link" title="Posche cars">
    						Other/All Manufactures</a>
    				</li>
    			</ul>
    		</li>
    	</ul>
    </div>
    
        
        <ul>
        <li class="menu">Automotive</li>
        </ul>
        
    <div class="AspNet-Menu-Vertical">
    	<ul class="AspNet-Menu">
    		<li class="AspNet-Menu-Leaf">
    			<a href="/Automotivedev.com/car-insurance.aspx" class="AspNet-Menu-Link">
    				Car Insurance</a>
    
    		</li>
    		<li class="AspNet-Menu-Leaf">
    			<a href="/Automotivedev.com/car-rentals.aspx" class="AspNet-Menu-Link">
    				Rentals</a>
    		</li>
    		<li class="AspNet-Menu-Leaf">
    			<a href="/Automotivedev.com/used-cars.aspx" class="AspNet-Menu-Link">
    				Used Cars</a>
    
    		</li>
    		<li class="AspNet-Menu-Leaf">
    			<a href="/Automotivedev.com/automotive-tools.aspx" class="AspNet-Menu-Link">
    				Tools</a>
    		</li>
    		<li class="AspNet-Menu-Leaf">
    			<a href="/Automotivedev.com/automotive-repair.aspx" class="AspNet-Menu-Link">
    				Repair</a>
    
    		</li>
    		<li class="AspNet-Menu-Leaf">
    			<a href="/Automotivedev.com/car-accessories.aspx" class="AspNet-Menu-Link">
    				Accessories</a>
    		</li>
    	</ul>
    </div>
    
        
    </div>
    
    </div>
    <div id="footer"><p>footer</p></div>
    </form>
    </body>
    </html>

  5. #5
    SitePoint Zealot AVdes's Avatar
    Join Date
    Jun 2005
    Location
    GA
    Posts
    106
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    okay this is how I do it.
    In the css I add:

    @media screen {
    body{background:#1F1F1F;}
    #header{height:100&#37;;}
    }

    /* then I add */

    @media print {
    body{background:#FFFFFF;} /*white background to conserve ink*/
    #header{display:none;}
    }
    What this does is tells the screen to read one set of rules wile the printer will read another set. It seems to work on safari FireFox and IE 6 & 7. Don't know about IE 5 or Opera though.
    Last edited by AVdes; Jul 11, 2007 at 11:35. Reason: formating for readability
    CSS Club mantra; "I hate IE6, I hate IE6, I hate IE6".
    http://www.avdes.com


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •