homepage Welcome to WebmasterWorld Guest from 54.205.247.203
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

    
Slight position difference between Windows and Mac Firefox?
CSS layout problem
JimGordon




msg:4352719
 3:11 pm on Aug 17, 2011 (gmt 0)

I have a layout that looks great in Windows Firefox 4 and (gasp) IE8.

However, on Mac 10.6.8 both Firefox 4 and Safari drop down the nav links a bit.

Here's the code. (I consolidated the CSS and HTML for simplicity.)


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=8" />
<!-- Forced IE to use IE8 mode -->
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
<title>SomePage</title>
<style type="text/css">
body {
font-family: Verdana, sans-serif;
}

#header {
background-color: #00aecb;
width: 960px;
height: 143px;
margin: 0 auto;
}

div#mainMenu {
position: relative;
top: 119px;
right: -517px;
width: 442px;
}

#mainMenu ul {
padding: 0;
}

#mainMenu li {
display: inline;
}

#mainMenu li a:link, #mainMenu li a:visited {
color: white;
background-color: #39892F;
text-align: center;
padding: 6px;
text-decoration: none;
}

#mainMenu li a:hover {
background-color: #B0D0AC;
color: black;
font-weight: normal;
}

#mainMenu li a.current {
text-decoration: underline;
font-weight: normal;
}
</style>
</head>
</head>
<body>
<div id="outerDiv">
<div id="header">
<div id="logo">
</div>
<div id="mainMenu">
<ul>
<li><a href="index.html" class="current">Home</a></li>
<li><a href="features.html">Features</a></li>
<li><a href="testimonials.html">Testimonials</a></li>
<li><a href="techspecs.html">Tech Specs</a></li>
<li><a href="http://www.somelink.com">Login</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>


 

JimGordon




msg:4352723
 3:17 pm on Aug 17, 2011 (gmt 0)

I've tried a million different ways to make this work, all with the same results. Specifically, I have tried a global reset of margins, line spacing etc. I did notice that the issue goes away if I change the font to Arial. But I'm required to use Verdana for the design. Any ideas?

Thanks in advance,

Jim

rocknbil




msg:4352726
 3:23 pm on Aug 17, 2011 (gmt 0)

Before anything start with this [validator.w3.org]

It looks like all you need is to remove <html xmlns="http://www.w3.org/1999/xhtml">, the XHTML style /> (just >,) and the extra closing </head>. Once it's validated, try again . . .

JimGordon




msg:4352808
 6:32 pm on Aug 17, 2011 (gmt 0)

My apologies for the invalid html. Here is a correctly validated version:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=8">
<!-- Forced IE to use IE8 mode -->
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
<title>SomePage</title>
<style type="text/css">
body {
font-family: Verdana, sans-serif;
}

#header {
background-color: #00aecb;
width: 960px;
height: 143px;
margin: 0 auto;
}

div#mainMenu {
position: relative;
top: 119px;
right: -517px;
width: 442px;
}

#mainMenu ul {
/* list-style: none; */
padding: 0;
}

#mainMenu li {
display: inline;
/* float: left;
margin: 4px;
padding: 0; */
}

#mainMenu li a:link, #mainMenu li a:visited {
color: white;
background-color: #39892F;
text-align: center;
padding: 6px;
text-decoration: none;
}

#mainMenu li a:hover {
background-color: #B0D0AC;
color: black;
font-weight: normal;
}

#mainMenu li a.current {
text-decoration: underline;
font-weight: normal;
}
</style>
</head>

<body>
<div id="outerDiv">
<div id="header">
<div id="logo">
</div>
<div id="mainMenu">
<ul>
<li><a href="index.html" class="current">Home</a></li>
<li><a href="features.html">Features</a></li>
<li><a href="testimonials.html">Testimonials</a></li>
<li><a href="techspecs.html">Tech Specs</a></li>
<li><a href="http://www.somelink.com">Login</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>

lucy24




msg:4352833
 7:45 pm on Aug 17, 2011 (gmt 0)

I did notice that the issue goes away if I change the font to Arial. But I'm required to use Verdana for the design. Any ideas?

That's the hidden drawback to forcing fonts. There can be multiple fonts with the same name, depending on age and platform and so on. The Palatino I use today is not the Palatino I adopted in 1990. You could try forcing a line-height in ems. Or, as a last resort, pixels.

JimGordon




msg:4352841
 8:28 pm on Aug 17, 2011 (gmt 0)

Success! Forcing the line-height reduced the discrepancy down to an acceptable amount. Thanks for your assistance.

Here's the updated section, for anyone else with this problem:


div#mainMenu {
line-height: 1;
position: relative;
top: 119px;
right: -517px;
width: 442px;
}

alt131




msg:4354138
 9:09 am on Aug 22, 2011 (gmt 0)

A bit belated, but welcome to WebmasterWorld JimGordan :)

... and good spotting Lucy!

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved