position: relative

[Dr.Gizmo]

Hello!

I'm creating bar graphs with colored tables. For every record, I must
have two bars, one which presents earned money , other presents days
of use.
I want that those two bars cross each other, to look more prof. So I
make two tables, first (height=17), second (also height=17), and on
the second table I put position to reltive where is top = -6, so
second table will cross first in 6px starting from bottom.
Overall height of those two tables should be cca. 28px, which is
needed because they are in table (let's call it maintable) of that
height. But somehow IE leaves blank space, so my maintable expand from
last value (28px) to new walue 34, and from 28.px to 34.px there is
white unused space. This space is exactly space of second table if
there wouldn't be position: relative.
Please help if you have any idea how to remove this blank space...

Here is code:


<div align="center">
<!--main table-->
<table border="0" cellpadding="0" cellspacing="0" width="201"
height="28">
<tr>
<td style="border-left: 0px solid #000000; border-top: 1px solid
#c0c0c0;" width="100" height="28" bgcolor="#E9ECF3"><p
style="margin-left: 5px"><font size="1" face="Verdana"
color="#8495C1">Adriatic I</font></td>
<td style="border-left: 1px solid #8495C1; border-top: 1px solid
#c0c0c0; border-right:1px solid #8495C1;" width="99" bgcolor="#E9ECF3"
height="28"><font size="1" face="Verdana" color="#8495C1">
<!--first table-->
<table border="0" cellpadding="0" cellspacing="0" width="50%"
height="17">
<tr>
<td height="17" background="slike/graf.jpg" style="border-right: 1px
solid #8495C1">
<table border="0" cellpadding="0" cellspacing="0" width="100%"
height="8">
<tr>
<td style="border-right:1px solid #FFFFFF; border-bottom:1px solid
#FFFFFF; border-top:1px solid #FFFFFF; " height="17">
<table border="0" cellpadding="0" cellspacing="0" width="100%"
height="6">
<tr>
<td height="1"></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--second table-->
<table border="0" cellpadding="0" cellspacing="0" width="20%"
height="17" style="position: relative; left: 0px; top: -6px">
<tr>
<td height="17" background="slike/graf_d.jpg" style="border-right: 1px
solid #8495C1">
<table border="0" cellpadding="0" cellspacing="0" width="100%"
height="8">
<tr>
<td style="border-right:1px solid #FFFFFF; border-bottom:1px solid
#FFFFFF; border-top:1px solid #FFFFFF; " height="17">
<table border="0" cellpadding="0" cellspacing="0" width="100%"
height="6">
<tr>
<td height="1"></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>

Thnx

 

[Mitja]

Hello!

I'm creating bar graphs with colored tables. For every record, I must
have two bars, one which presents earned money , other presents days
of use.
I want that those two bars cross each other, to look more prof. So I
make two tables, first (height=17), second (also height=17), and on
the second table I put position to reltive where is top = -6, so
second table will cross first in 6px starting from bottom.
Overall height of those two tables should be cca. 28px, which is
needed because they are in table (let's call it maintable) of that
height. But somehow IE leaves blank space, so my maintable expand from
last value (28px) to new walue 34, and from 28.px to 34.px there is
white unused space. This space is exactly space of second table if
there wouldn't be position: relative.

Don't think IE has much to do with it, Opera does it the same way. It's also
the way it should be - relatively positioned elements are just _displayed_
elsewhere, but their effect on the document flow remains unchanged.

Please help if you have any idea how to remove this blank space...

Here is code:

[snip]

Don't mean to insult you, but think about writing it all again. Stop using
tables where they're not needed (you'll hear about this around here more
than you ever wanted to) and, more important, stop mixing HTML stye markup
and CSS. Non-inline CSS would make it look prettier, too.

Mitja

 

[Toby A Inkster]

I'm creating bar graphs with colored tables.

Why not just use images? Bar graphs should compress nicely using PNG or
GIF, so file size shouldn't be much of a concern.