I have this simple code for a header.
Contains H1 (with an image in it) and a menu under it. My goal is to get the menu into the center of the page. It's looks OK in IE but not in FF. Why's that?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style>
a {text-decoration: none;}
h1 {margin: 0px;
padding: 0px;
text-align: center;
background-image: url(logo.jpg);
background-position: 50% 0px;
background-repeat: no-repeat;
background-color: #fff;
width: 100%;
height: 78px;
text-indent: -3000px;}
#header {background-color: #ff0000;
width: 100%;
height: 108px;
margin-bottom: 10px;}
ul#mainMenu {text-align: center;
list-style-type: none;
width: 760px;
margin: 0px 10px;}
ul#mainMenu li {float: left;}
ul#mainMenu li a{
color: #fff;
display: block;
border-bottom: 3px solid #ff0000;
padding: 6px 6px;}
ul#mainMenu li a.selected {color: #006093; border-bottom: 3px solid #fff;}
ul#mainMenu li a:hover, a.selected {color: #006093; border-bottom: 3px solid #fff;}
</style>
</head>
<body>
<div id="header">
<h1>Test</h1>
<ul id="mainMenu">
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#" class="selected">Home</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Category1</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Category2</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Category3</a></li>
</ul>
</div>
</body>
</html>
Thanks!try adding margin:auto;Where to?ul#mainMenu {text-align: center;
list-style-type: none;
width: 760px;
margin: 0px auto;}It's still doesn't work. Not sure why...Something like this?
#mainMenu {
width: 760px;
margin: 0 auto;
list-style-type: none;
padding: 0;
text-align: center;
background-color: #ff0000;
}
#mainMenu li {
display: inline;
padding: 0 10px;
}
#mainMenu li a {
border-bottom: 3px solid #ff0000;
padding: 3px;
color: #fff
}
ul#mainMenu li a.selected {color: #006093; border-bottom: 3px solid #fff;}
ul#mainMenu li a:hover, a.selected {color: #006093; border-bottom: 3px solid #fff;}Thanks
Contains H1 (with an image in it) and a menu under it. My goal is to get the menu into the center of the page. It's looks OK in IE but not in FF. Why's that?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style>
a {text-decoration: none;}
h1 {margin: 0px;
padding: 0px;
text-align: center;
background-image: url(logo.jpg);
background-position: 50% 0px;
background-repeat: no-repeat;
background-color: #fff;
width: 100%;
height: 78px;
text-indent: -3000px;}
#header {background-color: #ff0000;
width: 100%;
height: 108px;
margin-bottom: 10px;}
ul#mainMenu {text-align: center;
list-style-type: none;
width: 760px;
margin: 0px 10px;}
ul#mainMenu li {float: left;}
ul#mainMenu li a{
color: #fff;
display: block;
border-bottom: 3px solid #ff0000;
padding: 6px 6px;}
ul#mainMenu li a.selected {color: #006093; border-bottom: 3px solid #fff;}
ul#mainMenu li a:hover, a.selected {color: #006093; border-bottom: 3px solid #fff;}
</style>
</head>
<body>
<div id="header">
<h1>Test</h1>
<ul id="mainMenu">
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#" class="selected">Home</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Category1</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Category2</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Category3</a></li>
</ul>
</div>
</body>
</html>
Thanks!try adding margin:auto;Where to?ul#mainMenu {text-align: center;
list-style-type: none;
width: 760px;
margin: 0px auto;}It's still doesn't work. Not sure why...Something like this?
#mainMenu {
width: 760px;
margin: 0 auto;
list-style-type: none;
padding: 0;
text-align: center;
background-color: #ff0000;
}
#mainMenu li {
display: inline;
padding: 0 10px;
}
#mainMenu li a {
border-bottom: 3px solid #ff0000;
padding: 3px;
color: #fff
}
ul#mainMenu li a.selected {color: #006093; border-bottom: 3px solid #fff;}
ul#mainMenu li a:hover, a.selected {color: #006093; border-bottom: 3px solid #fff;}Thanks