I've been racking my brain on this issue for two days now, and completely recoded my page twice thinking that I forgot or missed something.
So, here's the issue-
I'm using this jQuery plugin -
http://www.ssdtutorials.com/tutorial...ery-print.html
I've coded the content page in a separate html page, with it's own css, and it works fine. Once I dump that html and css into the template, the print function does not want to work. When I click on one of the images, it just has the loading icon in the tab. Basically it's a page with a few coupons on it, and I need to be able to have the user click on one image and have it sent to their printer.
Here's my CSS and HTML:
Template CSS that's screwing it up
Code:
body {
background:url(vip/orange-bg2.jpg) top repeat-x #fa4c19;
}
#Site {
margin: auto;
width: 1000px;
background-color: #FFFFFF;
border-right-width: 1px;
border-left-width: 1px;
border-right-style: solid;
border-left-style: solid;
border-right-color: #333333;
border-left-color: #333333;
}
#featured {
margin: auto;
width: 988px;
height:auto;
padding:30px 10px 30px 10px;
text-align:left;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
color:#666;
}
.Content {
margin: auto;
width: 965px;
background-image: url(../images/extreme_16.jpg);
background-repeat: no-repeat;
padding: 0px 0px 0px 0px;
}
body, td, th {
font-family: Arial, Helvetica, sans-serif;
color: #000000;
font-size: 13px;
}
#Site h1 {
margin: 0px;
font-family: "Arial Black", Arial, "Sans serif";
font-size: 20px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 12px;
}
.FeaturedArea {
padding-right: 12px;
padding-left: 12px;
background-image: url(../images/extreme_08.jpg);
position: relative;
padding-bottom: 20px;
}
.Navigation {
background-image: url(../images/extreme_03.jpg);
background-repeat: repeat-y;
height: 40px;
overflow: hidden;
}
.Navigation ul {
margin: 0px;
padding: 0px;
}
.Navigation li {
display: inline;
float: left;
}
.Navigation li a {
font-family: Arial;
font-weight: bold;
color: #FFFFFF;
display: block;
padding: 12px;
border-right-width: 1px;
border-left-width: 1px;
border-right-style: solid;
border-left-style: solid;
border-right-color: #000000;
border-left-color: #333333;
text-decoration: none;
}
Content CSS that works fine
Code:
#wrapper {
margin:0 auto;
width:970px;
}
#submain {
margin:0 auto;
width:970px;
}
#coupon1 {
float:left;
width:459px;
height:184px;
overflow:hidden;
padding:0px 12px;
}
#coupon2 {
float:left;
padding:0px 5px;
}
#coupon3 {
float:left;
width:459px;
height:184px;
overflow:hidden;
padding:0px 12px;
}
#coupon4 {
float:left;
padding:0px 5px;
}
#coupcon {
text-align: center;
width:970px;
}
.left {
float: left;
}
.right {
float: right;
}
jscript I'm using
Code:
<script src="script/jquery-1.6.2.min.js"></script>
<script src="script/jquery.PrintArea.js_4.js"></script>
<script src="script/core.js"></script>
And finally, the code I'm using to print a specific image
Code:
<div id="buddypass1"><a href="#" class="clickprint" rel="buddypass1"><img src="vip/buddypass01.jpg" width="315" height="166" hspace="0" vspace="1" border="0" class="left" /></a></div>
Does anyone have a clue on what's going on? I need to get this project finished asap.
