Bizarre positioning problem in Firefox

**techno_race** · 04-30-2010, 02:32 PM

When I view this page in Firefox, the Tortoise.png image juts downward about 50 pixels--overlapping the navigation bar and part of the body content. This doesn't happen in Internet Explorer, where the page appears as expected.

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>title</title>
<style type="text/css">
body {
	background-color:#CCCCCC;
	background-image:url(background.png);
	background-repeat:repeat-x;
	background-position:top;
	font-family: Calluna, "Adobe Garamond Premier Pro", "Adobe Garamond Premr Pro", "Garamond Premier Pro", "Garamond Premer Pro", "Adobe Garamond Pro", "Garamond Pro", "Adobe Garamond", "Garamond (W1)", Garamond, "Times New Roman", "Times Roman", Times, serif;
	font-size: 11.5pt;
	color:#F5F5F5;
	margin-left: 0px;
	margin-right: 0px;
}
h2,h3,h4,h5,h6,.heading {
	color:#FFFFCC;
	font-family: "Diavlo Black", "Diavlo Bold", "Diavlo Medium", "Diavlo Book", Diavlo, Candara, "Maiandra GD", Maiandra, Verdana, Tahoma, "Trebuchet MS", Trebuchet, "Arial Rounded MT Bold", Arial, sans-serif;
}
h1,.heading{font-size:48pt;}
h2{font-size:36pt;}
h3{font-size:24pt;}
h4{font-size:16pt;}
h5{font-size:14pt;}
h6{font-size:12pt;}
.freaky{font-family: Gabriola, fantasy, script;}
.top{
	height:150px;
	width:94%;
	margin-left: 3%;
	color:#333333;
	font-family: Gabriola, fantasy, script;
}
.bottom{
	background-image:url(bottom.png);
	background-repeat:repeat-x;
	background-color:#E5E5E5;
	background-position:top;
	height:100px;
	width:94%;
	margin-left: 3%;
	color:#CCCCCC;
	font-size:9pt;
}
.nav{
	background-image:url(nav.png);
	background-repeat:repeat-x;
	background-color:#000000;
	background-position:bottom;
	height:30px;
	width:100%;
	color:#FFFFFF;
	font-family: "Diavlo Black", "Diavlo Bold", "Diavlo Medium", "Diavlo Book", Diavlo, Candara, "Maiandra GD", Maiandra, Verdana, Tahoma, "Trebuchet MS", Trebuchet, "Arial Rounded MT Bold", Arial, sans-serif;
	font-size: 25px;
}
.menu{
	background-color:#000000;
	color:#FFFFFF;
	width:200px;
}
.body{
	background-color:#333333;
	width:94%;
	margin-left: 3%;
}
</style>
</head>

<body><div class="top">
  <table width="100%" border="0" cellspacing="0" cellpadding="0">
    <tr>
      <td width="175" valign="bottom"><div align="center"><a href="index.html"><img src="tortoise.png" alt="The Tortoise" width="169" height="100" border="0" /></a></div></td>
      <td height="150" valign="bottom"><h1 align="center"><strong>title</strong></h1></td>
      <td width="150" valign="middle">&nbsp;</td>
    </tr>
  </table>
</div><div class="nav" align="center">NAV
</div>
<div class="body">BODY</div><div class="bottom" align="center">BOTTOM</div>
</body>
</html>

I just checked, and the code does indeed validate as XHTML 1.0 Transitional, and changing it to HTML 4.01 doesn't help.

The Tortoise.png file is attached:
Attachment 3281

**katierosy** · 05-04-2010, 12:54 PM

Browser renders the margin in diffrent way. Ty this to fix the problem in major browsers.

Modify this CSS:

h1,.heading{font-size:48pt; margin:0;}

Thread: Bizarre positioning problem in Firefox

Thread Tools

Search Thread

Bizarre positioning problem in Firefox

Bookmarks

Bookmarks

Posting Permissions