Верстка, тумбы, фаерфокс

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

Цитата:

display: inline;

При этом во втором блоке тумб (которые с надписями) с теми же правилами 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;    }

Если дописать в первый блок <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>

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

Цитата:

div.gallery ul li, div.photos ul li { float: left; display: inline; }

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

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

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

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

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

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

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

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

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

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

сделай так

Код: [развернуть]

* {    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;    }

Spum: спасибо!