...

View Full Version : Firefox vertical jog woes ???!!!



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>
<!-- SWFObject embed by Geoff Stearns geoff@deconcept.com http://blog.deconcept.com/ -->
</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>

_Aerospace_Eng_
02-19-2008, 06:27 PM
Add this to your CSS

* {
margin:0;
padding:0;
}
This will make the margin and padding on all elements 0. Also your doctype isn't HTML 4 Strict as you say it is. It is XHTML 1.0 Transitional. I'm guessing your next question might be "Why doesn't my flash show up?". Its because you haven't uploaded swfobject.js to your server yet.

derker
02-19-2008, 06:34 PM
thanks aero,
but i had that lil piece of code in dar earlier and it did not make a difference and my slideshow shows up just fine cuz the js file is uploaded thank you very much... any more thoughts? the firefox simply jogs upwards a few pixels... why? i know not... please help.
thanks
derker

derker
02-19-2008, 09:32 PM
i went back to a much simpler layout technique (static, using margins and padding on divs and elements) and it seemed to solve my problem. i don't know how it got so bungled in the first place. but if you wanna figure it out the bad page link is http://www.dmcfarland.net/index-2.html
thanks for your help
derker



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum