@smoklew

Почему из-за line-height страница расширяется?

У меня проблема, когда блок с line-height , по высоте выходит за размеры окна и появляется скролл страницы вниз , у меня появляется также горизонтальный скролл, хотя размеры по ширине остаются 1024...
<div class="brands">
<h1>Все марки</h1>
<table id="tbrands">
<tbody>
<tr>

<td id="first_column">
<li><img src="img/alfaromeo.png"><a href="alfaromeo.html">ALFA ROMEO</a></li>
<li><img src="img/audi.png"><a href="">AUDI</a></li>
<li><img src="img/bmw.png"><a href="">BMW</a></li>
<li><img src="img/chery.png"><a href="">CHERY</a></li>
<li><img src="img/chevrolet.png"><a href="">CHEVROLET</a></li>
<li><img src="img/chrysler.png"><a href="">CHRYSLER</a></li>
<li><img src="img/citroen.png"><a href="">CITROEN</a></li>
<li><img src="img/daewoo.png"><a href="">DAEWOO</a></li>
<li><img src="img/daihatsu.png"><a href="">DAIHATSU</a></li>
</td>

<td id="twist_column">
<li><img src="img/dodge.png"><a href="">DODGE</a></li>
<li><img src="img/fiat.png"><a href="">FIAT</a></li>
<li><img src="img/ford.png"><a href="">FORD</a></li>
<li><img src="img/mercury.png"><a href="">MERCURY</a></li>
<li><img src="img/greatwall.png"><a href="">GREAT WALL</a></li>
<li><img src="img/honda.png"><a href="">HONDA</a></li>
<li><img src="img/hyundai.png"><a href="">HYUNDAI</a></li>
<li><img src="img/infinity.png"><a href="">INFINITY</a></li>
<li><img src="img/isuzu.png"><a href="">ISUZU</a></li>
</td>
<td id="third_column">
<li><img src="img/jeep.png"><a href="">JEEP</a></li>
<li><img src="img/kia.png"><a href="">KIA</a></li>
<li><img src="img/lancia.png"><a href="">LANCIA</a></li>
<li><img src="img/landrover.png"><a href="">LAND ROVER</a></li>
<li><img src="img/lexus.png"><a href="">LEXUS</a></li>
<li><img src="img/linkoln.png"><a href="">LINKOLN</a></li>
<li><img src="img/mazda.png"><a href="">MAZDA</a></li>
<li><img src="img/mercedes.png"><a href="">MERCEDES-BENZ</a></li>
<li><img src="img/mini.png"><a href="">MINI</a></li>
</td>
<td id="fourth_column">
<li><img src="img/mitsubishi.png"><a href="">MITSUBISHI</a></li>
<li><img src="img/nissan.png"><a href="">NISSAN</a></li>
<li><img src="img/opel.png"><a href="">OPEL</a></li>
<li><img src="img/peugeot.png"><a href="">PEUGEOT</a></li>
<li><img src="img/plymouth.png"><a href="">PLYMOUTH</a></li>
<li><img src="img/pontiac.png"><a href="">PONTIAC</a></li>
<li><img src="img/porsche.png"><a href="">PORSCHE</a></li>
<li><img src="img/renault.png"><a href="">RENAULT</a></li>
<li><img src="img/rover.png"><a href="">ROVER</a></li>
</td>


<td id="fifth_column">
<li><img src="img/saab.png"><a href="">SAAB</a></li>
<li><img src="img/seat.png"><a href="">SEAT</a></li>
<li><img src="img/skoda.png"><a href="">SKODA</a></li>
<li><img src="img/ssangyoung.png"><a href="">SSANGYONG</a></li>
<li><img src="img/subaru.png"><a href="">SUBARU</a></li>
<li><img src="img/suzuki.png"><a href="">SUZUKI</a></li>
<li><img src="img/toyota.png"><a href="">TOYOTA</a></li>
<li><img src="img/vw.png"><a href="">VOLKSWAGEN</a></li>
<li><img src="img/volvo.png"><a href="">VOLVO</a></li>
</td>
</tr>
</tbody>
</table>
</div><!--end brands-->


.brands
{
clear: both;
float: left;
width: 100%;
margin-top: 50px;
font-size: 10px;
line-height: 35px;
}
.brands h1
{
font-size: 15px;
text-align: center;
}
#tbrands
{
margin-top:10px;
margin-left: auto;
margin-right: auto;
list-style: none;

}
#tbrands img
{
width: 15%;
}

#first_column,#twist_column,#third_column,#fourth_column,#fifth_column
{
padding: 0px 10px;
}
#tbrands li
{
border-bottom: 1px solid #dadada;
padding-top: 5px;
}
#tbrands a
{
color: #000;
margin-left: 10px;
}
#tbrands a:hover
{
color: #0d95f4;
text-decoration: none;
border-bottom: 2px dotted;
}
  • Вопрос задан
  • 206 просмотров
Пригласить эксперта
Ответы на вопрос 1
@Mycolaos
У меня все ок в хроме, лисе, опере и ие. А Вы в каком браузере пробовали?

Вероятно, на это влияет какой-то ещё код, который Вы здесь не привели. Может в инспектора кода посмотрите хорошо на стили.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы