...

View Full Version : Problem with underline and background-color



idvishal
07-11-2005, 12:16 PM
I am using the following style:
.ReportLevel {color:green; text-decoration:underline; background-color:yellow}

and my HTML output uses this style as:
<div style="top:112pt;left:139pt" class=ReportLevel>SALESMAN</div>
<div style="top:112pt;left:198pt;width:55.5;height:19.5;" class=ReportLevel></div>

When I have lot of rows like above in my HTML file, for some data underlines don't appear. I tried this in IE 6.0 and Netscape 7.1 and saw the same problem.

Is there any limitation in using background-color and text-decoration:underline together? Is there any work around?

Thanks.

zro@rtv
07-11-2005, 12:45 PM
can we see a link?

also does FF mess it up?

idvishal
07-11-2005, 12:56 PM
You can put the style in my previous post in the file style.css and here is the html file that uses it:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html dir="LTR">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title></title>
<style type="text/css">div{position:absolute;} </style>
<link rel="stylesheet" type="text/css" href="style%2ecss">
<link rel="stylesheet" type="text/css" href="cssunderline04168538.css">
</head>
<body bgcolor="#ffffff">

<div style="top:0pt;left:1pt;">
</div>
<div style="top:72pt;left:36pt;width:55.5;height:19.5;" class=ReportLevel></div>
<div style="top:72pt;left:36pt" class=ReportLevel>Empno</div>
<div style="top:72pt;left:76pt;width:85.5;height:19.5;" class=ReportLevel></div>
<div style="top:72pt;left:76pt" class=ReportLevel>Ename</div>
<div style="top:72pt;left:139pt;width:79.5;height:19.5;" class=ReportLevel></div>
<div style="top:72pt;left:139pt" class=ReportLevel>Job</div>
<div style="top:72pt;left:198pt;width:55.5;height:19.5;" class=ReportLevel></div>
<div style="top:72pt;left:198pt" class=ReportLevel>Mgr</div>
<div style="top:72pt;left:238pt;width:79.5;height:19.5;" class=ReportLevel></div>
<div style="top:72pt;left:238pt" class=ReportLevel>Hiredate</div>
<div style="top:72pt;left:297pt;width:79.5;height:19.5;" class=ReportLevel></div>
<div style="top:72pt;left:297pt" class=ReportLevel>Sal</div>
<div style="top:72pt;left:355pt;width:79.5;height:19.5;" class=ReportLevel></div>
<div style="top:72pt;left:355pt" class=ReportLevel>Comm</div>
<div style="top:72pt;left:414pt;width:55.5;height:19.5;" class=ReportLevel></div>
<div style="top:72pt;left:414pt" class=ReportLevel>Deptno</div>
<div style="top:85pt;left:36pt;width:55.5;height:19.5;" class=ReportLevel></div>
<div style="top:85pt;left:36pt" class=ReportLevel>7369</div>
<div style="top:85pt;left:76pt;width:85.5;height:19.5;" class=ReportLevel></div>
<div style="top:85pt;left:76pt" class=ReportLevel>SMITH</div>
<div style="top:85pt;left:139pt;width:79.5;height:19.5;" class=ReportLevel></div>
<div style="top:85pt;left:139pt" class=ReportLevel>CLERK</div>
<div style="top:85pt;left:198pt;width:55.5;height:19.5;" class=ReportLevel></div>
<div style="top:85pt;left:198pt" class=ReportLevel>7902</div>
<div style="top:85pt;left:238pt;width:79.5;height:19.5;" class=ReportLevel></div>
<div style="top:85pt;left:238pt" class=ReportLevel>17-DEC-80</div>
<div style="top:85pt;left:297pt;width:79.5;height:19.5;" class=ReportLevel></div>
<div style="top:85pt;left:297pt" class=ReportLevel>800</div>
<div style="top:85pt;left:355pt;width:79.5;height:19.5;" class=ReportLevel></div>
<div style="top:85pt;left:355pt" class=ReportLevel>&nbsp;</div>
<div style="top:85pt;left:414pt;width:55.5;height:19.5;" class=ReportLevel></div>
<div style="top:85pt;left:414pt" class=ReportLevel>20</div>
<div style="top:99pt;left:36pt;width:55.5;height:19.5;" class=ReportLevel></div>
<div style="top:99pt;left:36pt" class=ReportLevel>7499</div>
<div style="top:99pt;left:76pt;width:85.5;height:19.5;" class=ReportLevel></div>
<div style="top:99pt;left:76pt" class=ReportLevel>ALLEN</div>
<div style="top:99pt;left:139pt;width:79.5;height:19.5;" class=ReportLevel></div>
<div style="top:99pt;left:139pt" class=ReportLevel>SALESMAN</div>
<div style="top:99pt;left:198pt;width:55.5;height:19.5;" class=ReportLevel></div>
<div style="top:99pt;left:198pt" class=ReportLevel>7698</div>
<div style="top:99pt;left:238pt;width:79.5;height:19.5;" class=ReportLevel></div>
<div style="top:99pt;left:238pt" class=ReportLevel>20-FEB-81</div>
<div style="top:99pt;left:297pt;width:79.5;height:19.5;" class=ReportLevel></div>
<div style="top:99pt;left:297pt" class=ReportLevel>1600</div>
<div style="top:99pt;left:355pt;width:79.5;height:19.5;" class=ReportLevel></div>
<div style="top:99pt;left:355pt" class=ReportLevel>300</div>
<div style="top:99pt;left:414pt;width:55.5;height:19.5;" class=ReportLevel></div>
<div style="top:99pt;left:414pt" class=ReportLevel>30</div>
<div style="top:112pt;left:36pt;width:55.5;height:19.5;" class=ReportLevel></div>
<div style="top:112pt;left:36pt" class=ReportLevel>7521</div>
<div style="top:112pt;left:76pt;width:85.5;height:19.5;" class=ReportLevel></div>
<div style="top:112pt;left:76pt" class=ReportLevel>WARD</div>
<div style="top:112pt;left:139pt;width:79.5;height:19.5;" class=ReportLevel></div>
<div style="top:112pt;left:139pt" class=ReportLevel>SALESMAN</div>
<div style="top:112pt;left:198pt;width:55.5;height:19.5;" class=ReportLevel></div>
<div style="top:112pt;left:198pt" class=ReportLevel>7698</div>
<div style="top:112pt;left:238pt;width:79.5;height:19.5;" class=ReportLevel></div>
<div style="top:112pt;left:238pt" class=ReportLevel>22-FEB-81</div>
<div style="top:112pt;left:297pt;width:79.5;height:19.5;" class=ReportLevel></div>
<div style="top:112pt;left:297pt" class=ReportLevel>1250</div>
<div style="top:112pt;left:355pt;width:79.5;height:19.5;" class=ReportLevel></div>
<div style="top:112pt;left:355pt" class=ReportLevel>500</div>
<div style="top:112pt;left:414pt;width:55.5;height:19.5;" class=ReportLevel></div>
<div style="top:112pt;left:414pt" class=ReportLevel>30</div>
<div style="top:126pt;left:36pt;width:55.5;height:19.5;" class=ReportLevel></div>
<div style="top:126pt;left:36pt" class=ReportLevel>7566</div>
<div style="top:126pt;left:76pt;width:85.5;height:19.5;" class=ReportLevel></div>
<div style="top:126pt;left:76pt" class=ReportLevel>JONES</div>
<div style="top:126pt;left:139pt;width:79.5;height:19.5;" class=ReportLevel></div>
<div style="top:126pt;left:139pt" class=ReportLevel>MANAGER</div>
<div style="top:126pt;left:198pt;width:55.5;height:19.5;" class=ReportLevel></div>
<div style="top:126pt;left:198pt" class=ReportLevel>7839</div>
<div style="top:126pt;left:238pt;width:79.5;height:19.5;" class=ReportLevel></div>
<div style="top:126pt;left:238pt" class=ReportLevel>02-APR-81</div>
<div style="top:126pt;left:297pt;width:79.5;height:19.5;" class=ReportLevel></div>
<div style="top:126pt;left:297pt" class=ReportLevel>2975</div>
<div style="top:126pt;left:355pt;width:79.5;height:19.5;" class=ReportLevel></div>
<div style="top:126pt;left:355pt" class=ReportLevel>&nbsp;</div>
<div style="top:126pt;left:414pt;width:55.5;height:19.5;" class=ReportLevel></div>
<div style="top:126pt;left:414pt" class=ReportLevel>20</div>
<div style="top:139pt;left:36pt;width:55.5;height:19.5;" class=ReportLevel></div>

<div style="top:791pt;left:1pt;">
<p style="page-break-before:always"></p>
</div>

<div style="top:807pt;left:1pt;">
</div>
</body></html>

Bill Posters
07-11-2005, 01:06 PM

<div style="top:72pt;left:36pt;width:55.5;height:19.5;" class=ReportLevel></div>

Units for the 55.5 and 19.5 values?


That aside, if it's data, why aren't you using tables like you're supposed to?
When presenting tabulated data, tables are still the best and most appropriate method.
('Replicating' tables literally using the kind of markup you show in this last post is a terrible - not to mention ugly - way to get the job done.)

zro@rtv
07-11-2005, 02:47 PM
not TOTALLY sure, but i believe it has something to do with all that positioning (head warning of above post)... some of that is prolly overlapping? my best guess, but im not about to go through all those numbers...

...why arent you using a table?

idvishal
07-12-2005, 07:10 AM
Thanks Zro and Bill. I can't use the table...this code is being generated from a tool which converts the fields defined in the canvas of tool to html format. This tool gives me an option of using css for the fields I create. Since fields can be anywhere in the canvas, tool is using absolute positioning rather than using table to fill up the empty rows and columns.

zro@rtv
07-12-2005, 08:53 AM
out of curiosity....
what are you using / trying to do?

idvishal
07-13-2005, 07:30 AM
zro,
i am sorry i can't tell about the tool I am using.

]|V|[agnus
07-13-2005, 07:49 AM
Part of me would honestly rather I didn't know as much about it as I do...

That's some awful markup it's spitting out. Using points for positioning?? And yeah, no units on those width and height declarations. Now to mention horrible use of CSS, using classes AND inline styles?

Yeesh... good luck? :confused:



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum