0

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

5
Contributors
4
Replies
5
Views
5 Years
Discussion Span
Last Post by rotten69
0

Unfortunately, vertical-align doesn't work well with IE. I would suggest first determining how many pixels from the top of the page that you want your list to start. Then add: top: *number of pixels from top*;

0

also, using fixed sizes is (almost) never a good idea. you may want to make it more dynamical

 .search_box{
     width:242px;

IMHO, using dynamic values based on your screen size would be better here. (not just here, this is a mere example)

1

use a css reset than you should get the same result just google the css reset

Votes + Comments
thanks, it was helpfull for me
0

You will have to go through the CSS file and see what is not working exactly. If you find any, then try to replace it with something else or if there is not an alternative way then it means it is not supported.

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.