Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Feb 2008
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Firefox vertical jog woes ???!!!

    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>

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Add this to your CSS
    Code:
    * {
    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.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #3
    New to the CF scene
    Join Date
    Feb 2008
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

  • #4
    New to the CF scene
    Join Date
    Feb 2008
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    fixed, kinda...

    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


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •