HTML and CSS

css tabs formation problem

Please support our HTML and CSS advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases

•

Join Date: Apr 2005

Posts: 149

Reputation: marjan_m is an unknown quantity at this point

Solved Threads: 0

marjan_m

Offline

Junior Poster

css tabs formation problem

Jun 11th, 2009

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:

 Help with Code Tags 
 css Syntax (Toggle Plain Text) 
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>
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:

 Help with Code Tags 
 html Syntax (Toggle Plain Text) 
 
<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>
<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

Attached Thumbnails