The following code works Opera, Firefox, Safari and Netscape. But when I test it in IE the navigation buttons change their vertical position from where they should appear. What do I have to do to get the page to look the same in all browsers?
CODE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Header and Horizantal Navaigation - JAS</title>
<style type="text/css">
#navagation {
height: 194px;
background-image: url(images/Banner.jpg);
width: 800px;
position:absolute;
left: 0px;
top: 0px;
}
#navagation ul {
padding: 0px;
list-style-type: none;
margin-left: 190px;
}
#navagation ul li {
display: inline;
}
#navagation ul li a {
float: left;
height: 6px;
padding: 8px;
text-decoration: none;
font-size: 10px;
color: #CC0000;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
margin-top: 126px;
}
#navagation ul li a:hover {
color: #FFFFFF;
}
#navagation ul li.current a:link {
border-bottom-color: #CC0000;
border-bottom-style: solid;
}
</style>
</head>
<body>
<div id="navagation">
<ul type="disc">
<li class="current"><a href="Horizonatl.html">Home</a></li>
<li><a href="about.html">About Susie</a></li>
<li><a href="services">Services</a></li>
<li><a href="work">How It Works</a></li>
<li><a href="start.html">Getting Started</a></li>
<li><a href="testimonials.html">Testimonials</a></li>
<li><a href="faq.html">FAQ</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
</body>
</html>
| 