Firstly, add
display: block; into the CSS rule which starts
div#Abutton li a { - that will sort out your links being in boxes the same size. Technically IE is in the wrong here.... it dispalys it as a block element even thought you haven't asked it to, which is bad because then you leave out the rule telling it to, and other browsers that actually follow the rules end up displaying it "wrong", even though they're actually right!
You shouldn't really be mixing CSS with old-style <font> tags etc. And cut out those tables! Old fashioned way of doing things!
Instead of the table I have done this:
<div style="position: absolute; right: 0; padding-right: 10px; padding-left: 50%; font-family: Bookman Old Style, serif; color: black; font-size: 25pt; background-color: #FF9900; text-align: right;">MySiteBank.com</div>
And since that's got an absolute position, the menu then doesn't know it's there and sits right at the top, so you have to move it down a bit:
div#Abutton{
position: absolute;
top: 60px;
margin-left:0px;
}
The full code is:
Code:<html>
<head>
<title>CSS 3D buttons</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
div#Abutton{
position: absolute;
top: 60px;
margin-left:0px;
}
div#Abutton ul {
padding:0px;
margin:0px;
font-family:Georgia, Times New Roman, Times, serif;
font-size:15px;
line-height:25px;
}
div#Abutton li {
list-style-type:none;
height: 30px;
width: 150px;
margin: 0px;
text-align:center;
}
div#Abutton li a {
color:#ffcc00;
height: 100%;
width: 100%;
text-decoration: none;
font-weight: bold;
background-color:#000000;/*#FF9900;*/
border-style: outset;
border-color:#CCCCCC;
display: block;
}
div#Abutton li a:hover {
color:#996600;
height: 100%;
margin-left:0px;
width: 100%;
text-decoration: none;
font-weight: bold;
background-color:#000000;/*#FF9900 ;*/
border-style: inset;
border-color:#CCCCCC;
}
</style>
</head>
<body bgcolor="#000000" leftmargin="0" topmargin="0">
<div style="position: absolute; right: 0; padding-right: 10px; padding-left: 50%; font-family: Bookman Old Style, serif; color: black; font-size: 25pt; background-color: #FF9900; text-align: right;">MySiteBank.com</div>
<div id="Abutton">
<ul>
<li><a href="http://www.google.com">Google</a></li>
<li><a href="http://www.Thummas.com">Thummas</a></li>
<li><a href="http://www.mail.yahoo.com">Google</a></li>
<li><a href="http://www.developerfusion.co.uk/.com">My Best Forum</a></li>
<li><a href="http://http://www.webopedia.com/">Tech Dictionary</a></li>
<li><a href="http://http://www.oup.com/elt/catalogue/teachersites/oald7/?cc=in">English
Dictionary</a></li>
<li><a href="http://www.utexas.edu/learn/flash/animation.html">Flash Guide</a></li>
</ul>
</div>
</body>
</html>
I noticed you haven't got a DOCTYPE or XHTML declaration.... you need to add those
Anyway, I hope that's of some help!
Enter your message below
Sign in or Join us (it's free).