Old School HTML help needed...

Question

stymied2 0 Newbie Poster

16 Years Ago

I need to recreate the attached image in HTML so that it can be converted into a PDF dymanically using software that the client has.

I created a gif with a triangle-shaped transparency which lets the varying sizes of green, yellow, and red bars show through underneath. The bars vary in size based on survey results.

This technique worked great when using CSS to easily position the image layer on top of the three color rows but alas, I've been told this has to be done strictly in old school HTML (no CSS) because the PDF rendering software cannot handle CSS.

So, I finally get to my question...Is there any way to layer the transparent gif over the three rows using HTML with no CSS? The rows need to be table rows filled with color because they must change in height depending on the scores so I can't just create a single image out of them and stick them in the backround.

Any suggestions (that don't involve my mother and farm animals) are welcome.

Thanks!

html-css user-interface

4 Contributors
11 Replies
109 Views
1 Day Discussion Span
Latest Post 16 Years Ago Latest Post by stymied2

Dani AI

Generated 10 Months Ago

Short answer: you cannot reliably “stack” an image over separate table rows using only plain HTML. Stacking and absolute placement are provided by CSS (position/z-order), so without CSS or JavaScript there is no standard, portable way to place an overlay that spans and sits above independent rows (as pointed out; see MDN on CSS position).

Two practical approaches that work with CSS‑free pdf converters:

Server-side compose a single image that already contains the three variable-height bars plus the triangular overlay, then insert that one image in the HTML/PDF. This is the most robust route when the converter will not honor any CSS. Tools like ImageMagick or GD can draw rectangles at runtime and composite the transparent triangle on top. Quick ImageMagick example:

convert -size 1000x145 xc:none \
  -fill "#741F18" -draw "rectangle 0,0 1000,20" \
  -fill "#E0C039" -draw "rectangle 0,20 1000,50" \
  -fill "#547741" -draw "rectangle 0,50 1000,145" bars.png

convert bars.png triangle.png -composite final.png

(see ImageMagick docs for details: https://imagemagick.org/)

If you can change the PDF pipeline, use a converter that supports CSS/SVG and absolute positioning. Then the HTML overlay approach becomes straightforward. Tools such as wkhtmltopdf or XML/HTML-to-PDF engines that support SVG/CSS will preserve your positioning and transparency.

Quick practical tips: test whether your converter preserves PNG alpha (some convertors drop alpha and require flattened images); confirm target page width/DPI before generating the image; prefer server-side generation when the layout must be exact. ’s online test shows the idea works when the converter supports CSS; if that support is not available on your client’s server, server-side image composition is the safest, most portable solution.

All 11 Replies

Troy III 272 Posting Pro

16 Years Ago

I need to recreate the attached image in HTML so that it can be converted into a PDF dymanically using software that the client has.
I created a gif with a triangle-shaped transparency which lets the varying sizes of green, yellow, and red bars show through underneath. The bars vary in size based on survey results.
This technique worked great when using CSS to easily position the image layer on top of the three color rows but alas, I've been told this has to be done strictly in old school HTML (no CSS) because the PDF rendering software cannot handle CSS.
So, I finally get to my question...Is there any way to layer the transparent gif over the three rows using HTML with no CSS? The rows need to be table rows filled with color because they must change in height depending on the scores so I can't just create a single image out of them and stick them in the backround.
Any suggestions (that don't involve my mother and farm animals) are welcome.
Thanks!

Can you post your existing page code so we can judge if there is a possibility to emulate it?

Airshow 416 WiFi Lounge Lizard

16 Years Ago

Stymied,

Are you aware that with style="...." , you are using CSS?

If you need to avoid CSS completely (I'm not so sure whether you need to or not) then you would need to avoid inline style directives.

Airshow

Airshow 416 WiFi Lounge Lizard

16 Years Ago

OK, just making sure.

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

stymied2 0 Newbie Poster · Answer 1 · 2009-10-05T23:08:39+00:00

Can you post your existing page code so we can judge if there is a possibility to emulate it?

I was still in sort of testing mode but here's the look that I going after...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>sample</title>
</head>
<body>
<table style="width:1000px;text-align:center" border="0" cellpadding="0" cellspacing="0" align="center">
<tr>
<td style="background-color:#547741;height:145px;width:1000px" align="center"><div style="position:absolute"><img src="triangle.gif" alt="" width="1000" height="145" /></div>
<table cellpadding="0" cellspacing="0" border="0">
<tr><td style="background-color:#741F18;width:1000px;height:20px"></td></tr>
<tr><td style="background-color:#E0C039;width:1000px;height:30px"></td></tr>
<tr><td style="background-color:#547741;width:1000px;height:95px"><div style="font-family:Arial, Helvetica, sans-serif;font-size:20px;color:#ffffff;text-align:center">Engagement 78.1</div></td></tr>
</table>
</td>		
</tr>
</table>
</body>
</html>

stymied2 0 Newbie Poster · Answer 2 · 2009-10-06T00:11:14+00:00

Stymied,
Are you aware that with style="...." , you are using CSS?
If you need to avoid CSS completely (I'm not so sure whether you need to or not) then you would need to avoid inline style directives.
Airshow

Right. If I could use CSS I'd be done. What I need to do is recreate the look of the example code without CSS. I just posted that in response to a request.

Troy III 272 Posting Pro · Answer 3 · 2009-10-06T04:45:29+00:00

I was still in sort of testing mode but here's the look that I going after...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>sample</title>
</head>
<body>
<table style="width:1000px;text-align:center" border="0" cellpadding="0" cellspacing="0" align="center">
<tr>
<td style="background-color:#547741;height:145px;width:1000px" align="center"><div style="position:absolute"><img src="triangle.gif" alt="" width="1000" height="145" /></div>
<table cellpadding="0" cellspacing="0" border="0">
<tr><td style="background-color:#741F18;width:1000px;height:20px"></td></tr>
<tr><td style="background-color:#E0C039;width:1000px;height:30px"></td></tr>
<tr><td style="background-color:#547741;width:1000px;height:95px"><div style="font-family:Arial, Helvetica, sans-serif;font-size:20px;color:#ffffff;text-align:center">Engagement 78.1</div></td></tr>
</table>
</td>		
</tr>
</table>
</body>
</html>

Here

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>sample</title>
</head>
      <body>
      <table width="1000" border="0" cellpadding="0" cellspacing="0" align="center">
<tr>
   <td bgcolor="#547741" height="145" width="1000" align="center"><div style="position:absolute"><img src="triangle.gif" alt="" width="1000" height="145" /></div>
   <table cellpadding="0" cellspacing="0" border="0">
   <tr><td bgcolor="#741F18" width="1000" height="20"></td></tr>
   <tr><td bgcolor="#E0C039" width="1000" height="30px"></td></tr>
   <tr><td bgcolor="#547741" width="1000" height="95"><div color="#ffffff" align="center"><font face="Arial, Helvetica, sans-serif" color="white" size="4" onclick="alert(window.getComputedStyle(this,null).fontSize)">Engagement 78.1</font></div></td></tr>
</table>
 </td>
  </tr>
</table>
</body>
</html>

this code is as primitive as it can get. I can't think of an absolute positioning emulator back than, so the overlaying of the image is impossible without style...

But!

I've just tested this code in this html to pdf creator and IT WORKS.
The only problem is the width you've given 1000px to it, and happen to use use a page format that is not wider than 800px.

almostbob 866 Retired: passive income ROCKS · Answer 4 · 2009-10-06T05:16:09+00:00

I just tried the html to pdf on the link provided

xhtml strict
css3
reproduced the page perfectly

perhaps the probem is the type of conversion chosen
direct entered code rather than url

stymied2 0 Newbie Poster · Answer 5 · 2009-10-06T05:53:15+00:00

Here

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>sample</title>
</head>
      <body>
      <table width="1000" border="0" cellpadding="0" cellspacing="0" align="center">
<tr>
   <td bgcolor="#547741" height="145" width="1000" align="center"><div style="position:absolute"><img src="triangle.gif" alt="" width="1000" height="145" /></div>
   <table cellpadding="0" cellspacing="0" border="0">
   <tr><td bgcolor="#741F18" width="1000" height="20"></td></tr>
   <tr><td bgcolor="#E0C039" width="1000" height="30px"></td></tr>
   <tr><td bgcolor="#547741" width="1000" height="95"><div color="#ffffff" align="center"><font face="Arial, Helvetica, sans-serif" color="white" size="4" onclick="alert(window.getComputedStyle(this,null).fontSize)">Engagement 78.1</font></div></td></tr>
</table>
 </td>
  </tr>
</table>
</body>
</html>

this code is as primitive as it can get. I can't think of an absolute positioning emulator back than, so the overlaying of the image is impossible without style...

But!

I've just tested this code in this html to pdf creator and IT WORKS.
The only problem is the width you've given 1000px to it, and happen to use use a page format that is not wider than 800px.

The thing is, they use a specific pdf converter that is installed on their servers and works with their whole system. The thing won't accept any CSS at all so that's where it becomes, shall we say, challenging? I find myself doing all kinds of stuff using tables and such that a few simple div tags could handle. They are converting to a PDF system that accepts CSS but it's not ready for prime time quite yet.

almostbob 866 Retired: passive income ROCKS · Answer 6 · 2009-10-06T10:02:15+00:00

sorry misunderstood, thought they were using the web service

Troy III 272 Posting Pro · Answer 7 · 2009-10-06T15:13:17+00:00

The thing is, they use a specific pdf converter that is installed on their servers and works with their whole system. The thing won't accept any CSS at all so that's where it becomes, shall we say, challenging? I find myself doing all kinds of stuff using tables and such that a few simple div tags could handle. They are converting to a PDF system that accepts CSS but it's not ready for prime time quite yet.

You've asked about old school code, here it is. Atop of it, I even took my time and tested it against a good online converter and gave you other (to this forum section unrelated) information on where can you get your html converted into a correct pdf format. Almostbob, assured you that not only can it convert old time code correctly but xhtml strict using CSS3 too.

So I must add: there is one thing I can't do from here - I can't choose nor install a correct pdf converter on your system from here.

Regards.

stymied2 0 Newbie Poster · Answer 8 · 2009-10-07T02:34:39+00:00

You've asked about old school code, here it is. Atop of it, I even took my time and tested it against a good online converter and gave you other (to this forum section unrelated) information on where can you get your html converted into a correct pdf format. Almostbob, assured you that not only can it convert old time code correctly but xhtml strict using CSS3 too.
So I must add: there is one thing I can't do from here - I can't choose nor install a correct pdf converter on your system from here.
Regards.

Thanks man, I truly appreciate the effort. As I stated from the beginning, I can't use any CSS on this one so I was wondering if anyone was aware of a way to accomplish the layering technique using the technology of a bygone era; no CSS, no JavaScript, etc.

Old School HTML help needed...

Dani AI

Recommended Answers Collapse Answers

All 11 Replies

Recommended Answers