OK - I'm struggling with the same sort of positioning issue as discussed in numerous other posts. Here's the page I'm dealing with: http://fiftyeightadvertising.com/bio.html
The design is a mixture of tables and divs, because I picked it up after the original deployment. I really don't like the background shape, but the client insists. So, the problem is that I have to drop the footer text right on top of the light arc at the bottom of the background. My design renders fine in Firefox and IE 8, but the footer text shifts up a bit with Safari (on Windows). If it also shifts up on the Mac, I'll hear from the client soon enough. I want to understand WHY this is happening, since table/css hybrids are common enough. Here's the page code:
<body onload="preloadImages();">
<center>
<table id="Table_01" width="1050" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="3">
<img src="images/index3_01.jpg" width="1050" height="25" alt="" /></td>
</tr>
<tr>
<td></td>
<td style="width: 1000px"><map id="ImgMap6" name="ImgMap6" title="Home">
<area alt="" coords="389, 108, 614, 161" href="Index.html" shape="rect" />
</map><img alt="" src="images/printTop.png" usemap="#ImgMap6"/></td>
<td></td>
</tr>
<tr>
<td ></td>
<td style="width: 1000px;">
<div style="background-image:url('images/printbottom.png');background-repeat:no-repeat;height:452px;">
<table >
<tr><td colspan="5" height="30"></td></tr>
<--snip - this row contains 5 columns (3 white space, 2 text) -->
</table>
<div style="height:175px; position:relative; top:-3px;">
<div class="Link1">
<a href="print.html">
<img src="images/print60.png" name="index3_10" alt=""
</a>
</div>
<div class="Link2">
<a href="television.html">
<img src="images/Television60.png" name="index3_13" alt="Television" id="index3_13"</a></div>
<div class="Link3">
<a href="web.html">
<img src="images/web60.png" name="index3_15" alt="Web" id="index3_15"</a></div>
<div class="Link4">
<a href="bio.html">
<img name="index3_17" src="images/about100.png" alt="about Fifty-Eight" </a></div>
[B] <div class="bioFooter" >
© All contents copyright 2009 Fifty-Eight Advertising Inc.<br/>Fifty-Eight Advertising, LLC•433 Bishop Street NW•Suite 28•Atlanta GA 30318•404 733-6872 (office)
</div>
[/B] </div>
</div>
</td><td></td></tr>
<tr><td></td><td>
<img alt="" src="images/ReflectionRounded.png" style="padding-top:14px;"/></td>
<td></td>
</tr>
<tr><td width="25"></td><td style="width: 1000px"></td><td width="25"></td></tr>
</table>
</center>Here are the relevant bits from the stylesheet:
body, a, td, p, div, div.bio {
color: #ccc;
font-family: "Trebuchet MS", "Lucida Grande", Arial, Helvetica, sans-serif;
margin: 0 auto;
padding: 0;
font-size: 0.6em;
/* background: #111 url('../images/bg/gradient1.gif') top left repeat-x;
background-color:#2A3030; */
}
body {
background-color:#2A3030;
}
.Link1
{
position: absolute;
left:250px;
top:30px;
z-index:90;
}
.Link2
{
position: absolute;
left:370px;
top:30px;
z-index:90; }
.Link3
{
position: absolute;
left:525px;
top:30px;
z-index:90;
}
.Link4
{
position: absolute;
left:615px;
top:30px;
z-index:90;
}
.bioText {
font-size:9.4pt;
color:#999999;
text-align:left;
font-family:"Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
line-height:1.1em;
}
.bioFooter
{
position:absolute;
left:260px;
top:146px;
z-index:90;
text-align:center;
font-size:xx-small;
color:#727E7E;
width:480px;
background-image:url('../images/biofooterbg.png');
background-position:center;
background-repeat:no-repeat;
}
#Table_01
{
border: 0;
padding:0;
margin:0;
}