Hi I need help. How do I center my menu,
and the hover displays right in ie but not right in firefox.
In firefox the background-color black displays bigger than
the menu div.
Help
<html>
<head>
<title>test</title>
<style>
body
{
font-family: arial,tahoma;
font-size: .78em;
text-align: center;
line-height: 200%;
margin: 0;
padding: 0;
background-color:#CCCCCC;
}
#container
{
width: 747px;
text-align: left;
margin: 0 auto 0 auto;
background-color:white;
}
#header
{
width: 747px;
height: 198px;
background-color: #000066;
}
h1
{
color: white;
width: 747px;
height: 198px
}
#menu
{
width: 747px;
background-color:#990000;
}
#menu ul
{
margin:0;
padding:0;
}
#menu li
{
list-style: none;
display: inline;
text-transform: uppercase;
padding: 5px 0 5px 0;
}
#menu li a
{
text-decoration: none;
color: white;
padding: 10px;
}
#menu li a:hover
{
color: white;
background-color: #000000;}
#content
{
float: right;
width: 450px;
padding: 0 0 0 10px;
}
#content span
{
color: #990000;
font-size:16px;}
h3
{
color:#990000;
margin-top: 10px;}
h2
{color:#990000;
font-size: 15px;}
#footer
{
clear: both;
border-top: 3px green white;
width: 747px;
height: 50px;
background-color: #990000;
</style>
</head>
<body>
<div id= "container">
<div id="header">
<h1>header</h1>
</div>
<div id="menu">
<ul>
<li><a href="#">Theme</a></li>
<li><a href="#">Registration</a></li>
<li><a href="#">Hotels</a></li>
<li><a href="#">Directions</a></li>
<li><a href="#">Order Souvenirs</a></li>
<li><a href="#">Reunion Team</a></li>
<li><a href="#">FAQS</a></li>
</ul></div>
<div id="content">
<h3>Welcome</h3>
</div>
<div id="sidebar">
sidebar
</div>
<div id="footer">
<h1>footer</h1>
</div>
</div>
</body>
</html>
and the hover displays right in ie but not right in firefox.
In firefox the background-color black displays bigger than
the menu div.
Help
<html>
<head>
<title>test</title>
<style>
body
{
font-family: arial,tahoma;
font-size: .78em;
text-align: center;
line-height: 200%;
margin: 0;
padding: 0;
background-color:#CCCCCC;
}
#container
{
width: 747px;
text-align: left;
margin: 0 auto 0 auto;
background-color:white;
}
#header
{
width: 747px;
height: 198px;
background-color: #000066;
}
h1
{
color: white;
width: 747px;
height: 198px
}
#menu
{
width: 747px;
background-color:#990000;
}
#menu ul
{
margin:0;
padding:0;
}
#menu li
{
list-style: none;
display: inline;
text-transform: uppercase;
padding: 5px 0 5px 0;
}
#menu li a
{
text-decoration: none;
color: white;
padding: 10px;
}
#menu li a:hover
{
color: white;
background-color: #000000;}
#content
{
float: right;
width: 450px;
padding: 0 0 0 10px;
}
#content span
{
color: #990000;
font-size:16px;}
h3
{
color:#990000;
margin-top: 10px;}
h2
{color:#990000;
font-size: 15px;}
#footer
{
clear: both;
border-top: 3px green white;
width: 747px;
height: 50px;
background-color: #990000;
</style>
</head>
<body>
<div id= "container">
<div id="header">
<h1>header</h1>
</div>
<div id="menu">
<ul>
<li><a href="#">Theme</a></li>
<li><a href="#">Registration</a></li>
<li><a href="#">Hotels</a></li>
<li><a href="#">Directions</a></li>
<li><a href="#">Order Souvenirs</a></li>
<li><a href="#">Reunion Team</a></li>
<li><a href="#">FAQS</a></li>
</ul></div>
<div id="content">
<h3>Welcome</h3>
</div>
<div id="sidebar">
sidebar
</div>
<div id="footer">
<h1>footer</h1>
</div>
</div>
</body>
</html>