Firefox vertical jog woes ???!!! [Archive]

derker

02-19-2008, 06:18 PM

hi, i am going crazy trying to figure this out. it seems like it should be real easy and probably is, but im kind of a nube flying by night so any thoughts or suggestions would be greatly appreciated. So here's my dilemma my h1/h2 (brand) heading is seemingly 5 px higher in firefox than it is on safari (both on the mac platform, i haven't even gotten to the pc yet!) and its driving me nuts!!! I have tried going back through it and rebuild this simple page many times but alas to no avail. the code is valid, the css embeded. Why is there more space between the heading and the slideshow in firefox than in safari?!! Arghhh...
any help would be awesome...
thank you,
derker

here is the link

http://www.dmcfarland.net/index-6.html

here is the css and code

Code: ( html4strict )
<!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>David McFarland - Director of Photography</title>
<style type="text/css">

body {
background-color: #999999;
text-align: center;
margin: 0px;
padding: 0px;
}
#wrapper {
margin: auto;
height: 578px;
width: 922px;
background-color: #999999;
position: relative;
padding: 0px;
}
h1 {
font-family: Helvetica, Arial, sans-serif;
font-size: 1.4em;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
color: #FFFFFF;
text-decoration: none;
text-align: left;
margin: 0px;
padding: 0px;
height: 21px;
width: 168px;
position: absolute;
left: 51px;
top: 197px;
}
h2 {
font-family: Helvetica, Arial, sans-serif;
font-size: 1.2em;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
color: #e3e3e3;
text-decoration: none;
text-align: left;
margin: 0px;
padding: 0px;
height: 20px;
width: 210px;
position: absolute;
left: 51px;
top: 219px;
}
#slideshow {
padding: 0px;
height: 200px;
width: 820px;
left: 47px;
top: 250px;
margin: 0px;
position: absolute;
}
div#listnav {
font-size: 14px;
float: left;
width: 400px;
position: absolute;
top: 450px;
left: 255px;
margin: 0px;
padding: 0px;
}
div#listnav ul {
margin: 0px;
padding: 0px;
}
div#listnav li {
float: left;
list-style-type: none;
margin: 0px;
padding-top: 0;
padding-right: 6px;
padding-bottom: 0;
padding-left: 6px;
}
div#listnav a:link {
font-family: Helvetica, Arial, sans-serif;
font-size: 14px;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
color: #d7d7d7;
text-decoration: none;
}
div#listnav a:visited {
font-family: Helvetica, Arial, sans-serif;
font-size: 14px;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
color: #d7d7d7;
text-decoration: none;
}
div#listnav a:hover {
font-family: Helvetica, Arial, sans-serif;
font-size: None;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
color: #FFFFFF;
text-decoration: none;
}
div#listnav a:active {
font-family: Helvetica, Arial, sans-serif;
font-size: 14px;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
color: #e3e3e3;
text-decoration: none;
}

-->
</style>
<script type="text/javascript" src="swfobject.js"></script>

</head>

<body>
<div id="wrapper">
<h1>David McFarland</h1>
<h2>Director of Photography</h2>
<div id="slideshow">
<script type="text/javascript">
// <![CDATA[

var so = new SWFObject("dave-front.swf", "myMovie", "820", "200", "8", "#999999");
so.addParam("wmode","transparent");
so.write("slideshow");

// ]]>
</script>
</div>
<div id="listnav">
<ul>

<li><a href="#">Narrative</a></li>
<li><a href="#">Documentary</a></li>
<li><a href="#">Music Videos</a></li>
<li><a href="#">Stills</a></li>
<li><a href="#">Bio</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>

</body>
</html>