Develop Reference

razor page CSS is not working isolated, only with the style tag at the top

The question is almost self-explanatory. I have the razor component "board.razor" and it also has a "board.razor.css" which contains all the styles for that page. If I do it like that, then the styles won't get applied. If I insert the style classes on the top of the "board.razor", everything works like it should. I'll provide the code and the pictures for you.
Board.razor with style tag at top:
<style>
.dropzone {
padding: 10px;
background: #e2eaf2;
list-style: none;
height: 100%;
min-width: 50%;
}
.no-drop {
border: 2px dashed red;
background-color: #e6d8d8;
}
.can-drop {
border: 2px dashed green;
background-color: #d8e6d8;
}
.draggable {
box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.2);
margin-bottom: -8px;
padding: 10px;
cursor: move;
background: #fff;
color: #000;
border-radius: 3px;
max-width: 500px;
}
.draggable:active {
cursor: move;
background: #f1f8ff;
}
.draggable:hover {
cursor: move;
background: #f1f8ff;
}
h6 {
position: -webkit-sticky;
position: sticky;
top: 0;
}
.dragging {
cursor: move;
}
.description {
font-size: 14px;
}
.sum {
font-size: 17px;
word-wrap: break-word;
color: midnightblue;
font-weight: bold;
}
.last-updated {
margin-bottom: 0;
font-size: 11px;
color: #474747;
font-weight: bold;
}
.last-updated small {
text-transform: uppercase;
color: #474747;
font-size: 11px;
}
h6 {
width: 100%;
height: auto;
}
.scrollbar {
top: 0;
bottom: 0;
overflow: hidden;
overflow-y: auto;
}
.status-details[open] {
transition: height 3s;
}
.status-details-summary {
padding: 1px 0px 1px 8px;
position: sticky;
top: 3rem;
bottom: 0;
z-index: 20;
font-size: 12px;
background-color: white;
}
.status-container {
display: flex;
}
.status-list {
display: flex;
flex-direction: column;
padding: 5px;
width: 100%;
}
.status-header {
display: flex;
position: sticky;
top: 0;
background-color: white;
z-index: 21;
}
.status-header-item {
font-weight: bold;
margin: 5px;
margin-bottom: -5px;
padding: 10px;
background: #e2eaf2;
flex-direction: column;
display: flex;
width: 100%;
}
#bsettings {
text-decoration: none;
color: inherit;
cursor: default;
display: block;
}
<NavBar OnIssueCreated="LoadIssues"></NavBar>
<div class="bodyContainer">
#if (changeMenuShow)
{
<h3 style="padding-left:5px"><b>Aktive Sprints</b></h3>
}
#*<FilterBar AllIssues="issues"></FilterBar>*#
<div class="dropdown">
<button class="btn btn-blue" style=" float: right; height: 38px; width: 41px; margin-left: 10px" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
<i class="oi oi-cog"></i>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<li class="dropdown-item">Board Einstellungen(unfertig)</li>
#*<li class="dropdown-item" #onclick="ModalShow">Board erstellen</li>*#
#if (changeMenuShow)
{
<li class="dropdown-item" #onclick="MenuShow">Menüs ausblenden</li>
}
else if (!changeMenuShow)
{
<li class="dropdown-item" #onclick="MenuShow">Menüs einblenden</li>
}
#if (dialogType.Equals(EditDialogType.Sidebar))
{
<li class="dropdown-item" #onclick="DialogToModal">Vorgänge im Dialogfeld öffnen</li>
}
else if (dialogType.Equals(EditDialogType.Modal))
{
<li class="dropdown-item" #onclick="DialogToSidebar">Vorgänge in der Seitenleiste öffnen</li>
}
</ul>
</div>
#if (activeSprint != null)
{
<div style="float: right; margin-left: 10px ">
<button style="height: 38px;" class="btn btn-blue" #onclick="Complete">Sprint abschließen</button>
</div>
}
<div class="custom-control custom-switch" style="display: inline; float: left; margin-top: 8px; margin-left: 10px">
<input type="checkbox" class="custom-control-input" id="addMorebox" #bind="ShowOpenForToday" />
<label class="custom-control-label" for="addMorebox">Heute zu erledigen anzeigen</label>
</div>
<div class="custom-control custom-switch" style="display: inline; float: left; margin-top:8px; margin-left: 10px;">
<input type="checkbox" class="custom-control-input" id="addWaitReply" #bind="showWaitForReply" />
<label class="custom-control-label" for="addWaitReply">Warte auf Rückmeldung anzeigen</label>
</div>
<br />
<br />
<br />
<IssueDialogOpener DialogType="dialogType">
<div class="scrollbar" style="height: 70vh; ">
<header class="status-header">
<div class="status-header-item">Zu Erledigen</div>
#if (ShowOpenForToday)
{
<div class="status-header-item">Heute zu Erledigen</div>
}
#if (showWaitForReply)
{
<div class="status-header-item" style="display: inline;">Warte auf Rückmeldung</div>
}
<div class="status-header-item">In Arbeit</div>
<div class="status-header-item">Fertig</div>
</header>
<div>
#if (parentIssues.Count > 0)
{
#foreach (var issue in parentIssues)
{
<SubtaskStatusContainer Issue="issue" ShowOpenForToday="#ShowOpenForToday" showWaitForReply="#showWaitForReply" OnChange="LoadIssues"></SubtaskStatusContainer>
}
#if (issues.Count != 0)
{
<StatusContainer Issues="#issues" ShowOpenForToday="#ShowOpenForToday" showWaitForReply="#showWaitForReply" OnChange="LoadIssues"></StatusContainer>
}
}
else if (issues.Count != 0)
{
<StatusContainer IsWithoutSubtasks=true Issues="#issues" ShowOpenForToday="#ShowOpenForToday" showWaitForReply="#showWaitForReply" OnChange="LoadIssues"></StatusContainer>
}
</div>
</div>
</IssueDialogOpener>
</div>
How it looks:
How it looks with styles isolated in the board.razor.css:

For CSS from an Isolated css file to work in a sub component you need to use the ::deep operator. DOCS

Push all styles back to Board.razor.css file
If your application is server-side then make sure if you have this line in your _Layout.cshtml
And if your application is Web Assembly then make sure this line is in your index.html file
<head>
<link href="yourprojectname.styles.css" rel="stylesheet" />
</head>

asp.net webforms with js

How do you use a normal js script with normal html code in a webform? I have this code below but when it runs the div tags display on the page for two seconds then they disappear. When checking the elements i see that the div tag is being assigned the class aspNetHidden. How can i fix this?
HTML code:
<div class="slideshow-container">
<!-- Full-width images with number and caption text -->
<div class="mySlides fade">
<div class="numbertext">1 / 9</div>
<img src="Images/slide1.png" style="width:100%">
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 9</div>
<img src="Images/slide2.png" style="width:100%">
</div>
<div class="mySlides fade">
<div class="numbertext">3 / 9</div>
<img src="Images/slide3.png" style="width:100%">
</div>
<div class="mySlides fade">
<div class="numbertext">4 / 9</div>
<img src="Images/slide4.png" style="width:100%">
</div>
<div class="mySlides fade">
<div class="numbertext">5 / 9</div>
<img src="Images/slide5.png" style="width:100%">
</div>
<div class="mySlides fade">
<div class="numbertext">6 / 9</div>
<img src="Images/slide6.png" style="width:100%">
</div>
<div class="mySlides fade">
<div class="numbertext">7 / 9</div>
<img src="Images/slide7.png" style="width:100%">
</div>
<div class="mySlides fade">
<div class="numbertext">8 / 9</div>
<img src="Images/slide8.png" style="width:100%">
</div>
<div class="mySlides fade">
<div class="numbertext">9 / 9</div>
<img src="Images/slide9.png" style="width:100%">
</div>
js Code:
<script type="text/javascript">
var slideIndex = 1;
showSlides(slideIndex);
// Next/previous controls
function plusSlides(n) {
showSlides(slideIndex += n);
}
// Thumbnail image controls
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
}
</script>
If relevant, the css code:
<style>
* {box-sizing:border-box}
/* Slideshow container */
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}
/* Hide the images by default */
.mySlides {
display: none;
}
/* Next & previous buttons */
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
margin-top: -22px;
padding: 16px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
background-color: rgba(0,0,0,0.8);
}
/* Caption text */
.text {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
/* The dots/bullets/indicators */
.dot {
cursor: pointer;
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active, .dot:hover {
background-color: #717171;
}
/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
#-webkit-keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
#keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
</style>

You can add your code segments within the content tags, I just tried and it worked. refer the code below. Simply you can create a new web application with site.master files and you can add your code segments in the aspx file
<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
<div class="slideshow-container">
<!-- Full-width images with number and caption text -->
<div class="mySlides fade">
<div class="numbertext">1 / 9</div>
<img src="Images/slide1.png" style="width: 100%">
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 9</div>
<img src="Images/slide2.png" style="width: 100%">
</div>
<div class="mySlides fade">
<div class="numbertext">3 / 9</div>
<img src="Images/slide3.png" style="width: 100%">
</div>
<div class="mySlides fade">
<div class="numbertext">4 / 9</div>
<img src="Images/slide4.png" style="width: 100%">
</div>
<div class="mySlides fade">
<div class="numbertext">5 / 9</div>
<img src="Images/slide5.png" style="width: 100%">
</div>
<div class="mySlides fade">
<div class="numbertext">6 / 9</div>
<img src="Images/slide6.png" style="width: 100%">
</div>
<div class="mySlides fade">
<div class="numbertext">7 / 9</div>
<img src="Images/slide7.png" style="width: 100%">
</div>
<div class="mySlides fade">
<div class="numbertext">8 / 9</div>
<img src="Images/slide8.png" style="width: 100%">
</div>
<div class="mySlides fade">
<div class="numbertext">9 / 9</div>
<img src="Images/slide9.png" style="width: 100%">
</div>
</div>
<script type="text/javascript">
var slideIndex = 1;
showSlides(slideIndex);
// Next/previous controls
function plusSlides(n) {
showSlides(slideIndex += n);
}
// Thumbnail image controls
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
if (n > slides.length) { slideIndex = 1 }
if (n < 1) { slideIndex = slides.length }
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex - 1].style.display = "block";
dots[slideIndex - 1].className += " active";
}
</script>
<style>
* {
box-sizing: border-box;
}
/* Slideshow container */
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}
/* Hide the images by default */
.mySlides {
display: none;
}
/* Next & previous buttons */
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
margin-top: -22px;
padding: 16px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
background-color: rgba(0,0,0,0.8);
}
/* Caption text */
.text {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
/* The dots/bullets/indicators */
.dot {
cursor: pointer;
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active, .dot:hover {
background-color: #717171;
}
/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
#-webkit-keyframes fade {
from {
opacity: .4;
}
to {
opacity: 1;
}
}
#keyframes fade {
from {
opacity: .4;
}
to {
opacity: 1;
}
}
</style>

Okay so it turns out it was just a css error, the fade was kicking in before the code could run. just remove fade from all the tags and it works.

CSS Textarea Not Filling Parent

I am having issues getting a text area to fill a parent div. I have found solutions involving setting the box-sizing to border-box, but this is not working for me. Any help would be much appreciated!
<div class="flx-modal">
<div class="flx-label">
<label for="CorrectiveActionSteps">Time Line:</label>
</div>
<div class="flx-txtarea">
#Html.TextAreaFor(a => a.TimeLine, new { #class = "form-control textarea" })
</div>
</div>
css:
.flx-modal{
display: flex;
width: 100%;
margin-bottom: 15px;
}
div.flx-txtarea {
background-color: red;
flex: 1;
margin-left: 15px;
padding: 0;
}
.flx-txtarea > textarea {
width: 100%;
height: 100%;
-webkit-box-sizing: border-box; /* <=iOS4, <= Android 2.3 */
box-sizing: border-box; /* Chrome, IE8, Opera, Safari 5.1*/
-moz-box-sizing: border-box !important; /* FF1+ */
}

If you add flex-direction: column, change flex: 1 to width: 100% and remove the margin-left: 15px, you get this
.flx-modal{
display: flex;
flex-direction: column;
width: 100%;
margin-bottom: 15px;
}
div.flx-txtarea {
background-color: red;
width: 100%;
padding: 0;
}
.flx-txtarea > textarea {
width: 100%;
height: 100%;
-webkit-box-sizing: border-box; /* <=iOS4, <= Android 2.3 */
-moz-box-sizing: border-box !important; /* FF1+ */
box-sizing: border-box; /* Chrome, IE8, Opera, Safari 5.1*/
}
<div class="flx-modal">
<div class="flx-label">
<label for="CorrectiveActionSteps">Time Line:</label>
</div>
<div class="flx-txtarea">
<textarea class="form-control textarea"></textarea>
</div>
</div>
You can also add flex-wrap: wrap;, remove margin-left: 15px and add this rule
div.flx-label {
width: 100%;
}
.flx-modal{
display: flex;
flex-wrap: wrap;
width: 100%;
margin-bottom: 15px;
}
div.flx-label {
width: 100%;
}
div.flx-txtarea {
background-color: red;
flex: 1;
padding: 0;
}
.flx-txtarea > textarea {
width: 100%;
height: 100%;
-webkit-box-sizing: border-box; /* <=iOS4, <= Android 2.3 */
-moz-box-sizing: border-box !important; /* FF1+ */
box-sizing: border-box; /* Chrome, IE8, Opera, Safari 5.1*/
}
<div class="flx-modal">
<div class="flx-label">
<label for="CorrectiveActionSteps">Time Line:</label>
</div>
<div class="flx-txtarea">
<textarea class="form-control textarea"></textarea>
</div>
</div>

3 Flexible divs inside a flexible parent div

I am trying to get 3 flexible images to line up horizontally and stay within the confines of their flexible div container which has a flexible background,
the background of the container and the 3 images should all stay in relation to each other positionally so they are always on top of each other. they should get larger and smaller with the size of the browser window but not exceed 800 px in width.
The problem I am having is the background and footer slam to the left and the button divs go right.
My JSFIDDLE
HTML:
<div id="container">
<div id="footer">
<div id="left">
<input type="image" name="MyLeftButton" id="MyLeftButton" class="imgstretch" src="Images/MyLeftImage.png" style="border-width:0px;">
</div>
<div id="middle">
<input type="image" name="MyMiddleButton" id="MyMiddleButton" class="imgstretch" src="Images/MyMiddleImage.png" style="border-width:0px;">
</div>
<div id="right">
<input type="image" name="MyRightButton" id="MyRightButton" class="imgstretch" src="Images/MyRightImage.png" style="border-width:0px;">
</div>
</div>
</div>
CSS:
#container {
margin: 0em auto 0em auto;
width: 100%;
max-width: 800px;
}
#footer {
width: 100%;
max-width: 800px;
max-height: 80px;
float: left;
text-align: center;
position: fixed;
bottom: 0em;
background-color: #009FC1;
}
#left {
float: left;
max-height: 80px;
max-width: 294px;
width: 36%;
margin-left: 20px;
display: inline-block;
background-color: #CCCCCC;
}
#middle {
max-height: 80px;
width: 25%;
float: left;
max-width: 202px;
display: inline-block;
background-color: #889FC1;
}
#right {
max-height: 80px;
max-width: 294px;
width: 36%;
float: left;
display: inline-block;
background-color: #9999DD;
}
.imgstretch {
width:100%;
}

You have a couple of things going on.
1) Footer is set to fixed position, which makes it ignore the parent element and fix itself to the window. I don't know if this is an issue for your layout, but something to note.
2) You have inline styles set on elements that you already have a defined class for. Seems unnecessary.
3) Your dimension calculations are WAY off in relation to your % and px. 36% should be (0.36 * 800) which would come out as 288px, not 294px, and THEN plus a 20px margin.
I've forked your fiddle. http://jsfiddle.net/ZBJPF/8/
html {
margin: 0;
padding: 0;
}
body {
margin: 0;
padding: 0;
}
#container {
margin: 0 auto;
width: 100%;
max-width: 800px;
}
#footer {
width: 100%;
max-width: 780px;
max-height: 80px;
margin: 0 auto;
padding-left: 20px;
text-align: center;
position: fixed;
bottom: 0;
background-color: #009FC1;
}
.footer-element-lg {
float: left;
width: 36%;
max-width: 280px;
position: relative;
}
.footer-element-sm {
float: left;
width: 28%;
max-width: 220px;
position: relative;
}
#left {
background-color: #CCCCCC;
}
#middle {
background-color: #889FC1;
}
#right {
background-color: #9999DD;
}
.imgstretch {
width:100%;
border: none;
}
<div id="container">
<div id="footer">
<div id="left" class="footer-element-lg">
<input type="image" name="MyLeftButton" id="MyLeftButton" class="imgstretch" src="Images/MyLeftImage.png">
</div>
<div id="middle" class="footer-element-sm">
<input type="image" name="MyMiddleButton" id="MyMiddleButton" class="imgstretch" src="Images/MyMiddleImage.png">
</div>
<div id="right" class="footer-element-lg">
<input type="image" name="MyRightButton" id="MyRightButton" class="imgstretch" src="Images/MyRightImage.png">
</div>
</div>
</div>
I removed a 20px margin and made the spacing as a 20px padding for continuity sake.

Convert from html string to pdf using itextsharp in asp.net

I'm using iTextSharp in my project and using this method to parse html string to pdf
public static MemoryStream MakePdf(string htmlCode)
{
MemoryStream msOutput = new MemoryStream();
TextReader reader = new StringReader(htmlCode);
Document document = new Document(PageSize.A4, 30, 30, 30, 30);
PdfWriter writer = PdfWriter.GetInstance(document, msOutput);
HTMLWorker worker = new HTMLWorker(document);
document.Open();
worker.StartDocument();
worker.Parse(reader); // EXCEPTION IN THIS LINE!!!!
worker.EndDocument();
worker.Close();
document.Close();
return msOutput;
}
And it doesn't work for me. It throws an exception at selected line
URI formats are not supported.
How can I solve this problem?
P.S. Here is html I need to parse
<!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" />
<meta name="author" content="Boomer" />
<style type="text/css">
body
{
font: 12px/18px Arial, Tahoma, Verdana, sans-serif;
width: 100%;
font-family: Myriad Pro;
font-style: italic;
background: #f3f3f3;
}
#font-face
{
font-family: 'Myriad Pro';
src: url('../fonts/myriadpro.eot');
src: url('../fonts/myriadpro.eot?#iefix') format('embedded-opentype'),
url('../fonts/myriadpro.woff') format('woff'),
url('../fonts/myriadpro.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
.clear
{
clear: both;
}
a,.blue_text
{
color:#2aa2f6;
text-decoration: none;
}
a:hover
{
text-decoration: underline;
}
.simple_title
{
font-size: 22px;
}
.text750
{
width: 750px;
margin: 20px 0;
}
.full_width_text
{
margin-right: 35px;
text-align: justify;
}
.grey_text
{
color:#afafaf;
}
.email_page
{
width: 1025px;
margin: 20px auto;
background: #fff;
padding: 20px 0;
}
.email_page p
{
font-size: 18px;
}
.email_div
{
margin: 0 auto;
background: #fff;
width: 998px;
border: 1px solid #ebebeb;
border-radius: 10px;
-webkit-border-radius:10px;
-border-radius:10px;
-moz-border-radius:10px;
-o-border-radius:10px;
display: table;
}
.email_content
{
margin-left: 60px;
margin-top: 40px;
}
.email_logo
{
float: left;
}
.email_title
{
float: left;
margin-left: 130px;
font-size: 22px;
color:#f7941d;
margin-top: 50px;
}
.email_img_container
{
float: right;
width: 270px;
}
.email_img_container .text_description
{
font-size: 18px;
color:#000000;
margin-bottom: 15px;
}
.email_img_container img
{
border: 1px solid #ebebeb;
border-radius: 10px;
-webkit-border-radius:10px;
-border-radius:10px;
-moz-border-radius:10px;
-o-border-radius:10px;
}
.text600
{
width: 600px;
float: left;
}
</style>
<title>Voucher</title>
</head>
<body>
<div class="email_page">
<div class="email_div">
<div class="email_content">
<div class="text600">
<div class="email_logo">
<a href="#">
<img src="{EmailLogo}" />
</a>
</div>
<div class="email_title">
Instant Gift Certificate
</div>
<div class="clear"></div>
<div>
<p>To: <span class="blue_text">{RecipientName}</span></p>
<p>
<div>{GiftVoucherName}</div>
<div>{GiftVoucherDescription}</div>
</p>
<p>
This gift is from: <span class="blue_text">{SenderName}</span>
</p>
</div>
</div>
<div class="email_img_container">
<div class="text_description">
<div>SG Code: {SGCode}</div>
<div>Purchased on: {PurchaseDate}</div>
</div>
<img src="{MerchantImage}" alt="" />
</div>
<div class="clear"></div>
<div class="text750">
<p>
This gift must be redeemed by: <span class="blue_text">{Date}</span><br />
Redeemable at the following locations: <span class="blue_text">{Locations}</span><br />
For other details and terms and conditions, please see the other attachment.
</p>
<div class="simple_title">
Disclaimer
</div>
<p>
Test.com is not responsible for the content of the message or the selection of the gift by the sender.
Once the sender enters the information, the instant gift is automatically generated and sent to
the recipient.
</p>
<p>
Visit us at: www.Test.com
</p>
</div>
</div>
</div>
</div>
</body>
</html>

To solve this issue you can add Providers to your HTMLWorker using the SetProviders method which takes an IDictionary the HTMLWorker class has constants for the string keys. In your case have a look at the ILinkProvider and/or IImageProvider. These provide a way to handle the images and URLs inside of your HTML yourself, translating them into usable parts for the PDF.