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.
<!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"> </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:
3281
<!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"> </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:
3281