I keep trying to use CSS and keep going back to tables in frustration. Well, here's to trying again.

I have graphic. I have code just below the graphic to display a couple of words. I used relative position to move the words up so they are displayed on top of the graphic. Below this, I have a paragraph. All this is in a table cell (someone else's design!)

This all works rather well, except for the space left by the text. Yes, it's displayed on top of the graphic, but there's a space below the graphic and above the paragraph where the text would have been. How can I eliminate that space?

Here's my code (in ASP.NET):

<table width="100%">
<tr>
<td colspan="2" align="center">
<div style="width:98%; text-align:center; padding:5px; color:White; background-color:#000080; font-size:x-large; font-weight:bold; font-family:Times New Roman;">
Contact</div>
</td>
</tr>
<tr>
<td valign="top" align="left" width="50%">
<asp:Image ID="postmail" runat="server" ImageUrl="images/contact-me-postal-mail.jpg" />
<div style="z-index:99; position:relative; top:-42px; left:100px;">By Mail:</div>
<div style="z-index:97; padding-left:25px; position:relative; top:-15px;">
<asp:Label ID="LabelHeader" runat="server" Text="Label" Font-Size="Small"></asp:Label>
</div>
</td>
<td valign="top" align="left" width="50%">
<asp:Image ID="email" runat="server" ImageUrl="images/contact-me-email.jpg" />
<div style="z-index:98; position:relative; top:-38px; left:100px;">By E-mail:</div>
<div style="padding-left:25px; position:relative; top:-15px;">
<asp:Label ID="LblIsEmail" runat="server"></asp:Label>
</div>
</td>
</tr>
</table>

It would be more useful if we could see the page with images and parsed ASP code. Anyway, position relative will leave a space. Maybe you could position the the text absolute instead. Put both the image and the text in a common container with position: relative so you can offset the text relative this container.

You can see an example of the page here: http://www.writeaprisoner.com/Template.aspx?i=z-255046

The text By Mail and By Email are positioned on top of the images.

I can't use absolute positioning, as the content above is of variable length depending on the ad being displayed.

The graphics and text are all in a table cell.

I think you missed the point. By putting the image and the text in a container with position relative you can position either of them or both absolute with an offset relative this container. It doesn't depend on what comes before or after.

"absolute
The box's position (and possibly size) is specified with the 'left', 'right', 'top', and 'bottom' properties. These properties specify offsets with respect to the box's containing block."
http://www.w3.org/TR/CSS2/visuren.html#propdef-position

"If the element has 'position: absolute', the containing block is established by the nearest ancestor with a 'position' other than 'static' [...]"
http://www.w3.org/TR/CSS2/visudet.html#con...g-block-details

It really might help to understand that the tag-strings used in CSS that resemble English words, are actually not at all. They come from some obscure dialect of Norwegian, and mean something entirely different.

So if you say "absolute positioning", meaning something those of us who do speak English might call "absolute positioning", this is not what CSS_absolute means.

Actually CSS_absolute means "relative" (to the closest enclosing of a certain class of entities*); CSS_relative means some sort of curious "offset", in which the position of an object* is changed, while pretending the object is still where it was originally.

In all software engrossing** systems, keywords have fixed conventional meanings, which may be narrower than their natural language meanings. Unfortunately, sometimes it's worse than that, and they are just wrong.

* This is English, too. It means "thing"; and is not necessarily the same as HTML_entity.

** This is lawyerspeak, and means "writing", but you can charge more for it.