Web Design
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Online Hangout</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="site">
<!-- header -->
<div id="header">
<div id="menu" align="center">
<ul>
<li><a href="index.html" class="btnHome active"><img src="images/btn/spacer.gif" alt="" width="120" height="36"></a></li>
<li><a href="portfolio.html" class="btnPort"><img src="images/btn/spacer.gif" alt="" width="120" height="36"></a></li>
<li><a href="#.html" class="btnVideos"><img src="images/btn/spacer.gif" alt="" width="120" height="36"></a></li>
<li><a href="#.html" class="btnNews"><img src="images/btn/spacer.gif" alt="" width="120" height="36"></a></li>
<li><a href="#.html" class="btnGallery"><img src="images/btn/spacer.gif" alt="" width="120" height="36"></a></li>
<li><a href="#.html" class=" btncontacts"><img src="images/btn/spacer.gif" alt="" width="120" height="36"></a></li>
<li><a href="#.html" class=" btnAbout"><img src="images/btn/spacer.gif" alt="" width="120" height="36"></a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
CSS Styling
* {
margin : 0;
padding : 0;
text-align : center;
}
html {
width : 100%;
height : 100%;
background-color : #222222;
}
body {
width : 100%;
height : 100%;
background: url('images/hdr-bg.gif') top left repeat-x;
}
#site {
width : 988px;
margin : 0 auto;
}
#header {
padding : 15px 0 15px 0;
width : 988px;
overflow : hidden;
position : relative;
}
#menu {
width : 988px;
height : 36px;
margin : 0;
padding : 0px 0 0 14px;
}
#menu ul {
overflow : hidden;
padding : 0 3px 0 0;
}
#menu li {
display : inline;
list-style-type : none;
}
#menu a {
display : block;
float : left;
}
...
...
...
Hello, I'm facing two issues with the menu on my website. Firstly, I need to centralize the menu but removing the "float:left" property would affect its horizontal alignment. Secondly, the button images don't seem to align properly in Internet Explorer. Each button image has a length of 120px. Your help and suggestions would be greatly appreciated.