Firefox h1? spacing woes...

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • derker
    New Member
    • Feb 2008
    • 4
    #1

    Firefox h1? spacing 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 (mac user) 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?!! 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=html]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dt d">
    <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("wm ode","transpare nt");
    so.write("slide show");

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

    <li><a href="#">Narrat ive</a></li>
    <li><a href="#">Docume ntary</a></li>
    <li><a href="#">Music Videos</a></li>
    <li><a href="#">Stills </a></li>
    <li><a href="#">Bio</a></li>
    <li><a href="#">Contac t</a></li>
    </ul>
    </div>
    </div>



    </body>
    </html>[/CODE]
    Last edited by eWish; Feb 19 '08, 03:53 PM. Reason: Please use [CODE][/CODE] tags
    Tags: None
    • just a feeling
      New Member
      • Aug 2007
      • 86
      #2
      Hi derker,

      It's not only in FF. IE6 and Opera has the same space. To fix that, add 5px to the top position of h1 and h2, i.e
      Code:
      h2 {
top: 224px;
}
h1 {
top: 202px;
}
      I don't have Safari to see how it looks now !!!

      Cheers,

        Comment

        • drhowarddrfine
          Recognized Expert Expert
          • Sep 2006
          • 7434
          #3
          It may have to do with the difference in font rendering between Windows and the Mac. Mac's fonts are optimized for publishing, which is why they look so much nicer, while Window fonts are set for text editing and the web. I'd have to look at Safari on my Windows box but, hopefully, someone else can do that before I can.

            Comment

            • derker
              New Member
              • Feb 2008
              • 4
              #4
              Originally posted by drhowarddrfine
              It may have to do with the difference in font rendering between Windows and the Mac. Mac's fonts are optimized for publishing, which is why they look so much nicer, while Window fonts are set for text editing and the web. I'd have to look at Safari on my Windows box but, hopefully, someone else can do that before I can.
              thx doc, any help would be great. these differences are both happening on the mac platform though. i haven't even gotten to the pc yet. its really strange. i do a simple lil test and i can't get the firefox to line up where i want it. its always a few pixels higher than the safari version. will i need to employ conditional css?

                Comment

                • derker
                  New Member
                  • Feb 2008
                  • 4
                  #5
                  Originally posted by just a feeling
                  Hi derker,

                  It's not only in FF. IE6 and Opera has the same space. To fix that, add 5px to the top position of h1 and h2, i.e
                  Code:
                  h2 {
top: 224px;
}
h1 {
top: 202px;
}
                  I don't have Safari to see how it looks now !!!

                  Cheers,
                  thanks just a feelin, but then the safari version is to low, get it? i guess if i used conditional css for the browsers that would work but i never done that b4 sooo... and this seems like it should be far simpler than that. i mean i am just tryin to place an element in a defined consistent space...what gives?

                    Comment

                    • drhowarddrfine
                      Recognized Expert Expert
                      • Sep 2006
                      • 7434
                      #6
                      Conditional comments are only for IE. I don't have Safari on my Windows box (don't know how that happened) but I'll get it shortly.

                        Comment

                        • drhowarddrfine
                          Recognized Expert Expert
                          • Sep 2006
                          • 7434
                          #7
                          So here I am on Safari. How do I look?

                          You've set up your page differently and now things look the same.

                            Comment

                            • derker
                              New Member
                              • Feb 2008
                              • 4
                              #8
                              Originally posted by drhowarddrfine
                              So here I am on Safari. How do I look?

                              You've set up your page differently and now things look the same.
                              I know. Im not sure what was happening. i think it must of been all the absolute positioning. so i found some clear all defaults css on the web and then went back to a simpler layout. just kept it all in the flow with static positioning and laid it out using margins and padding on the different elements or divs. i just checked it across on the pc fox and ie6 and all seems good there too. so maybe i'll just settle down and remember not to make things harder than they have to be. thanks for your help doc. if you wanna try to figure it out, the page in question is still up at this address
                              http://www.dmcfarland. net/index-2.html
                              it baffles me, so any thoughts would be welcome
                              cheers and thanks again for your help,
                              derker

                                Comment

                                • rob0210
                                  New Member
                                  • Jun 2010
                                  • 1
                                  #9
                                  Hi,

                                  Not sure how old this thread is but thought I would post to mention that your problem is to do with how Firefox (mac) renders Helvetica. If you alter your headings to Arial for example, the line height issues sorts itself.

                                  I am still working on a fix for this myself but thought I would share the love!

                                    Comment

                                    • Dormilich
                                      Recognized Expert Expert
                                      • Aug 2008
                                      • 8694
                                      #10
                                      Not sure how old this thread is
                                      February 2008

                                        Comment

                                        Previous template Next
                                        Working...