Log in / Register

Forum › Bugs

Images not rendering in PDF

jagtapbhushan11@gmail.com
Below is my HTML




<!DOCTYPE html>
<html lang="en">
<head>
<title>Inspire - Alert</title>
<style type="text/css">
@page {
@top {
content: flow(top-header);
}
}

#top-header {
flow: static(top-header);
}

.main-container {
/*padding: 10px;*/
}

.left-container {
width: 30%;
float: left;
margin-right: 30px;
padding-left: 10px;
}

.right-container {
width: 55%;
float: left;
padding-right: 10px;
}

.font-20 {
font-size: 20px;
line-height: 22px;
}

.font-18 {
font-size: 18px;
line-height: 20px;
}

.font-15 {
font-size: 15px;
line-height: 17px;
}

.font-13 {
font-size: 13px;
line-height: 15px;
}

.content-heading {
color: #CFCFCF;
}

.margin-bottom-10 {
margin-bottom: 10px;
}

.padding-bootom-10 {
padding-bottom: 10px;
}

.margin-bottom-15 {
margin-bottom: 15px;
}

.content-container {
display: inline-block;
padding: 10px 0px;
border-top: 1px solid #76787a;
width: 100%;
}

.early-alert-student-image-container {
float: left;
position: relative;
width: 60px;
height: 60px;
border-radius: 50%;
}

.early-alert-student-image {
position: absolute;
width: 60px;
height: 55px;
border-radius: 50%;
left: 5px;
top: 5px;
}

.early-alert-student-name {
clear: both;
float: left;
width: 170px;
padding-left: 80px;
padding-top: 5px;
line-height: 16px;
}

.early-alert-student-program {
float: left;
padding-top: 5px;
line-height: 16px;
text-transform: capitalize;
padding-right: 30px;
}

.early-alert-student-container {
padding: 0 0 10px 0;
border-bottom: 1px solid #ccc;
float: left;
width: 100%;
}

.early-alert-advisor-should-container, .early-alert-student-should-container, .early-alert-concern-container {
float: left;
width: 165px;
}

.early-alert-section-container {
padding-top: 15px;
clear: both;
}

.early-alert-student-header-container {
float: left;
padding-left: 20px;
width: 80%;
}

.early-alert-student-header-main-container {
height: 60px;
padding-bottom: 10px;
}

.early-alert-medium-alert-icon {
background: rgba(0, 0, 0, 0) url("http://waubonsee-et.inspire.civitaslearning.com/css/images/loe-sprites.png") no-repeat scroll -57px -390px;
font-size: 13px;
}

.early-alert-high-alert-icon {
background: rgba(0, 0, 0, 0) url("http://waubonsee-et.inspire.civitaslearning.com/css/images/LOE_pending-status-sprite.png") no-repeat scroll -36px -25px;
font-size: 13px;
}

.fa-star::before {
content: "";
}

.early-alert-commendation-icon {
background: rgba(0, 0, 0, 0) url("http://waubonsee-et.inspire.civitaslearning.com/css/images/individual-LOE-status-sprites.png") no-repeat scroll -6px -22px;
font-size: 13px;
}

.fa {
display: inline-block;
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
line-height: 1;
}

.early-alert-status-icon {
float: left;
height: 15px;
margin-right: 2px;
margin-top: 2px;
width: 15px;
}

.early-alert-awaiting-icon {
background: rgba(0, 0, 0, 0) url("http://waubonsee-et.inspire.civitaslearning.com/css/images/loe-sprites.png") no-repeat scroll -57px -364px;
}

.early-alert-no-alert-icon {
background: rgba(0, 0, 0, 0) url("http://waubonsee-et.inspire.civitaslearning.com/css/images/loe-sprites.png") no-repeat scroll -57px -415px;
}

.context-senstive-comment-row {
padding: 7px 17px 7px 25px;
border: 1px solid #c1c8cf;
border-radius: 4px;
position: relative;
margin-bottom: 5px;
}

.context-sensitive-comment-icon {
background: url("http://waubonsee-et.inspire.civitaslearning.com/css/images/advisingnotes-sprites-new.png") no-repeat scroll -49px -139px transparent;
height: 16px;
left: 5px;
position: absolute;
top: 7px;
width: 16px;
}

.accent-a1-font {
color: #4c4c4e;
}

.ui-bkgd-b7 {
background-color: #eef0f8;
}
.alert-comments-label{
margin-bottom: 6px;
}
.alert-label-text{
color: #6F7786;
}

</style>
</head>
<body>

<div class="main-container">
<div class="early-alert-student-container font-13">
<div class="early-alert-student-header-main-container">
<div class="early-alert-student-image-container">
<img class="early-alert-student-image" src="http://waubonsee-et.inspire.civitaslearning.com/css/images/default_profile_medium.svg"/>
</div>
<div class="early-alert-student-header-container">
<div class="font-18">Abayeva, Khanzada</div>
<div class="font-18">Alerts FALL 2019 - General Alert</div>
<div class="font-15"></div>
</div>
</div>
<div class="early-alert-student-name">
<div>Abayeva, Khanzada</div>
<div>X00360785</div>
</div>
<div class="early-alert-student-program">
<div>UNDERGRADUATE</div>
<div>Waubonsee Community College</div>
<div>spring 2019-spring 2023</div>
</div>
<div class="clr"></div>
</div>

<div class="early-alert-section-container">
<div class="font-15">Aug 23, 2019</div>
<div class="font-15">
<div class="early-alert-status-icon early-alert-medium-alert-icon"></div>
medium alert </div>
</div>


<div class="early-alert-section-container font-13">
<div class="early-alert-concern-container">
<div class="alert-label-text">Concerns:</div>
<div>Low or missing test grades</div><div>Unprepared for class</div> </div>

<div class="early-alert-student-should-container">
<div class="alert-label-text">Student should:</div>
<div>Use support programs</div><div>Use writing center</div> </div>

<div class="early-alert-advisor-should-container">
<div class="alert-label-text">Advisor should:</div>
<div>Discuss academic challenges</div> </div>


</div>

<div class="early-alert-section-container font-13 alert-label-text">Note to Advisor:</div>
<div class="font-13">--</div>

<div class="early-alert-section-container font-13 alert-label-text">Resolved:</div>
<div class="font-13">2019-08-23</div>

<div class="early-alert-section-container font-13 alert-label-text">Private Comment:</div>
<div
class="font-13">--</div>

<div class="early-alert-section-container font-13 alert-label-text">Resolved by:</div>
<div
class="font-13">Szempruch, Doug</div>

<div class="early-alert-section-container font-13 alert-label-text">Resolution Comment:</div>
<div
class="font-13">--</div>
</div>
</body>
</html>
wangp
Seems fine to me (see attachment). The web server hosting the images does not seem very responsive, though.
  1. t4336.pdf‎ 43.4 kB
jagtapbhushan11@gmail.com
In our local server it is displaying but not on prod and staging server.
Later i Found that,
prod and stage is on Prince 8.0
and
local is on prince 11.3

Can this be issue for loading the svg/png images.
mikeday
Yes I would suggest upgrading to check.