Member Avatar for EricFlamm

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:

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
  • 254 Views
  • 3 Days Discussion Span
  • Latest Post Latest Post by JRM

Dani AI

Generated

This is a concise troubleshooting checklist and small set of pragmatic fixes that address the Safari-vs-Firefox/IE layout drift described by . ’s point about the doctype is the right place to start: missing or invalid doctypes and stray/malformed markup commonly throw browsers into quirks mode and produce different box metrics.

Add a standards-mode doctype at the very top of the HTML (before any content):

<!DOCTYPE html>

If the doctype is already present, validate the page (look for malformed comments, unclosed tags or bad nesting — those are frequent culprits).

Next, make the footer’s metrics explicit so font and rounding differences don’t move it between engines. Anchor the footer to the bottom of its positioned parent and set explicit line-height and display. Example strategy (adjust values to fit the design):

.bioFooter {
  position: absolute;
  bottom: 12px;        /* anchor to container bottom instead of relying on top */
  line-height: 1.0;    /* remove font-metric surprises */
  font-size: 11px;
  display: block;
  font-family: "Trebuchet MS", Arial, sans-serif;
}

Other quick checks that often fix a one-pixel shift in one browser only:

  • Ensure the parent container really has position: relative so absolute coordinates are consistent.
  • Avoid tiny em-based base font sizes (the posted site uses fractional ems); test with px to remove subpixel rounding differences.
  • Make images that are part of the layout display:block to remove baseline gaps.
  • Replace any literal special chars (©) with the entity &copy; and confirm the page charset declaration is correct so glyph metrics don’t switch fonts.

Workflow summary: validate/doctyping first (as suggested), then apply explicit line-height/font and anchor with bottom. Those steps resolve most Safari-specific vertical offsets without a full redesign.

Member Avatar for JRM

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.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.