CSS not used while rendering an image

May 8, 2014 at 7:57 AM
Hi,

First of all, thank you so much for this piece of software, it already saved me tons of work!
I have a issue while rendering an image from an html snippet. Below is the code that generates the image.
string barHTML = GetBarHTML(actionID, homepointID, actionScope);
System.Drawing.Image image = HtmlRender.RenderToImage(barHTML);
iTextSharp.text.Image sharpImage = iTextSharp.text.Image.GetInstance(image, System.Drawing.Imaging.ImageFormat.Png);
return sharpImage;
The html that is rendered is valid html and gives me the result in Google Chrome that I'm looking for. However the image that is generated doesn't show any css rendered div's which compose an bar-graph. I've tried to link to an external CSS stylesheet in the html snippet and putting all of the css between <style>-tags but both didn't gave me the result I was hoping to see.

Html snippet:
<html>
  <head>
    <link rel='stylesheet' href='<link to CSS 1>' type='text/cs' />
    <link rel='stylesheet' href='<link to CSS 2>' type='text/cs' />
  </head>
</body>
<div class='action clearfix' style='width:1600px; margin: 0px; padding: 0px; margin-left: 0px;'>
  <div class='actionInfo' style='margin-left: -80px;' >
    <div class='rides'>
      <div class='rideInfo'>
        <strong>
          bar title
        </strong>
        <span style='width: 256px; right:-251px;'>
        </span>
      </div>
    </div>
    <div class='actionGraph' style='width: 800px;'>
        <a class='actionBar begin' href='javascript:void(0);' style='left: 77px;'>
            <span></span>
        </a>
        <a class='actionBar startLimit' href='javascript:void(0);' style='left: 385px;'>
            <span></span>
        </a>
        <a class='actionBar end' href='javascript:void(0);' style='left: 1100px;'>
            <span></span>
        </a>
        <div class='rides'>
            <div class='rideContainer clearfix' style='width: 918px; left: 251px;'>               
                <div class='road begin'></div>
                <div class='road middle' style='width: 898px;'></div>
                <div class='road end'></div>
                <a class='ride begin' href='javascript:void(0);' style='left: -18px;'></a>
                <a class='ride start' href='javascript:void(0);' style='left: -8px;'></a>
                <a class='ride stop' href='javascript:void(0);' style='left: 828px;'></a>
                <a class='ride end' href='javascript:void(0);' style='left: 900px;'></a>
            </div>
        </div>
    </div>
   </div>
</body>
</html>
And the CSS that is inserted
/* action graph */
.action { margin: 15px 0; padding: 15px; border: 0px solid #FFF; margin-left:-50px; }
.actionInfo { float: left; position: relative; width: 15%; }
.rideInfo { position: relative; top: 5px; height: 23px; margin: 20px 0; padding: 0 10px 0 0; text-align: right; }
.rideInfo strong { padding: 0 0 0 5px; }
.rideInfo img { position: relative; top: -3px; }
.rideInfo span { position: absolute; top: 11px; height: 1px; background: #bbb; }
.actionGraph { float: left; position: relative; width: 85%; }
.actionBar { position: absolute; width: 15px; height: 100%; margin: 0 0 0 -7px; }
.actionBar span { display: block; width: 2px; height: 100%; margin: 0 auto; }
.actionBar.begin span { background: #0daf66; }
.actionBar.startLimit span { background: #e2b848; }
.actionBar.end span { background: #d74234; }
.rideContainer { position: relative; margin: 20px 0; }
.road { display: inline-block; float: left; height: 23px; }
.road.begin { width: 10px; background: url("<link to image>"); }
.road.middle { background: url("<link to image>"); }
.road.end { width: 10px; background: url("<link to image>"); }
.ride { display: block; position: absolute; width: 36px; height: 23px; }
.ride.begin { background: url("<link to image>"); }
.ride.end { background: url("<link to image>"); }
.ride.start { background: url("<link to image>"); }
.ride.stop { background: url("<link to image>"); }
Any idea why this might not work?
May 8, 2014 at 4:37 PM
The call to RenderToImage has an optional parameter of type CssData. Turn your stylesheet into a CssData object by calling the static CssData.Parse method and passing it the stylesheet (as a string). I have a couple of suggestions. I would remove all the inline styles and put all of the style information into the CssData object. That would make it much easier to debug. You might also want to start off with a simple stylesheet just to make sure you have everything set up properly.

Also, and this is probably unrelated to your real issue, but if you use the type attribute on a link element for a stylesheet, I'm pretty sure the values should be "text/css".
Developer
May 9, 2014 at 11:39 AM
Is the stylesheet is not loaded at all or is some of the styles do not work?
I see you have float/position styles, sorry but they are not currently supported.
If the issue is in loading of the stylesheet, can you provide a simple example including the value of the "href".
Thx.