Hi
I have made a webpage with css. Its working fine in firefox. but not working in Explorer. But when I zoomout to 90% its working in IE.
html code is
<html>
<head>
<title>test slice</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="header_border">
<div class="table">
<ul><li></li>
<li class="logo">
<img src="images/logo.png" alt=""></li>
<li>
<a href="#" class="header_link">Home</a></li>
<li>
<a href="#" class="header_link">Navigate</a></li>
<li>
<a href="#" class="header_link">Convert by link</a></li>
<li>
<a href="#" class="header_link">Tel A Friend</a></li>
<li><input type="text" class="search_box"></li>
<li>
<a href="#" class="header_link">People</a></li>
<li>
<a href="#" class="header_link">Category</a></li>
<li>
<a href="#" class="header_link">Upload</a></li>
<li>
<a href="#" class="header_link">Login | Register</a></li>
<li></li>
</ul>
</div>
</div>
Body
</body>
</html>
and my css code is
body{
margin:0px;
text-align:center;
}
.header_link{
text-decoration:none;
color:#3aa2e8;
font-size:12px;
text-align:center;
font-family:Verdana, Geneva, sans-serif;
}
.header_link:hover{
color:#FF0000;
}
.search_box{
width:242px;
padding:0px 35px 0px 5px;
height:27px;
border:none;
background:url(images/search_box.png);
}
ul li{
float:left;
vertical-align:middle;
text-align:center;
padding:0px 5px 0px 5px;
display:inline;
}
.logo{
float:left;
vertical-align:middle;
text-align:center;
margin-top:-15px;
}
ul{
list-style-type: none;
vertical-align:middle;
text-align:center;
height:37px;
display:table;
margin-bottom:0px;
}
.table {
display: table; /* Allow the centering to work */
margin: 0 auto;
height:37px;
}
#header_border{
background:url(images/header_bg.png);
position:fixed;
width:100%;
}
special problem is in firefox list Items are vertically middle. But in IE its at TOP.
Plz help me
