...

View Full Version : Button centering menu



shinta
12-07-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_
12-07-2006, 03:18 PM
I get a 404 Not Found with that url.

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

_Aerospace_Eng_
12-08-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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum