Новая тема   Ответить

 Petek
Почему в опере, ие, хроме расстояние между первыми двумя рядами тумб какое мне надо, а в фаерфоксе (4.0.1) больше чем надо пикселя на 2?
В хроме была такая же фигня, пока не указал для ul li
Цитата:

При этом во втором блоке тумб (которые с надписями) с теми же правилами css расстояние одинаковое во всех браузерах.
Почему так?

http://www.porndiz.com/testthumbs/
HTML
<div class="photos">
<ul>
<li><a href=""><img src="img.jpg" alt="" /></a></li>
<li><a href=""><img src="img.jpg" alt="" /></a></li>
<li><a href=""><img src="img.jpg" alt="" /></a></li>
<li><a href=""><img src="img.jpg" alt="" /></a></li>
<li><a href=""><img src="img.jpg" alt="" /></a></li>
<li><a href=""><img src="img.jpg" alt="" /></a></li>
<li><a href=""><img src="img.jpg" alt="" /></a></li>
<li><a href=""><img src="img.jpg" alt="" /></a></li>
</ul>
</div>

<div class="gallery">
<ul>
<li><a href=""><img src="img2.jpg" alt="" /><br /><strong>Name</strong></a><br />Name</li>
<li><a href=""><img src="img2.jpg" alt="" /><br /><strong>Name</strong></a><br />Name</li>
<li><a href=""><img src="img2.jpg" alt="" /><br /><strong>Name</strong></a><br />Name</li>
<li><a href=""><img src="img2.jpg" alt="" /><br /><strong>Name</strong></a><br />Name</li>
<li><a href=""><img src="img2.jpg" alt="" /><br /><strong>Name</strong></a><br />Name</li>
<li><a href=""><img src="img2.jpg" alt="" /><br /><strong>Name</strong></a><br />Name</li>
<li><a href=""><img src="img2.jpg" alt="" /><br /><strong>Name</strong></a><br />Name</li>
<li><a href=""><img src="img2.jpg" alt="" /><br /><strong>Name</strong></a><br />Name</li>
</ul>
</div>

</div>
CSS
* {
   margin: 0;
   padding: 0;
   }
body {
   font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
   font-size: 13px;
   background:;
   }

div.gallery, div.photos {
   width: 698px;
   overflow: hidden;
   }
div.gallery ul, div.photos ul {
   list-style: none;
   padding: 10px 0 0 10px;
   }
div.gallery ul li, div.photos ul li {
   float: left;
   display: inline;
   padding: 1px;
   text-align: center;
   }
div.gallery ul li img, div.photos ul li img {
   width: 158px;
   height: 190px;
   border: 0;
   }
div.gallery ul li a, div.photos ul li a {
   text-decoration: none;
   }
div.gallery ul li a strong, div.photos ul li a strong {
   text-decoration: underline;
   }

 Petek
Если дописать в первый блок <br /> после ссылки (как во втором блоке), то эти 2 лишних пикселя в фаерфоксе исчезают и расстояние становится как мне надо. Какого хрена так происходит?
<div class="photos">
<ul>
<li><a href=""><img src="img.jpg" alt="" /></a><br /></li>
<li><a href=""><img src="img.jpg" alt="" /></a><br /></li>
<li><a href=""><img src="img.jpg" alt="" /></a><br /></li>
<li><a href=""><img src="img.jpg" alt="" /></a><br /></li>
<li><a href=""><img src="img.jpg" alt="" /></a><br /></li>
<li><a href=""><img src="img.jpg" alt="" /></a><br /></li>
<li><a href=""><img src="img.jpg" alt="" /></a><br /></li>
<li><a href=""><img src="img.jpg" alt="" /></a><br /></li>
</ul>
</div>

 FXIX
морочишь ты голову. браузерам
Цитата:

float: left; - зафлоаченный элемент становится блоковым
display: inline; - придает элементу свойство строкового

короче два взаимоисключающих правила.

по поводу "padding: 1px; " почитай ман. для строковых вроде паддинг только вправо-влево работает. ибо...строковый элемент выравнивается по строке согласно vertical-align. что-то такое там

 Petek
FXIX: ну уберу display:inline, тогда элемент li (у которого к тому же свойство float:lеft) будет блоковый и ман. для строковых читать уже не надо

без display:inline к фаерфоксу присоединяется хром и тоже увеличивает расстояние между двумя рядами тумб, получается опера и ие (показывают как мне надо) против хрома и фаерфокса
и даже похрену кто из них прав, скажите как сделать одинаково во всех браузерах?

 FXIX
убери float: left и оставь display:inline

это. 2 пикселя...

 Petek
в этом случае в трёх браузерах (кроме оперы) при выключенных маргинах и паддингах, расстояние между тумбами вроде 3 пикселя по вертикали и 2 пикселя по горизонтали

конечно можно было бы добавить снизу ещё 1 пиксель, но в опере всё равно не так выглядит - по вертикали (т.е. между 2 рядами тумб) вообще нет расстояния, там надо 3 пикселя добавлять

оставлю наверно первый вариант, не буду хаки использовать

 Spum
сделай так


* {
   margin: 0;
   padding: 0;
   }
body {
   font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
   font-size: 13px;
   background:;
   }

div.gallery, div.photos {
   width: 698px;
   overflow: hidden;
   }
div.gallery ul, div.photos ul {
   list-style: none;
   padding: 10px 0 0 10px;
   }
div.gallery ul li, div.photos ul li { float: left; display: block; padding: 1px; text-align: center;   }
div.gallery ul li img, div.photos ul li img { width: 158px; height: 190px; display: block; border-top-width: 0; border-right-width: 0; border-bottom-width: 0; border-left-width: 0; background-color: #333; }
div.gallery ul li a, div.photos ul li a {
   text-decoration: none;
   }
div.gallery ul li a strong, div.photos ul li a strong {
   text-decoration: underline;
   }

 Petek
Spum: спасибо!