1. Home
  2. Forums Index
  3. Browser Side / CSS 1:09 pm May 1, 2026

Forum Moderators: not2easy

Message Too Old, No Replies

Slight position difference between Windows and Mac Firefox?

CSS layout problem

         

JimGordon

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

10+ Year Member



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

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

10+ Year Member



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

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

WebmasterWorld Senior Member 10+ Year Member



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

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

10+ Year Member



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

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

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



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

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

10+ Year Member



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

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

WebmasterWorld Senior Member 10+ Year Member



A bit belated, but welcome to WebmasterWorld JimGordan :)

... and good spotting Lucy!
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

  1. Home
  2. Forums Index
  3. Browser Side / CSS 1:09 pm May 1, 2026