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 - <!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>
9  4015 
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 - h2 {
-
top: 224px;
-
}
-
h1 {
-
top: 202px;
-
}
I don't have Safari to see how it looks now !!!
Cheers,
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.
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?
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
- 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?
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.
So here I am on Safari. How do I look?
You've set up your page differently and now things look the same.
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
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 8,658
Recognized Expert Moderator Expert
Not sure how old this thread is
February 2008
Sign in to post your reply or Sign up for a free account.
Similar topics | |
by: StarQuake |
last post by:
At this site:
http://forwarding.robas.com
You can see in IE there is cell padding in 'Berkman Bedrijven' and with
Firefox there isn't. I don't want any cell padding.
Anyone?
--
-----------------------------------------
|
by: skeeterbug |
last post by:
http://www.geocities.com/operationsengineer1/test2.htm
the extra space between the logoHeader and the menu bar occurs when i
add the <ul>. if i comment out the ul and and all the li, the 1em
space disappears in firefox.
http://www.geocities.com/operationsengineer1/test3.htm
it never shows in ie6. if i increase the margin of hmenu to 1 em,
there is no effect on the top and bottom, but the right and left are
|
by: lkrubner |
last post by:
Am I wrong, or do paragraphs have extra space on top in FireFox, when
compared to Microsoft IE. The top of this page is an example:
http://www.publicdomainsoftware.org/index.php?pageId=299
The text in the box at top looks like it has an extra 10 or 20 pixels
of padding at the top, when FireFox is compared to IE. Why is that?
|
by: newspost2000 |
last post by:
If anyone could help me out here. I am the webmaster of the following
corporate website: http://www.otpp.com/. When I load this page in IE
or Netscape for PC the postion of all of the elements on the homepage
is generally the same between these two browsers. When you navigate
into the site the Teachers' logo is always in the same position on all
pages. In Firefox the Corporate/Teachers' logo sites significantly
lower but only on the...
|
by: Giggle Girl |
last post by:
I have an embedded style sheet that works perfect in IE6, and looks
wrong in Firefox 1.7. Here is a link to an online sample:
http://c.1asphost.com/giggy/tree02h/main/default.htm
It works for the most part, in that the text of a Nav Tree becomes
underlined onmouseover. But, when you click an item, it should receive
a Yellow background with a border around it, which it does in IE but
not in Firefox.
| | |
by: InfiniteVoid |
last post by:
Hello on my page when viewed with IE the spacing between the text in
the tables is close together. When I view my page in firefox the
spacing between the text lines it very spaced out. Any way to fix this
to make it look the same on both?
Here is the page: http://wtv-zone.com/knockmedown/
Thank you for your time.
|
by: greynium |
last post by:
hi
Please see http://thatshindi.oneindia.in in Firefox and IE7. The
spacing between the lines are different. What we see in Firefox is
what we desire.
How do we fix things to make it look right in IE7. To make things
simpler we have uploaded only part of the text on
http://images.oneindia.in/temp/spacing.html The space between the
bullets in IE7 is more than what we want.
|
by: John Nagle |
last post by:
I'm having problems with excessive line spacing in FireFox. This
seems to happen when "line-height" is set to "normal" when a large
font is in effect, then there's a font change to a smaller font in
HTML at a lower level. It looks like line height gets "stuck" at the
value in effect in the outer block. DOM inspector shows the line height
as "normal" on the small text, but the line spacing renders too big.
This is with Firefox 2, so it...
|
by: Curtis Rutland |
last post by:
Sorry, me again. Now I have the opposite problem.
Actually, I'm fairly certain Firefox is spacing them right, I just can't see what is wrong with my code.
I've got the site live at
http://www.curtisrutland.com, so I won't repaste all my code.
Here's a link to my stylesheet.
If you load the site in IE, and then Firefox, the problem is fairly obvious.
|
by: marktang |
last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look !
Part I. Meaning of...
|
by: Hystou |
last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it.
First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
| | |
by: jinu1996 |
last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth.
The Art of Business Website Design
Your website is...
|
by: Hystou |
last post by:
Overview:
Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
|
by: agi2029 |
last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own....
Now, this would greatly impact the work of software developers. The idea...
|
by: isladogs |
last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM).
In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules.
He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms.
Adolph will...
|
by: conductexam |
last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one.
At the time of converting from word file to html my equations which are in the word document file was convert into image.
Globals.ThisAddIn.Application.ActiveDocument.Select();...
|
by: TSSRALBI |
last post by:
Hello
I'm a network technician in training and I need your help.
I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs.
The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols.
I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
| | |
by: bsmnconsultancy |
last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...
| |
