vertical-align: middle не работает на IE7

[Pumych]

Много тем с разными решениями которые не работают. Как решается проблема?

Тут это видно на картинках которые не квадратные.

[psywalker]

Много тем с разными решениями которые не работают. Как решается проблема?

Тут это видно на картинках которые не квадратные.

Сделай таблицу, и не парься.

[Pumych]

Мы говорим о большой картинке? Если да то ведь там и так таблица? Или я не понимаю?

[psywalker]

Мы говорим о большой картинке? Если да то ведь там и так таблица? Или я не понимаю?

http://www.screencast.com/users/psywalker/folders/Jing/media/e4f5f9f2-4628-466b-aeef-71283b47ef4a

Т.е. о внутренних картинках, так?

[tius]

#upper-td2 {
    background: none repeat scroll 0 0 #FFFFFF;
    border: 1px solid #7D3E2C;
    height: 400px;
    text-align: center;
    vertical-align: middle;
    width: 400px;
}
#big-sample {}

[swetlana]

так vertical-align надо не картинке назначать, а её контейнеру.

при этом тому же контейнеру надо display: table-cell, и ни в коем случае никаких float'ов

а таблица там ни к чему.

[color=white][b]#big-sample[/b][/color][list]</p><p>[*][color=#881391]background-color[/color]: white;[*][color=#881391]border[/color]: 1px solid #E9D7B3;[*][color=#881391]height[/color]: 400px;[*][color=#881391]line-height[/color]: 400px;[*][color=#881391]text-align[/color]: center;[*][color=#881391]width[/color]: 400px;[*]vertical-align: middle;[*]display: table-cell;[/list]

прошу прощения, это новомодный редактор чудит чего-то не по делу.

#big-sample {
	background-color: white;
	border: 1px solid #E9D7B3;
	height: 400px;
	line-height: 400px;
	text-align: center;
	width: 400px;
	height: 400px;
	vertical-align: middle;
	display: table-cell;
}

[SelenIT]

Так проблема в IE7 — какой display:table-cell?

Вообще на дивах с фиксированной высотой в IE7 не сделать. Можно сделать на inline-block'ах с дополнительной вертикальной "подпоркой". Но мне непонятно, зачем там вообще аж два дива-обертки. Можно ведь вставить картинку напрямую в td, и border задать самой td-шке, раз таблица уже есть. И всё будет автоматом центрироваться везде...

[psywalker]

Свет, всё пропагандируем? Ну давай, давай

SelenIT

А как же экспрешаны?

[SelenIT]

Мой тот ужасный экспрешн, к сожалению, вызывает зависание в конвульсиях у IE9 beta (в режиме соотв. эмуляции). Поэтому советовать его я не берусь. С картинкой, конечно, проще (ее высота всегда известна, рассчитать половину разности ее и родительской элементарно), но всё равно это очень кривой костыль. Другое дело, что здесь картинка всё равно грузится скриптом — можно скриптом же ее и подвинуть (по <img onload>). Но зачем такие сложности, когда таблица может сделать это сама, и она уже есть?

[psywalker]

Мой тот ужасный экспрешн, к сожалению, вызывает зависание в конвульсиях у IE9 beta (в режиме соотв. эмуляции). Поэтому советовать его я не берусь. С картинкой, конечно, проще (ее высота всегда известна, рассчитать половину разности ее и родительской элементарно), но всё равно это очень кривой костыль. Другое дело, что здесь картинка всё равно грузится скриптом — можно скриптом же ее и подвинуть (по <img onload>). Но зачем такие сложности, когда таблица может сделать это сама, и она уже есть?

Согласен. Смысла в этом нет. Просто было интересно услышать ответ.

[swetlana]

Так проблема в IE7.

так проблема не только в IE7 на самом деле. В нормальных браузерах она тоже есть.

Но точно, это я упустила.

Тогда простого способа нет.

[Pumych]

А какой тогда не простой вариант?

Этот способ рабочий, но на IE8 на третьей картинке расползается за пределы 400пх

#upper-td2 {
    background: none repeat scroll 0 0 #FFFFFF;
    border: 1px solid #7D3E2C;
    height: 400px;
    text-align: center;
    vertical-align: middle;
    width: 400px;
}
#big-sample {}

[tius]

Этот способ рабочий, но на IE8 на третьей картинке расползается за пределы 400пх

таки

#big-sample {width: 398px;}