Hi,
I am trying to create tabs using two images, the main background image and then the mouse over image, code i hv written after reading guidelines from a book so thats why cant completly understand where is the problem:
css code:
body {
font: 62.5%/1.5 Verdana, Arial, Helvetica, sans-serif;
background-color:#E5E5E5;
}
#content {
border-top: 1px solid #898989;
border-right: 1px solid #898989;
border-bottom: 1px solid #898989;
border-left: 1px solid #898989;
}
#navContainer {
font: 1.1em Arial, Helvetica, sans-serif;
text-align: center;
padding: 20px 0 0;
}
#navigation
{
padding:0px;
}
#navigation a:link {
text-transform: uppercase;
text-decoration: none;
padding: 5px 10px;
position: relative;
margin-right: 5px;
}
#navigation a:visited {
text-transform: uppercase;
text-decoration: none;
padding: 5px 10px;
position: relative;
}
#navigation #contactDetailsPageLink a:link, #navigation
#contactDetailsPageLink a:visited {
margin-right: 0;
}
<!-- to change font color of links-->
#navigation a:visited {
color:#CCCCCC;
}
#navigation a:hover {
background-image:url(tab-hover.JPG);
color:#FFFFFF;
}
#navigation ul {
list-style: none;
margin-bottom:5px;
}
#navigation li {
display: inline;
padding: 0px 9px;
background-image:url(main_tab.JPG);
}
#navigation a:active {
color:#FFFFFF;
}
#wrapper {
margin-top:0px;
margin-left:95px;
}
</style>
Html code is:
<body id="homepage">
<div id="navContainer">
<div id="navigation">
<ul>
<li id="pro"><a href="#" onClick="chk('pro')">Provinces</a></li>
<li id="loc"><a href="#" onClick="chk('loc')">Locations</a></li>
<li id="slide"><a href="#" onClick="chk('slideshow')">Slide Show</a> </li>
<li id="users"><a href="#" onClick="chk('users'">Users</a></li>
</ul>
</div>
</div>
<div id="wrapper">
<iframe height="1000" width="800" id="content" scrolling="no" frameborder="0">
</iframe>
</div>
</body>
I have attached the two images also. First the problem is that there should not be any space between the tabs, and secondly the tab-hover image is not accurate.
Please guide
Thanks
