Space b/w border

[siri]

Hi,I am using foll code to create a tab menu.**************************************************<table class="tab" cellspacing = "0" cellpadding ="3"><tr><td id="I1" class="t1" onclick ="display(this,1)">Forthcoming<br/>Movies</td><td class="t2" width="3">|</td><td id="I2" class = "t1" onclick = "display(this,2)" >Flashback</td><td class ="t2" width ="225" >|</td></td></tr><tr><td class ="t3" colspan = "4" id ="cnt">Loading ...</td></tr></table>Here is the CSS part:------------------------------------------------------table.tab {border: 0px solid white;}td.t1{color:black;background-color:#EFF0EF;border: 1px solid black;font-weight:bold;cursor:pointer;width:90px;}td.t2{color:white;background-color:white;border-bottom : 1px solid black;border-top : 1px solid white;border-left : 1px solid white;border-right : 1px solid white;font-size:1pt;}td.t3{color:black;background-color:white;border-bottom : 1px solid black;border-top : 1px solid white;border-left : 1px solid black;border-right : 1px solid black;padding:0px;}***********************************************Even though the cellspacing is 0 but still there exists a gap between the border.Where exactly is the mistake.

[roondog]

try using an unordered list rather than your table and floating the <li>s<ul><li>id="I1" class="t1" onclick ="display(this,1)">Forthcoming<br/>Movies</li><li>class="t2" width="3">|</li><li id="I2" class = "t1" onclick = "display(this,2)" >Flashback</li><li class ="t2" width ="225" >|</li></ul><ul><li class ="t3" colspan = "4" id ="cnt">Loading ...</li></ul>.t1{color:black;background-color:#EFF0EF;border: 1px solid black;font-weight:bold;cursor:pointer;width:90px;float:left;}.t2{color:white;background-color:white;border-bottom : 1px solid black;border-top : 1px solid white;border-left : 1px solid white;border-right : 1px solid white;font-size:1pt;float:left;}.t3{color:black;background-color:white;border-bottom : 1px solid black;border-top : 1px solid white;border-left : 1px solid black;border-right : 1px solid black;padding:0px;float:left;}

[packrat]

Those 'breaks' in your border are the white borders. Tables are the obvious choice for a lot of beginners but they are more trouble than their worth for the type of feature you're working on. Try either a list based solution like Roondog suggests or if that is over your head try divs or just plain old anchors.The only thing a table does (arguably) better is provide easy vertical centering.

<style type="text/css">div.TabMenu, div.TabContent{width:500px; clear:left;}div.TabContent{border:1px solid #000;}a.TabItem{	display:block; float:left; padding:4px; margin-right:12px; height:42px; width:82px; 	color:black; background-color:#EFF0EF; border:1px solid black; border-bottom:none; font-weight:bold; text-decoration:none;}</style><div class="TabMenu"><a href="#" class="TabItem">Forthcoming Movies</a><a href="#" class="TabItem">Flashback</a></div><div class="TabContent">Loading ..</div>

Alternatively if you're married to the table approach try revisiting your approach to the borders -- that's where the problem is.{[~PakRat~]}