Welcome to WebmasterWorld Guest from 54.158.55.251

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)

New User

5+ Year Member

joined:Aug 17, 2011
posts: 4
votes: 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)

New User

5+ Year Member

joined:Aug 17, 2011
posts: 4
votes: 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)

Senior Member

WebmasterWorld Senior Member rocknbil is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Nov 28, 2004
posts:7999
votes: 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 . . .
6:32 pm on Aug 17, 2011 (gmt 0)

New User

5+ Year Member

joined:Aug 17, 2011
posts: 4
votes: 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)

Senior Member from US 

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month

joined:Apr 9, 2011
posts:13744
votes: 462


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)

New User

5+ Year Member

joined:Aug 17, 2011
posts: 4
votes: 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)

Senior Member

WebmasterWorld Senior Member 5+ Year Member

joined:Aug 9, 2008
posts: 961
votes: 0


A bit belated, but welcome to WebmasterWorld JimGordan :)

... and good spotting Lucy!
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members