Welcome to WebmasterWorld Guest from 54.158.51.150

Forum Moderators: not2easy

Message Too Old, No Replies

Slight position difference between Windows and Mac Firefox?

CSS layout problem

     
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>

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
3:23 pm on Aug 17, 2011 (gmt 0)

WebmasterWorld Senior Member rocknbil is a WebmasterWorld Top Contributor of All Time 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 . . .
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>
7:45 pm on Aug 17, 2011 (gmt 0)

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time 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.
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;
}
9:09 am on Aug 22, 2011 (gmt 0)

WebmasterWorld Senior Member 5+ Year Member



A bit belated, but welcome to WebmasterWorld JimGordan :)

... and good spotting Lucy!
 

Featured Threads

Hot Threads This Week

Hot Threads This Month