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

Recommended Answers

All 4 Replies

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*;

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)

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

commented: thanks, it was helpfull for me +2

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.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.