Having some trouble with the vertical alignment of navigation menu icons in Safari and Firefox. Any suggestions on how to fix this issue?
HTML
<!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>Untitled Document</title>
<link href="reset.css" rel="stylesheet" type="text/css" />
<link href="about_DELETE.css" rel="stylesheet" type="text/css" />
<link href='http://fonts.googleapis.com/css?family=Roboto+Condensed:700' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="navbar">
<div id="logo"></div>
<div class="navbordertop"></div>
<ul>
<span class="menuico"><li><a href="#">Menu</a></li></span>
<span class="menuico2"><li><a href="#">Menu2</a></li></span>
<span class="menuico3"><li><a href="#">Menu3</a></li></span>
<span class="menuico4"><li><a href="#">Menu4</a></li></span>
<span class="menuico5"><li><a href="#">Menu5</a></li></span>
<span class="menuico6"><li><a href="#">Menu6</a></li></span>
<span class="menuico7"><li><a href="#">Menu7</a></li></span>
<span class="menuico8"><li><a href="#">Menu8</a></li></span>
</ul>
</div>
<div id="container"></div>
</body>
</html>
CSS
body {
margin: 0;
}
html {
background: url("images/site-bg.jpg") repeat scroll 0 50px transparent;
position: relative;
}
#navbar {
border-bottom: 1px solid #56831b;
background-color: #8898a2;
clear: both;
float: left;
height: 80px;
margin: 0 auto 6px;
width: 100%;
z-index: 99999;
position: absolute;
top: 0;
margin-bottom: 80px;
}
#navbar a {
text-decoration: none;
font-family: 'Roboto Condensed', sans-serif;
font-size: 15px;
color: #ebfedb;
text-transform: uppercase;
padding: 11px 0 8px 0;
}
#navbar ul {
float: right;
list-style-type:none;
line-height: 3.333em;
text-decoration: none;
display: block;
margin-right: 95px;
margin-top: 35px;
}
#navbar li {
display:inline;
padding: 15px 15px 9px 20px;
}
.menuico li:hover {
background: url(images/home.png) no-repeat 0 13px;
}
.menuico2 li:hover {
background: url(images/home.png) no-repeat 0 13px;
}
.menuico3 li:hover {
background: url(images/home.png) no-repeat 0 13px;
}
.menuico4 li:hover {
background: url(images/home.png) no-repeat 0 13px;
}
.menuico5 li:hover {
background: url(images/home.png) no-repeat 0 13px;
}
.menuico6 li:hover {
background: url(images/home.png) no-repeat 0 13px;
}
.menuico7 li:hover {
background: url(images/home.png) no-repeat 0 13px;
}
.menuico8 li:hover {
background: url(images/home.png) no-repeat 0 13px;
}
#container {
margin: 80px auto -40px;
position: relative;
width: 100%;
overflow: hidden;
}