PDA

View Full Version : Button centering menu



shinta
Dec 7th, 2006, 03:14 PM
Hi,

I am making a webpage and am having a bit of trouble. mcleavers.com/main.php is the file which is giving me pain. On that I have a menu which had buttons which change colur on a rollover affect. The problem is trying to line these buttons up with the background. On my firefox it looks okay but IE and Safari make it dodgy. Any ideas or if need be alternitives.

_Aerospace_Eng_
Dec 7th, 2006, 03:18 PM
I get a 404 Not Found with that url.

shinta
Dec 8th, 2006, 07:13 AM
My bad I meant www.underground-realm.com/main.php

_Aerospace_Eng_
Dec 8th, 2006, 05:26 PM
Try this

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
* {
border:0;
margin:0;
padding:0;
}

html,body {
background:#FFF url(backdrop1.jpg) repeat-x;
color:#000;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:13px;
height:100%;
}

#container {
min-width:630px;
}

#header {
height:252px;
background:url(logo.jpg) top center no-repeat;
text-indent:-9999px;
}

#header h1 {
font-size:130%;
}

#menucontain {
height:47px;
background:url(repeat-background-menu.jpg) repeat-x;
text-align:center;
}

#menu {
list-style:none;
height:47px;
width:630px;
margin:0 auto;
}

#menu li {
float:left;
}

#menu a {
width:126px;
display:block;
height:47px;
font:bold 18px/1 sans-serif;
color:#060;
background:url(images/button1.jpg) no-repeat;
text-decoration:none;
text-align:bottom;
line-height:47px;
text-align:center;
}

#menu a:hover {
background-position:-157px 0;
color:#D7A51D;
text-align:bottom;
}

.clear {
clear:both;
font-size:0;
line-height:0px;
}
</style>
<!--[if lte IE 6]>
<style type="text/css">
body {
width:expression( documentElement.clientWidth < 630 ? (documentElement.clientWidth == 0 ? (body.clientWidth < 630 ? "630px" : "auto") : "630px") : "auto" );
}
</style>
<![endif]-->
</head>
<body>
<div id="container">
<div id="header">
<h1>M.C. Leavers of 2006</h1>
</div>
<div id="menucontain">
<ul id="menu">
<li><a href="#">Upload</a></li>
<li><a href="#">Images</a></li>
<li><a href="#">Search</a></li>
<li><a href="#">Forum</a></li>
<li><a href="#">Events</a></li>
</ul>
<div class="clear">&nbsp;</div>
</div>
</div>
</body>
</html>

Don't use tables for page layout and its always best to use a proper full doctype.