0

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;
}
2
Contributors
1
Reply
2
Views
7 Years
Discussion Span
Last Post by JRM
0

I put your page through the W3 valadator and it says you have a problem with the doctype line.
This is probably sending the browsers into quirks mode.

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.