Old School HTML help needed...

Question

stymied2 0 Newbie Poster

15 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 web-design

4 Contributors
11 Replies
87 Views
1 Day Discussion Span
Latest Post 15 Years Ago Latest Post by stymied2

Troy III 272 Posting Pro

15 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

15 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

15 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.
check it out!

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.
check it out!

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.