The webpage is www.voteforvan.com In firefox of course it is perfect. In IE7 the menu isn't showing up and the search box disappeared all together. In IE8 the search box is out of place. Can someone help me find an answer to this.
A:
Your markup has a lot of extra/unnecessary elements, so it's difficult to pick out exactly what's causing the problem.
This code works fine on its own (tested in Safari/Mac, Firefox/Mac, Opera/Mac, IE7 and IE8), so you may be able to shoehorn it into your existing HTML. Just watch out for inheritance and the cascade; use Firebug or something to be sure you're not picking up any of your existing styles.
<!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" xml:lang="en-gb" lang="en-gb" >
<head>
<title>Welcome</title>
<style type="text/css" media="screen">
body {
background-color: #5a5f4b;
font: 12px/1 Helvetica, Arial, sans-serif;
}
ul {
margin: 0;
padding: 0;
}
li {
float: left;
list-style: none;
}
a {
display: block;
border-left: 1px solid #fff;
border-top: 1px solid #cfdeff;
padding: 0.75em 1em;
}
a:link,
a:visited {
background-color: #aeb594;
color: #1133aa;
text-decoration: none;
}
a:hover,
a:active {
background-color: #fff;
color: #000;
text-decoration: underline;
}
form {
float: left;
margin-left: 10px;
display: inline; /* fixes double-margin float bug in IE; you can put this in a conditional stylesheet if you want */
}
</style>
</head>
<body>
<div id="tabarea">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Meet Van</a></li>
<li><a href="#">The News</a></li>
<li><a href="#">Events</a></li>
<li><a href="#">Search</a></li>
<li><a href="#">Donate</a></li>
</ul>
<form method="post" action="index.php">
<input type="text" value="search..." size="20" />
</form>
<br clear="all" />
</div>
</body>
</html>
Bungle
2009-09-27 07:37:09