Two of the most important rules to remember in designing a web page are:
1. Know you user agent, it's capabilities, and it's quirks. Not all browsers and other rendering applications will render HTML the same way, and they don't all support all available HTML/XHTML versions. 20 years ago when everyone was pushing Netscape there were things that IE got right but Navigator boinked.
2. Use valid markup When the HTML/XHTML is invalid, you don't know how what the effect will be when it is rendered; this is called
quirks mode. And with respect to Rule #1, the different user-agents will render the same error differently. Just about every browser since Firefox 3.x will improperly close broken HTML comment tags.
As for your problem, it could be a combination of the 2 above rules; as your
img
element will be invalid:
"<td align=\"left\">" + @"<img src=\"http:
should become
<td align="left"><img src=\"http://localhost/img/image1.jpg\" width=\"520\"></img></td>
Which is incorrect, it is an
empty element meaning there is no closing tag
and it has some slashes in it which don't belong.
Try using this
@"<td align=""left""><img src=""http://localhost/img/image1.jpg"" width=""520"" /></td>"
Notice the coloring doesn't change in the C# blocks as I wrapped the entire line with
@, got rid of the slashes, and< made all of the double-quotes into 2-double-quotes.
What you can do if fixing your html to be 100% perfect is to experiment. Try making the image you want in the table be the background for the table or cell you want it is. Or try something else.
You may also want to try looking into iTextPDF and it's HTML capabilities/quirks:
Book page : Does my HTML have to be valid XML?[
^]