Page doesn't display the same in Firefox as in Opera/IE6

**cometbus** · Aug 31, 2004, 11:03

OK,

So I have put together what I thought was a reasonably basic xhtml page outline. I'm using a Win2k box. I checked it in Opera 7 and IE6 and it looks fine (more or less). I've also validated the xhtml and css codes. However, when I look at the page in Netscape 7.1 or Firefox, the menu kind of hangs a bit in limbo. Otherwise the rest of the page render's fine. I've included my code below. Does anyone have any suggestions since it's likely that if it doesn't work in Netscape/Firefox, it won't work in many other browsers either. Thanks!

URL: http://www.raisetheratesottawa.org/xhtml/

==========
Style Sheet:
==========

HTML {
PADDING-RIGHT: 0px;
MARGIN-TOP: 0px;
PADDING-LEFT: 0px;
BACKGROUND-COLOR: #FF99CC;
MARGIN-BOTTOM: 20px;
PADDING-BOTTOM: 0px;
COLOR: #000000;
PADDING-TOP: 0px
}
BODY {
PADDING-RIGHT: 0px;
MARGIN-TOP: 0px;
PADDING-LEFT: 0px;
BACKGROUND-COLOR: #FF99CC;
MARGIN-BOTTOM: 20px;
PADDING-BOTTOM: 0px;
COLOR: #000000;
PADDING-TOP: 0px
}

#upper {
width:700px;
margin:0px auto;
text-align:left;
padding: 0px;
border: 5px solid #FFFFFF;
BACKGROUND-COLOR: #000000;
PADDING-RIGHT: 0px;
MARGIN-TOP: 0px;
PADDING-LEFT: 0px;
MARGIN-BOTTOM: 10px;
PADDING-BOTTOM: 0px;
PADDING-TOP: 0px
}

/* Horizontal nav */

#menu {
width:700px;
margin:0px auto;
padding: 0;
}

#menu ul {
border: 0;
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
clear: left;
}

#menu ul li {
display: block;
float: left;
text-align: center;
padding: 0;
margin: 0;
}

#menu ul li a {
background: #000000;
width: 175px;
/* was 'height: 2em; */
height: 24px;
padding: 0;
/* was 'margin: 0 0 10px 0;
' this affects the margin between upper menus*/
margin: 0 0 0 0;
color: #FF0000;
text-decoration: none;
display: block;
text-align: center;
font-weight: bold;
letter-spacing: 1px;
/* was 'line-height: 2em; */
line-height: 24px;
/* was 'font-size: x-small;
' */
font-size: 10px;
font-size: 10px;
/* was 'FONT: 8px Verdana, Arial, Helvetica, Sans-Serif;*/
}

#menu ul li#one {
width: 46px;
}
#menu ul li#two a {
width: 154px;
}
#menu ul li#three a {
width: 105px;
}
#menu ul li#four a {
width: 85px;
}
#menu ul li#five a {
width: 56px;
}
#menu ul li#six a {
width: 57px;
}
#menu ul li#seven {
width: 147px;
}

#menu ul li a:hover {
color: #000000;
background: #FF0000;
}

#menu a:active {
background: #c60;
color: #fff;
}

#content {
width:700px;
margin:0px auto;
text-align:left;
padding:0px;
border:5px solid #FFFFFF;
background: url(/xhtml/graph/rtr-logo-bk.gif) #FF99CC;
}

==========
Page:
==========

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<title>Test</title>

<link rel="stylesheet" href="graph/rtrcss2.css" type="text/css" />

<meta http-equiv="Content-type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Language" content="en-us" />
<meta name="ROBOTS" content="No Index" />
<meta name="Copyright" content="Copyright (c) 2004" />
<meta http-equiv="imagetoolbar" content="no" />
<meta name="MSSmartTagsPreventParsing" content="true" />

<meta name="description" content="" />
<meta name="keywords" content="" />

<link rel="help" href="about.php" title="Site info." />

<meta name="Rating" content="General" />
<meta name="revisit-after" content="2 Days" />
<meta name="doc-class" content="Living Document" />

</head>

<body>

<div id="upper">

<div id="header">
<img src="graph/top-right2.jpg" width="700" height="78" alt="" />
</div>

<div id="menu"><ul>
<li id="one"> </li>
<li id="two"><a href="link1.php" title="Link 1.">Link 1</a></li>
<li id="three"><a href="link2.php" title="Link 2.">Link 2</a></li>
<li id="four"><a href="link3.php" title="Link 3.">Link 3</a></li>
<li id="five"><a href="link4.php" title="Link 4.">Link 4</a></li>
<li id="six"><a href="link5.php" title="Link 5.">Link 5</a></li>
<li id="seven"> </li>
</ul></div>
</div>

<div id="content">
<p>Here is some text</p>
<p>Here is some more text </p>
</div>

</body>
</html>

**jfitz** · Aug 31, 2004, 14:21

I made your links absolute and put the css into the html for my convenience. Don't forget to change 'em back again

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

    <title>Test</title>

<!--<link rel="stylesheet" href="rtrcss20.css" type="text/css" />-->

<meta http-equiv="Content-type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Language" content="en-us" />
<meta name="ROBOTS" content="No Index" />
<meta name="Copyright" content="Copyright (c) 2004" />
<meta http-equiv="imagetoolbar" content="no" />
<meta name="MSSmartTagsPreventParsing" content="true" />

<meta name="description" content="" />
<meta name="keywords" content="" />

<link rel="help" href="about.php" title="Site info." />

<meta name="Rating" content="General" />
<meta name="revisit-after" content="2 Days" />
<meta name="doc-class" content="Living Document" />

<style type="text/css" >

body {
	padding: 0px;
	margin-top: 0px;
	background-color: #f9c;
	margin-bottom: 20px;
	color: #000;
	text-align:center;/*takes advantage of ie5 bug */
}

#upper {
	width:700px;
	margin:0 auto 10px;
	padding:0;
	text-align:left;/*correct the alignment*/
	border: 5px solid #fff;
	background: #000;
}

/*  horizontal nav */

#menu {
	width:700px;
	height:1.5em;
	margin:0 auto;
}

#menu ul {
	margin:0;
	padding:0;
	list-style-type: none;
	text-align:center;
	clear:left;
	}

#menu ul li {
	display:block;
	float: left;
	text-align: center;
	padding:0;
	margin:0;
	}

#menu ul li a {
	background: #000;
	width: 175px;
	height: 24px;
	padding:0;
	margin: 0;
	color: #f00;
	text-decoration: none;
	display: block;
	text-align: center;
	font-weight: bold;
	letter-spacing: 1px;

	line-height: 24px;

	font-size: 10px;
	font-size:    10px;

	}

#menu ul li#one 	{
	width: 46px;
	}
#menu ul li#two a	{
	width: 154px;
	}
#menu ul li#three a	{
	width: 105px;
	}
#menu ul li#four a	{
	width: 85px;
	}
#menu ul li#five a	{
	width: 56px;
	}
#menu ul li#six a	{
	width: 57px;
	}
#menu ul li#seven 	{
	width: 147px;
	}

#menu ul li a:hover {
	color:#000;
	background:#f00;
	}

#menu a:active	{
	background: #c60;
	color: #fff;
	}

#content {
	width:700px;
	margin:0 auto;
	text-align:left;
	padding:0px;
	border:5px solid #fff;
	background: url(rtr-logo.gif) #f9c;
	}
</style>
</head>

<body>

<div id="upper">

<div id="header">
<img src="top-righ.jpg" width="700" height="78" alt="" />
</div>

<div id="menu"><ul>
	<li id="one">&nbsp;</li>
	<li id="two"><a href="http://www.raisetheratesottawa.org/xhtml/link1.php" title="Link 1.">Link 1</a></li>
	<li id="three"><a href="http://www.raisetheratesottawa.org/xhtml/link2.php" title="Link 2.">Link 2</a></li>
	<li id="four"><a href="http://www.raisetheratesottawa.org/xhtml/link3.php" title="Link 3.">Link 3</a></li>
	<li id="five"><a href="http://www.raisetheratesottawa.org/xhtml/link4.php" title="Link 4.">Link 4</a></li>
	<li id="six"><a href="http://www.raisetheratesottawa.org/xhtml/link5.php" title="Link 5.">Link 5</a></li>
	<li id="seven">&nbsp;</li>
</ul></div>
</div>


<div id="content">
	<p>Here is some text</p>
	<p>Here is some more text </p>
</div>



</body>
</html>
<!-- This document saved from [url]http://www.raisetheratesottawa.org/xhtml/[/url] -->

**cometbus** · Aug 31, 2004, 14:51

Hey this works like a charm. Now to get down to sprucing it up a bit

Thanks a bunch jfitz!

The SitePoint Forums have moved.

User Tag List

Thread: Page doesn't display the same in Firefox as in Opera/IE6

Thread Tools

Display

Page doesn't display the same in Firefox as in Opera/IE6

Bookmarks

Bookmarks

Posting Permissions