I m trying to make a template for my website. there is a top box and a navigation box. Position of navigation box is relative to top box and at a 5% of distance from top box. This distance is visible in Internet explorer but in mozilla navigation box appears right after the top box. No gap between both.
How can i show gap between the two bars in mozilla as well.
Also contents of navigation bar are horizontally in center but not vertically. and i cant set them in middle. How can i do that?
<!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=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
<!--
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
background-color:#FFFFFF
}
.top {
background-image: url(top.gif);
background-repeat: repeat-x;
height: 92px;
border: 1px solid #CCCCCC;
}
.logo {
top: 40px;
position: relative;
left: 20px;
}
.nav {
background-image: url(nav_back.gif);
background-repeat: repeat-x;
position: relative;
top: 5%;
border: 1px solid #CCCCCC;
height: 50px;
right: 5%;
width: 90%;
left: 5%;
text-align: center;
vertical-align: text-bottom;
z-index: 0;
}
.nav_right{
background-image: url(nav_right.gif);
height: 52px;
position: absolute;
background-repeat: no-repeat;
right: -30px;
width: 30px;
z-index: 1;
clip: rect(auto,auto,auto,auto);
top: 0px;
bottom: 0%;
}
.nav_left{
background-image: url(nav_left.gif);
height: 52px;
position: absolute;
background-repeat: no-repeat;
left: -5px;
width: 30px;
z-index: 1;
clip: rect(auto,auto,auto,auto);
top: 0px;
bottom: 0%;
}
-->
</style>
</head>
<body>
<div class="top"><img class="logo" src="logo.gif"/></div>
<div class="nav">abc<div class="nav_left"></div><div class="nav_right"></div>
</div>
</body>
</html>