Баг с a > img (лишние отступы)

[TonKhaO]

Обнаружил еще не понятный мне баг, который вылезает в ФФ, ОПЕРЕ и ИЕ

если я внутрь тега A кладу IMG то если посмотреть на скриншот ссылка не облегает изображение визуально а просто как бы прилеплена к низу (см. скриншот, выделенным синим) + образуется еще непонятный отступ у а снизу! как пофиксить чтобы этих 2-х проьлем не было? пробовал overflow: hidden не помогло

[psywalker]

1) Чё то я не понял, где она прилеплена? Объясни подробнее

2) А ты делаешь имгу блочной?

3) Давай ссылку на страницу?

[mishka]

http://forum.htmlbook.ru/index.php?showtopic=13589

только там один из вариантов решения: vertical-align:bottom;

а я это делаю: vertical-align:top;

Edited April 9, 2010 by mishka2

[TonKhaO]

1) Чё то я не понял, где она прилеплена? Объясни подробнее

2) А ты делаешь имгу блочной?

3) Давай ссылку на страницу?

1. ну посмотри вверх на скриншот, ссылка как бэ не облегает картинку

2. неа, имга у меня не блочная

3. вот ссылка http://www.homeoclass.ru/index_new.html

http://forum.htmlbook.ru/index.php?showtopic=13589

только там один из вариантов решения: vertical-align:bottom;

а я это делаю: vertical-align:top;

думаю не совсем хорошее решение, ведь вертикал-алигн в ИЕ 6 будет не работать

[psywalker]

Ну и чё ты замыкаешь?

Ссылки делаем флоат лефт, картинки блочные, далее родителю ссылок оверфлоу, вот и всё.

[stars]

Все работает нормально... В IE6 кстати говоря у вас уже косяки на сайте вылезают ))

[TonKhaO]

Ну и чё ты замыкаешь?

Ссылки делаем флоат лефт, картинки блочные, далее родителю ссылок оверфлоу, вот и всё.

так всегда сложно было?

беда в том что если ссылкам флоаты сделаю они перестанут выравнивать по родительскому параметру text-align

Все работает нормально... В IE6 кстати говоря у вас уже косяки на сайте вылезают ))

я его переверстываю, косяки остальные не мои, пока не подправил, а работает на самом деле он ненормально :-)

Edited April 9, 2010 by TonKhaO

[mishka]

думаю не совсем хорошее решение, ведь вертикал-алигн в ИЕ 6 будет не работать

Кто вас так обманывает?

[TonKhaO]

Кто вас так обманывает?

http://htmlbook.ru/css/vertical-align.html

[DjTarik]

по-ходу простой display: block; для картинки поможет...

[mishka]

там не сказанно что не поддерживается! Там сказанно - частично!

поэтому в вашем случае vertical-align:top; на имгу все исправит, вам что сложно попробовать? Или если попробуете то боитесь что все так развалится что невосстановить?

Сразу попробуйте потом скажите помогло или нет.

Ладно я не авторитет для вас, но s0rr0w что тоже?

по-ходу простой display: block; для картинки поможет...

Да это тоже помагает, но часто картинка нужна именно инлайновой, а не блочной поэтому приходится применять сложный vertical-align:top;

Edited April 9, 2010 by mishka2

[DjTarik]

короче - вариантов много, выбирай, какой хочешь)

[s0rr0w]

Обнаружил еще не понятный мне баг, который вылезает в ФФ, ОПЕРЕ и ИЕ

Баг у вас в голове. Вы выдаете желаемое за действительное. Реалии совершенно другие.

если я внутрь тега A кладу IMG то если посмотреть на скриншот ссылка не облегает изображение визуально а просто как бы прилеплена к низу (см. скриншот, выделенным синим) + образуется еще непонятный отступ у а снизу! как пофиксить чтобы этих 2-х проьлем не было? пробовал overflow: hidden не помогло

Ссылка - inline элемент, картинка - replaced inline элемент. Размер бокса под ссылку определяется высотой шрифта. Размер бокса под картинку - высотой самой картинки. Бокс ссылки не растягивается! Картинка выравнивается внутри бокса ссылки относительно vertical-align. По умолчанию этот параметр равен base-line. Базовая линия проходит под буквой п, л, но есть еще буквы р, у, хвостики которых опускаются ниже базовой линии. Отсюда и отступ.

Итак, первая проблема - миф, вторая лечится разными свойствами, и "таблетку" я уже приводил на этом форуме.

[TonKhaO]

Ссылка - inline элемент, картинка - replaced inline элемент.

очень интересно, правда впервые слышу о replaced inline! пойду погуглю!

[psywalker]

очень интересно, правда впервые слышу о replaced inline! пойду погуглю!

Ну ты приколист Тох))) Ты наверное и через 10 лет постоянно вёрстки будешь удивляться над подобными словами

[TonKhaO]

Размер бокса под картинку - высотой самой картинки. Бокс ссылки не растягивается!

первая предложение не понятно! помоему как раз бокс ссылки не растягивается картинкой по вертикали ну по-крайней мере по умолчанию

Ну ты приколист Тох))) Ты наверное и через 10 лет постоянно вёрстки будешь удивляться над подобными словами

ну я как век живи век, учись я оооочень хочу щас взять книжку которая у нас в офисе по блочной верстке! НО не могу пока AS 3 не доучу, поэтому пока у вас спрашиваю!

[mishka]

Долго учится придется если неслушаешь дельных советов. Ведь добавить строку в CSS и проверить правильно ли тебе советуют, это же не так сложно. Так почему еще не проверил?

s0rr0w тебе все детально обьяснил что и как, и почему это происходит.

Картинке нужно задать значение vertical-align отличное от baseline

Edited April 12, 2010 by mishka2

[TonKhaO]

Долго учится придется если неслушаешь дельных советов. Ведь добавить строку в CSS и проверить правильно ли тебе советуют, это же не так сложно. Так почему еще не проверил?

s0rr0w тебе все детально обьяснил что и как, и почему это происходит.

Картинке нужно задать значение vertical-align отличное от baseline

почему ты делаешь преждевременные выводы? сделал попробовал! добавил vertical-align, оступы лишние исчезли снизу! даже почита ту ссылку которую ты привел! но ед что пока остается осознать это как сделать так чтобы бокс ссылки полность растягивался под давлением картинки НО без присвоения картинке display: block ибо тогда потом флоатами прийдется сделать а так флоаты ессно напрямую выровнить по центру не получится

[mishka]

почему ты делаешь преждевременные выводы? сделал попробовал! добавил vertical-align, оступы лишние исчезли снизу! даже почита ту ссылку которую ты привел! но ед что пока остается осознать это как сделать так чтобы бокс ссылки полность растягивался под давлением картинки НО без присвоения картинке display: block ибо тогда потом флоатами прийдется сделать а так флоаты ессно напрямую выровнить по центру не получится

Зачем display: block?

vertical-align:top/bottom/midle достаточно

.труляя-какойто-блок img{vertical-align:bottom;} это все что нужно чтобы у картинок в этом блоке небыло отступа внизу. Никаких display:block и флоатов

[TonKhaO]

Зачем display: block?

vertical-align:top/bottom/midle достаточно

.труляя-какойто-блок img{vertical-align:bottom;} это все что нужно чтобы у картинок в этом блоке небыло отступа внизу. Никаких display:block и флоатов

не не, это я понял, отступов нету! но по факту ведь бокс ссылки не растягивается под давлением картинки, так ведь! в файербаге наведи на A, вот видишь, как бэ рамки синей нет (

[DjTarik]

не не, это я понял, отступов нету! но по факту ведь бокс ссылки не растягивается под давлением картинки, так ведь! в файербаге наведи на A, вот видишь, как бэ рамки синей нет (

Можно сделать ссылку тоже replaced inline элементом. Добавь её display: inline-block; Будет по всей картинке растягиваться...

[mishka]

Это потому что ссылка инлайновая, поправит это inline-block, для ие6-7 zoom:1.

Но понять немогу зачем это нужно. Никогда не приходилось так делать.

Edited April 12, 2010 by mishka2

[TonKhaO]

Это потому что ссылка инлайновая, поправит это inline-block, для ие6-7 zoom:1.

Но понять немогу зачем это нужно. Никогда не приходилось так делать.

возможно я перегибаю палку и вовсе раздуваю из мухи слона но просто люблю када контейнеры распушаются по действием детей, там мне легче почему то