Floating item - help

Question

I'll try my best to describe what I am trying to do... I want
to FLOAT and leaf image right over the top of where 2 TDs come
together. I am trying to use a <div> tag which works fine,
except for one problem it is creating. No matter how I do it, it
somehow makes the TD on the bottom have too much height. I am
trying to use CSS with these parameters.
.mapLink {
position: relative;
top: -200px;
right: 20px;
float: right;
What do I need to add to keep it from blewing up the bottom
half of the page?
here is a link to the pages:
http://www.gulfnetwork.com/gcmccc/locations.htm

Answer 1

Thytar wrote:
> Ok... It works in IE... but not in Firefox? How do I
make it work in Firefox
Surround your main table in a <div>
<div id="tableContainer">
<table width="877" border="0" align="center"
cellpadding="0"
cellspacing="0" class="tableBorderDkGreen">
blah blah blah
</table>
</div><!-- end tableContainer -->
Then give it some css:
#tableContainer {
position: relative;
width: 877px;
margin: 0 auto;
(dont use a <p> tag to try and position the leaf use a
<div> instead.
Insert the 'mapLink' <div> inside the "tableContainer"
<div>
So you have the following structure:
<div id="tableContainer">
<div class="mapLink"><img src="images/leaf1.png"
alt="Map Link"
width="100" height="73" /></div>
<table width="877" border="0" align="center"
cellpadding="0"
cellspacing="0" class="tableBorderDkGreen">
blah blah blah
</table>
</div><!-- end tableContainer -->
Now use absolute positioning on the mapLink <div> (mess
around with the
x, y co-ordinates until you have it in the position required.
.mapLink {
position: absolute;
top: 200px;
left: 20px;
This is probably the best way to do it to get consistent
results
cross-browser. Using relative positioning in combination with
float and
minus margins is a disaster waiting to happen. You might
achieve utopia
in one browser but its likely to be out in another.