Firefox h1? spacing woes...

derker

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

Expand|Select|Wrap|Line Numbers

 <!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>

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

Expand|Select|Wrap|Line Numbers

 h2 {

top: 224px;

}

h1 {

top: 202px;

}

I don't have Safari to see how it looks now !!!

Cheers,

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.

derker

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?

derker

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

Expand|Select|Wrap|Line Numbers

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?

drhowarddrfine

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.

drhowarddrfine

So here I am on Safari. How do I look?

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

derker

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

rob0210

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!

Dormilich

Not sure how old this thread is

February 2008

Firefox h1? spacing woes...

Post your reply

Similar topics