как побороть ие7

[rediskavet]

ВОТ.

Работает во всех браузерах, но в ие7 не открывается блок с описанием который при загрузке страницы скрыт.

Почему?

[Great Rash]

if (descriptionTR.style.display == 'none') {
	descriptionTR.style.display = ''; // оставить пустую строку
	this.style.color = '#2971A7';
	this.title = 'скрыть';
} else {
	descriptionTR.style.display = 'none';
	this.style.color = '';
	this.title = 'подробнее';
}

UPD: ИЕ7 не понимает table-row

[rediskavet]

UPD: ИЕ7 не понимает table-row

А чем можно table-row заменить, кроме display:block, т.к. у меня в нормальных браузерах, портится отображение таблицы.

Или как мне узнать прямо в скрипте что это ие7 его запускает и уже для него подсунуть альтернативную версию с display:block?

[sigma77]

UPD: ИЕ7 не понимает table-row

ИЕ7 не понимает table-row для всех элементов, кроме tr.

А чем можно table-row заменить, кроме display:block

Можно

element.style.display = ''

Должен принять изначальное значение.

[Great Rash]

Почему не оставить display пустым? Я же написал код.

[sigma77]

ИЕ7 не понимает table-row для всех элементов, кроме tr.

Хотя нет, вру.

Подвел режим эмуляции в ИЕ7. Еще один повод не особенно на него полагаться.

[rediskavet]

Почему не оставить display пустым? Я же написал код.

Я не понимаю как это пустым, а какое значение там будет?

Еще раз постараюсь объяснить, Вот второй вариант страницы.

Первая таблица с использованием display: table-row, при клике на "кликать тут" у TR с описанием который изначально display:none, свойство display меняется на table-row. TR появляется а там TD с описанием который растянут на всю ширину таблицы. Работает везде кроме ие7.

Вторая таблица тоже самое только с display: block. Работает во всех ие начиная с седьмого, но в других браузерах неправильно отображается TD с описанием который находиться в появляющемся TR.

Надеюсь что не запутал все еще больше своими объяснениям

Edited February 15, 2011 by rediskavet

[sigma77]

Я не понимаю как это пустым, а какое значение там будет?

Еще раз постараюсь объяснить, Вот второй вариант страницы.

Просто пустую строку. Тогда свойство элемента примет изначальное значение.

[rediskavet]

Просто пустую строку. Тогда свойство элемента примет изначальное значение.

Может я туплю, но вы пожалуйста не раздражайтесь.

У TR изначальное значение это display:none, если ставить пустую строку то display:none скроет обратно этот TR, но с этим то как раз проблем нет.

Проблема в другом. С помощью какого свойства отображать этот TR, если display: table-row не работает в ие7, а display: block в браузерах отличных от ИЕ не правильно отбражает TR, т.е. отображает но он перестает тянуться на всю ширину таблицы.

Средствами CSS у меня это исправить не получается.

Остается определять в скрипте если это ИЕ и подставлять ему display: block. Или есть еще варианты?

[Great Rash]

У TR изначальное значение это display:none, если ставить пустую строку то display:none скроет обратно этот TR, но с этим то как раз проблем нет.

Ничего нигде не скроется, т.к. скриптом вы напишете element.style.display ='';, что превратиться в такую запись - style="display:;"

Вместо того чтоб доказывать что-то взяли б да попробовали. И убедились.

Я приведу полный код функции, чтоб было понятно:

function hideDisplayDescription()
{
	var parenTR = this.parentNode;
	while(parenTR && parenTR.tagName != 'TR')
		parenTR = parenTR.parentNode;
	var descriptionTR = parenTR.nextSibling;
	while(descriptionTR && descriptionTR.tagName != 'TR')
		descriptionTR = descriptionTR.nextSibling;
	if(descriptionTR.style.display == 'none')
	{
		descriptionTR.style.display = ''; // ВНИМАНИЕ, пустая строка!!!
		this.style.color = '#2971A7';
		this.title = 'скрыть';
	}
	else
	{
		descriptionTR.style.display = 'none';
		this.style.color = '';
		this.title = 'подробнее';
	}	
}

[rediskavet]

Я по другому решил, если это ие то свойство display меняю на значение block. Если же это другой браузер то меняю его на значение display: table-row.

Вот ТУТ все три варианта.

[Great Rash]

rediskavet, а вы упорный

[rediskavet]

rediskavet, а вы упорный

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

В любом случае спасибо! Получилось как всегда, пол дня паришся, только открываешь тему, сразу само приходит решение.

ИЕ7 не понимает table-row

Вот такие вещи как можно выяснять. Есть где то инфа.структурированая или может инструмент какой, я в ИЕ9 не нашел?

Edited February 16, 2011 by rediskavet

[Great Rash]

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

Как это не работали?!

Вот. Все работает:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>Меню</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

	<style type="text/css">
		table {width: 100%; border: 0; border-collapse: collapse; border-spacing: 0;}
		td {padding: 5px; border: #000 1px solid;}
		.red {background: red;}
	</style>

	<script type="text/javascript">
		function test() {
			var table = document.getElementsByTagName('table')[0];
			var tr = table.rows[1];

			if (tr.style.display == 'none') {
				tr.style.display = '';
			} else {
				tr.style.display = 'none';
			}

			return false;
		}
	</script>
</head>
<body>

	<table cellspacing="0">
		<tbody>
			<tr>
				<td width="50%"><a href="#" onclick="return test();">показать/спрятать строку</a></td>
				<td>право</td>
			</tr>
			<tr class="red" style="display: none;">
				<td colspan="2">скрыто</td>
			</tr>
			<tr>
				<td>лево</td>
				<td>право</td>
			</tr>
		</tbody>
	</table>

</body>
</html>

Вот такие вещи как можно выяснять. Есть где то инфа.структурированая или может инструмент какой, я в ИЕ9 не нашел?

display

[rediskavet]

Вот. Все работает:

Правильно, работает, но тут ведь инлайновый стиль, а у меня все стили в таблице стилей(и иналайновых правил мне нужно по возможности избежать). Я сразу попробовал ваш вариант, еще после первого сообщения, у меня не сработало, я так понял что это именно по тому что element.style.display = '' очищает значение дсплай в инлайн записи и тогда применяется значение из таблицы стилей.

[Great Rash]

Так с этого и надо было начинать! Кто ж знал, что стиль инлайновый? Тогда вопрос: а не проще завести отдельный класс в CSS (назовем его hidden) в котором будет написано display: none; и подключать/отключать его через className? Тогда, опять же, не понадобятся извращения с определением браузера и некроссбраузерным свойством table-row.

[rediskavet]

className

точно, проще, я че-то зациклился на поиске решения только в одном направлении(скорее всего потому ни как не мог понять почему везде работает а в ИЕ7 нет) и про класс даже не подумал. Переделываю. Спасибо!