By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
437,676 Members | 1,773 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 437,676 IT Pros & Developers. It's quick & easy.

Firefox h1? spacing woes...

P: 4
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
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  5. <title>David McFarland - Director of Photography</title>
  6. <style type="text/css">
  7.  
  8. body {
  9.     background-color: #999999;
  10.     text-align: center;
  11.     margin: 0px;
  12.     padding: 0px;
  13. }
  14. #wrapper {
  15.     margin: auto;
  16.     height: 578px;
  17.     width: 922px;
  18.     background-color: #999999;
  19.     position: relative;
  20.     padding: 0px;
  21. }
  22. h1 {
  23.     font-family: Helvetica, Arial, sans-serif;
  24.     font-size: 1.4em;
  25.     font-style: normal;
  26.     line-height: normal;
  27.     font-weight: normal;
  28.     font-variant: normal;
  29.     text-transform: none;
  30.     color: #FFFFFF;
  31.     text-decoration: none;
  32.     text-align: left;
  33.     margin: 0px;
  34.     padding: 0px;
  35.     height: 21px;
  36.     width: 168px;
  37.     position: absolute;
  38.     left: 51px;
  39.     top: 197px;
  40. }
  41. h2 {
  42.     font-family: Helvetica, Arial, sans-serif;
  43.     font-size: 1.2em;
  44.     font-style: normal;
  45.     line-height: normal;
  46.     font-weight: normal;
  47.     font-variant: normal;
  48.     text-transform: none;
  49.     color: #e3e3e3;
  50.     text-decoration: none;
  51.     text-align: left;
  52.     margin: 0px;
  53.     padding: 0px;
  54.     height: 20px;
  55.     width: 210px;
  56.     position: absolute;
  57.     left: 51px;
  58.     top: 219px;
  59. }
  60. #slideshow {
  61.     padding: 0px;
  62.     height: 200px;
  63.     width: 820px;
  64.     left: 47px;
  65.     top: 250px;
  66.     margin: 0px;
  67.     position: absolute;
  68. }
  69. div#listnav {
  70.     font-size: 14px;
  71.     float: left;
  72.     width: 400px;
  73.     position: absolute;
  74.     top: 450px;
  75.     left: 255px;
  76.     margin: 0px;
  77.     padding: 0px;
  78. }
  79. div#listnav ul {
  80.     margin: 0px;
  81.     padding: 0px;
  82. }
  83. div#listnav li {
  84.     float: left;
  85.     list-style-type: none;
  86.     margin: 0px;
  87.     padding-top: 0;
  88.     padding-right: 6px;
  89.     padding-bottom: 0;
  90.     padding-left: 6px;
  91. }
  92. div#listnav a:link {
  93.     font-family: Helvetica, Arial, sans-serif;
  94.     font-size: 14px;
  95.     font-style: normal;
  96.     line-height: normal;
  97.     font-weight: normal;
  98.     font-variant: normal;
  99.     text-transform: none;
  100.     color: #d7d7d7;
  101.     text-decoration: none;
  102. }
  103. div#listnav a:visited {
  104.     font-family: Helvetica, Arial, sans-serif;
  105.     font-size: 14px;
  106.     font-style: normal;
  107.     line-height: normal;
  108.     font-weight: normal;
  109.     font-variant: normal;
  110.     text-transform: none;
  111.     color: #d7d7d7;
  112.     text-decoration: none;
  113. }
  114. div#listnav a:hover {
  115.     font-family: Helvetica, Arial, sans-serif;
  116.     font-size: None;
  117.     font-style: normal;
  118.     line-height: normal;
  119.     font-weight: normal;
  120.     font-variant: normal;
  121.     text-transform: none;
  122.     color: #FFFFFF;
  123.     text-decoration: none;
  124. }
  125. div#listnav a:active {
  126.     font-family: Helvetica, Arial, sans-serif;
  127.     font-size: 14px;
  128.     font-style: normal;
  129.     line-height: normal;
  130.     font-weight: normal;
  131.     font-variant: normal;
  132.     text-transform: none;
  133.     color: #e3e3e3;
  134.     text-decoration: none;
  135. }
  136.  
  137.  
  138. -->
  139. </style>
  140. <script type="text/javascript" src="swfobject.js"></script>
  141. <!-- SWFObject embed by Geoff Stearns geoff@deconcept.com http://blog.deconcept.com/ -->
  142. </head>
  143.  
  144. <body>
  145. <div id="wrapper">
  146. <h1>David McFarland</h1>
  147. <h2>Director of Photography</h2>
  148. <div id="slideshow">
  149. <script type="text/javascript">
  150.     // <![CDATA[
  151.  
  152.     var so = new SWFObject("dave-front.swf", "myMovie", "820", "200", "8", "#999999");
  153.     so.addParam("wmode","transparent");
  154.     so.write("slideshow");
  155.  
  156.     // ]]>
  157.       </script>
  158. </div>
  159. <div id="listnav">
  160.   <ul>
  161.  
  162.      <li><a href="#">Narrative</a></li>
  163.      <li><a href="#">Documentary</a></li>
  164.      <li><a href="#">Music Videos</a></li>
  165.      <li><a href="#">Stills</a></li>
  166.      <li><a href="#">Bio</a></li>
  167.      <li><a href="#">Contact</a></li>
  168.   </ul>   
  169. </div>
  170. </div>
  171.  
  172.  
  173.  
  174. </body>
  175. </html>
Feb 19 '08 #1
Share this Question
Share on Google+
9 Replies


just a feeling
P: 87
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
  1. h2 {
  2. top: 224px;
  3. }
  4. h1 {
  5. top: 202px;
  6. }
I don't have Safari to see how it looks now !!!

Cheers,
Feb 19 '08 #2

drhowarddrfine
Expert 5K+
P: 7,435
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.
Feb 19 '08 #3

P: 4
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?
Feb 19 '08 #4

P: 4
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
  1. h2 {
  2. top: 224px;
  3. }
  4. h1 {
  5. top: 202px;
  6. }
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?
Feb 19 '08 #5

drhowarddrfine
Expert 5K+
P: 7,435
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.
Feb 19 '08 #6

drhowarddrfine
Expert 5K+
P: 7,435
So here I am on Safari. How do I look?

You've set up your page differently and now things look the same.
Feb 19 '08 #7

P: 4
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
Feb 19 '08 #8

P: 1
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!
Jun 16 '10 #9

Dormilich
Expert Mod 5K+
P: 8,639
Not sure how old this thread is
February 2008
Jun 17 '10 #10

Post your reply

Sign in to post your reply or Sign up for a free account.