Menu
Please help…. The <LI> centers in IE 6 and 7, but aligns to the left margin in every other browser. What am I doing wrong or missing?
[URL=”http://www.maiocv.com/button-test.php”]button-test.php
I’m assuming this is the best way to create a centralised button within a <DIV>, or is there a fool proof method?
Many thanks,
Mark.
All the code has been validated against W3 validators.
HTML Source Code:
[code=html]
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”content-type” content=”text/html; charset=utf-8″ />
<title>Button Test</title>
<link href=”button-test.css” rel=”stylesheet” type=”text/css” />
</head>
<body>
<div class=”MaioCVButton” style=”width:250px; height:250px; border: 1px dashed #777777;”>
<br /><br />
<div class=”MaioCVButton”>
<ul>
<li>
<a href=”www.tacv.cv”> Register your interest</a>
</li>
</ul>
<div style=”clear: both;”></div>
</div>
</div>
</body>
</html>
CSS Code:
[CODE]
.MaioCVButton ul{
border: 0;
list-style-type: none;
text-align: center;
padding: 0;
margin: auto;
}
.MaioCVButton ul li{
text-align: center;
padding: 0;
margin: auto;
}
.MaioCVButton ul li a{
cursor: pointer;
display: block;
margin: auto;
border: outset 1px #ccc;
color: #f9f9f9;
padding: 5px 0 0 0;
font: bold 12px/14px “Lucida Sans Unicode”,verdana,sans-serif;
background: #aaccee url(images/buttonbg.gif) repeat-x top left;
height: 22px;
width: 80%;
text-align: center;
overflow: hidden;
white-space: normal;
text-decoration: none;
clear: both;
}
.MaioCVButton ul li a:hover{
color: #f9f9f9;
background: #6699cc url(images/email.gif) no-repeat left top;