Проблем с таблица

N

NumseR

Registered
Здравейте ! :)

Имам си аз една таблица, която ми дава някакъв странен, поне за мен, бъг.
Преди всичко ето едно демо.
Проблема идва когато искам да добавя още редове в синята таблица.
Когато добавя например 17, 18, 19 и т.н ред, червените таблици слизат автоматично няколко пиксела надолу.
Пробвах да слагам някакви регулиращи div-ове, но без никакъв успех.
Някой имал ли е подобен проблем и съответно решение за него ? :roll:


Ето и кода.

HTML

Код: 
<div id="match-rank-team-cont">
<div class="box-team-round">
    <div class="top-team-round"></div>
    <div class="content-team-round">
	
<table cellspacing='0'> 
		<tr>
		<th>Column</th> 
		<th>Column</th> 
		<th>Column</th> 
		<th>Column</th> 
		
</tr>
		
		
<tr><td>01.</td><td><span class="team-fix">Content1</a></span></td><td>sub.cont</td><td>sub</td></tr>
		
<tr><td>02.</td><td><span class="team-fix">Content11</a></span></td><td>sub.cont</td><td>sub</td></tr>
		
<tr><td>03.</td><td><span class="team-fix">Content11</a></span></td><td>sub.cont</td><td>sub</td></tr>
		
<tr><td>04.</td><td><span class="team-fix">Content11</a></span></td><td>sub.cont</td><td>sub</td></tr>
		
<tr><td>05.</td><td><span class="team-fix">Content11</a></span></td><td>sub.cont</td><td>sub</td></tr>
		
<tr><td>06.</td><td><span class="team-fix">Content1111</a></span></td><td>sub.cont</td><td>sub</td></tr>
		
<tr><td>07.</td><td><span class="team-fix">Content111</a></span></td><td>sub.cont</td><td>sub</td></tr>
		
<tr><td>08.</td><td><span class="team-fix">Content111</a></span></td><td>sub.cont</td><td>sub</td></tr>
		
<tr><td>09.</td><td><span class="team-fix">Content111</a></span></td><td>sub.cont</td><td>sub</td></tr>
		
<tr><td>10.</td><td><span class="team-fix">Content111</a></span></td><td>sub.cont</td><td>sub</td></tr>
		
<tr><td>11.</td><td><span class="team-fix">Content11</a></span></td><td>sub.cont</td><td>sub</td></tr>
		
<tr><td>12.</td><td><span class="team-fix">Content11111</a></span></td><td>sub.cont</td><td>sub</td></tr>
		
<tr><td>13.</td><td><span class="team-fix">Content111</a></span></td><td>sub.cont</td><td>sub</td></tr>
		
<tr><td>14.</td><td><span class="team-fix">Content111</a></span></td><td>sub.cont</td><td>sub</td></tr>
		
<tr><td>15.</td><td><span class="team-fix">Content111</a></span></td><td>sub.cont</td><td>sub</td></tr>
		
<tr><td>16.</td><td><span class="team-fix">Content111</a></span></td><td>sub.cont</td><td>sub</td></tr>
		
		</table>
			<div id="line2">
			
			
<p class="prev-team-round">Sample</p>
			<div id="prev-game-round-cont">
			
<table cellspacing='0'> 
			
<tr><td>Content121</td><td><span class="team-fix">-:-</span></td><td>Content111</td></tr>
			
<tr><td>Content111</td><td><span class="team-fix">-:-</span></td><td>Content111</td></tr>
			
<tr><td>Content121</td><td><span class="team-fix">-:-</span></td><td>Content111</td></tr>
			
<tr><td>Content121</td><td><span class="team-fix">-:-</span></td><td>Content131</td></tr>
			
<tr><td>Content111</td><td><span class="team-fix">-:-</span></td><td>Content311</td></tr>
			
<tr><td>Content151</td><td><span class="team-fix">-:-</span></td><td>Content111</td></tr>
			
<tr><td>Content611</td><td><span class="team-fix">-:-</span></td><td>Content121</td></tr>
			
<tr><td>Content161</td><td><span class="team-fix">-:-</span></td><td>Content111</td></tr>
			</table>
			</div>
			
<p class="next-team-round">Sample2</p>
			<div id="next-game-round-cont">
			
<table cellspacing='0'> 
			<tr><td>Content121</td><td><span class="team-fix">-:-</span></td><td>Content141</td></tr>
			
<tr><td>Content131</td><td><span class="team-fix">-:-</span></td><td>Content511</td></tr>
			
<tr><td>Content141</td><td><span class="team-fix">-:-</span></td><td>Content211</td></tr>
			
<tr><td>Content151</td><td><span class="team-fix">-:-</span></td><td>Content611</td></tr>
			
<tr><td>Content151</td><td><span class="team-fix">-:-</span></td><td>Content154/td></tr>
			
<tr><td>Content121</td><td><span class="team-fix">-:-</span></td><td>Content141</td></tr>
			
<tr><td>Content141</td><td><span class="team-fix">-:-</span></td><td>Content11431</td></tr>
			
<tr><td>Content121</td><td><span class="team-fix">-:-</span></td><td>Content1131</td></tr>
			</table>
			</div>
			
			</div>
				<img class="vert-line-big-team" src="img/vert-line-big.gif" />
			</div>

</div>
</div>

CSS

Код: 
.box-team-round { width: 602px; margin: 80px 0 0 15px; }

.box-team-round .top-team-round { width: 605px; height: 30px; background: url(img/big-intext-head.gif) no-repeat; }

.box-team-round .content-team-round {width: 420x; border: 1px solid #c0c0c0; border-top: none;padding: 5px; margin: 0 0 0 2px; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; } 




#match-rank-team-cont table{width:250px;}

#match-rank-team-cont th{height:40px;padding-left: -6px;} 

#match-rank-team-cont {border: 1px solid blue; width: 300px; height: 500px; }

#match-rank-team-cont td {padding-left: 15px; border-bottom: 1px solid 

#c0c0c0; padding-top: 2px;} 

#match-rank-team-cont tr:hover {background-color: #f4f5f5; } 

.team-fix {font-weight: bold;}

.team-fix:hover {text-decoration: underline;} 

.vert-line-big-team   {margin: -370px 0 0 290px; height: 370px;} 

.prev-team-round {margin: -337px 0 0 330px; font-weight: bold; color: 
#ff673a; text-decoration: underline;} 

#prev-game-round-cont {margin: 13px 0 0 325px; border: 1px solid red;} 

#next-game-round-cont {margin: 5px 0 0 325px; border: 1px solid red;} 

.next-team-round {margin: 7px 0 0 330px; font-weight: bold; color: 
#ff673a; text-decoration: underline;}
 
HTML: 
<tr><td>Content151</td><td><span class="team-fix">-:-</span></td><td>Content154[color=red]</td>[/color]</tr>

имаш проблем с това. Не трябва да използваш отрицателни margin-и за да нагласиш съдържанието, а при теб ти трябва float: right; на дясната таблица за да не пада надолу спрямо лявата.
 
HTML: 
<div class="clear">
<div id="left">
<table>слагаш лявата таблица тук
</div>
<div id="right">
<table>слагаш дясната таблица тук
</div>
</div>

[css]
.clear:after{
display: block;
content: "";
clear: both;
}
#left{
float: left;
}
#right{
float: left;
}
[/css]
 
Трябва да си влезнал или регистриран, за да отговориш тук.

Back
Горе