IE6 не воспринимает dispaly:block

[vadimon]

Шестой ослик почему-то не хочет воспринимать display:block. Про косяк с display:inline-block наслышан, а вот про display:block слышу в первый раз. В чем может быть причина?

[Great Rash]

Код и ссылку на проблемную страницу в студию.

[vadimon]

HTML

<div id="leftsidebar">
			<ul>
				<li><a class="menu" href=""><span class="img"><img src="images/computer.png" width="61" height="55" alt="Компьютеры" /></span>Компьютеры</a></li>
				<li><a class="menu" href=""><span class="img"><img src="images/monitor.png" width="61" height="55" alt="Мониторы" /></span>Мониторы</a></li>
				<li><a class="menu" href=""><span class="img"><img src="images/notebook.png" width="61" height="54" alt="Ноутбуки" /></span>Ноутбуки</a></li>
				<li><a class="menu" href=""><span class="img"><img src="images/multimedia.png" width="61" height="55" alt="Мультимедиа" /></span>Мультимедиа</a></li>
				<li><a class="menu" href=""><span class="img"><img src="images/office.png" width="61" height="55" alt="Оргтехника" /></span>Оргтехника</a></li>
				<li><a class="menu" href=""><span class="img"><img src="images/mouse.png" width="61" height="55" alt="Манипуляторы" /></span>Манипуляторы</a></li>
				<li><a class="menu" href=""><span class="img"><img src="images/aksess.png" width="61" height="55" alt="Аксессуары" /></span>Аксессуары</a></li>
				<li><a class="menu" href=""><span class="img"><img src="images/complect.png" width="61" height="54" alt="Комплектующие" /></span>Комплектующие</a></li>
				<li><a class="menu" href=""><span class="img"><img src="images/soft.png" width="61" height="54" alt="Программы" /></span>Программы</a></li>
				<li><a class="menu" href=""><span class="img"><img src="images/computer.png" width="61" height="55" alt="Компьютеры" /></span>Компьютеры</a></li>
				<li><a class="menu" href=""><span class="img"><img src="images/computer.png" width="61" height="55" alt="Компьютеры" /></span>Компьютеры</a></li>
				<li><a class="menu" href=""><span class="img"><img src="images/computer.png" width="61" height="55" alt="Компьютеры" /></span>Компьютеры</a></li>
			</ul>
	</div>

CSS

#leftsidebar ul {margin-left:12px;list-style:none;}
#leftsidebar ul li a {color:#000;display:block;border-bottom:1px solid #a7a9ac;line-height:67px;display:block;}
#leftsidebar ul li a img {vertical-align:middle;margin:0 25px 2px 5px;}
#leftsidebar ul li a:hover {background:#d1d3d4;color:#000;font-weight:bold;display:block;display:block;text-decoration:none;}
.img { text-decoration:none; float:left; margin-top:5px;}

Ссылка на страницу: http://design.webtm.ru/demo/2/index.html

[Great Rash]

Какое поведение и в каком месте не устраивает? Просто я посмотрел страницу в ИЕ6 - косяков не увидел.

[psywalker]

Пробуй zoom:1;

Какое поведение и в каком месте не устраивает? Просто я посмотрел страницу в ИЕ6 - косяков не увидел.

Да там походу картинка не кликабельна.

[vadimon]

Какое поведение и в каком месте не устраивает? Просто я посмотрел страницу в ИЕ6 - косяков не увидел.

Пункт меню должен отображаться блоком и блок должен быть полностью кликабельным + при наведении указателя на ссылку блок заполняется бэкграундом и тоже полностью кликабельным. Можно это посмотреть, открыв эту страницу в любом другом браузере, кроме ослика

Пробуй zoom:1;

Да там походу картинка не кликабельна.

можно и zoom:1, но будет невалидно

[Great Rash]

Пункт меню должен отображаться блоком и блок должен быть полностью кликабельным + при наведении указателя на ссылку блок заполняется бэкграундом и тоже полностью кликабельным. Можно это посмотреть, открыв эту страницу в любом другом браузере, кроме ослика

Так бы и сказали, что верхнее меню... я то на боковое смотрю (там все в порядке).

Можно вместо zoom: 1; попробовать position: relative; - иногда помогает. Можно плюнуть на валидность для ИЕ6 (conditional comments).

[vadimon]

Так бы и сказали, что верхнее меню... я то на боковое смотрю (там все в порядке).

Можно вместо zoom: 1; попробовать position: relative; - иногда помогает. Можно плюнуть на валидность для ИЕ6 (conditional comments).

Да вот как раз левое боковое меню мне и нужно ). А нормально там потому, что там уже добавлено zoom:1. А код, который я здесь выложил, без него. Вот и хотел спросить, как можно без zoom:1 сделать валидно.

P.S. Кстати, position: relative; помогло! Все стало валидно. Спасибо!

Edited October 8, 2010 by vadimon

[vadimon]

Тогда в догонку еще вопрос по этому же меню. Пункт меню имеет одну строчку, однако если текст будет длинным и его нужно будет написать в две строчки, то вторая строчка будет узжать далеко под картинку. Казалось бы, можно текст заключить в div блок и задать высоту, но так как текст является ссылкой, то div блок нельзя заключять в теги ссылки <a>. Какой тут может быть выход?

[psywalker]

Тогда в догонку еще вопрос по этому же меню. Пункт меню имеет одну строчку, однако если текст будет длинным и его нужно будет написать в две строчки, то вторая строчка будет узжать далеко под картинку. Казалось бы, можно текст заключить в div блок и задать высоту, но так как текст является ссылкой, то div блок нельзя заключять в теги ссылки <a>. Какой тут может быть выход?

Компьютеры и прочие фразы в ссылке заключить в спан. Ему назначить класс, через него уже в КСС span.class{overflow:hidden;display: block;}

[vadimon]

Компьютеры и прочие фразы в ссылке заключить в спан. Ему назначить класс, через него уже в КСС span.class{overflow:hidden;display: block;}

В принципе, помогло. Сейчас не могу выравнять текст по вертикали. Вроде span является строчным элементом и vertical-align должен работать, но не работает. Пробовал присвоить строчному элементу свойство ячейки через display:table-cell, а потом уж и vertical-align:middle, но у меня уже задано свойство display:block и как-то коряво все получается... В общем, запутался я.... Как оказалось еще display:table-cell в шестом ослике не воспринимается, только с display:table, а куда его воткнуть display:table?

Edited October 8, 2010 by vadimon

[Great Rash]

http://forum.htmlbook.ru/index.php?showtop...163699&st=0

[vadimon]

http://forum.htmlbook.ru/index.php?showtop...163699&st=0

У меня строчный элемент, а не блочный. А мне нужно для строчного элемента, так как он заключен в ссылку. Отсюда теперь возникает вопрос: "Как выравнять текст в строчном элементе span по вертикали?"

Edited October 8, 2010 by vadimon

[Great Rash]

Отсюда теперь возникает вопрос: "Как выравнять текст в строчном элементе span по вертикали?"

У строчного (inline) элемента нет высоты, поэтому по вертикали там выравнивать нечего.

Один строчный элемент может быть выровнен по вертикали относительно другого строчного элемента при помощи vertical-align.

[vadimon]

Я тогда выложу код, может я что тут перемудрил?

HTML

<div id="leftsidebar">
			<ul>
				<li><a class="menu" href=""><span class="img"><img src="images/computer.png" width="61" height="55" alt="Компьютеры" /></span><span class="vert">Компьютеры серверы</span></a></li>
				<li><a class="menu" href=""><span class="img"><img src="images/monitor.png" width="61" height="55" alt="Мониторы" /></span><span class="vert">Мониторы, телевизоры, видеотехника</span></a></li>
				<li><a class="menu" href=""><span class="img"><img src="images/notebook.png" width="61" height="54" alt="Ноутбуки" /></span><span class="vert">Ноутбуки и портативная электроника</span></a></li>
				<li><a class="menu" href=""><span class="img"><img src="images/multimedia.png" width="61" height="55" alt="Мультимедиа" /></span><span class="vert">Акустика и аудиотехника</span></a></li>
				<li><a class="menu" href=""><span class="img"><img src="images/office.png" width="61" height="55" alt="Оргтехника" /></span><span class="vert">Перифирия и аксессуары</span></a></li>
				<li><a class="menu" href=""><span class="img"><img src="images/mouse.png" width="61" height="55" alt="Манипуляторы" /></span><span class="vert">Манипуляторы</span></a></li>
				<li><a class="menu" href=""><span class="img"><img src="images/aksess.png" width="61" height="55" alt="Аксессуары" /></span><span class="vert">Телефония</span></a></li>
				<li><a class="menu" href=""><span class="img"><img src="images/complect.png" width="61" height="54" alt="Комплектующие" /></span><span class="vert">Комплектующие</span></a></li>
				<li><a class="menu" href=""><span class="img"><img src="images/soft.png" width="61" height="54" alt="Программы" /></span><span class="vert">Программы</span></a></li>
				<li><a class="menu" href=""><span class="img"><img src="images/computer.png" width="61" height="55" alt="Компьютеры" /></span><span class="vert">Сетевое оборудование</span></a></li>
				<li><a class="menu" href=""><span class="img"><img src="images/computer.png" width="61" height="55" alt="Компьютеры" /></span><span class="vert">Фото-видео техника</span></a></li>
				<li><a class="menu" href=""><span class="img"><img src="images/computer.png" width="61" height="55" alt="Компьютеры" /></span><span class="vert">Бытовая техника</span></a></li>
			</ul>
	</div>

CSS

#leftsidebar ul {margin-left:12px;list-style:none;}
#leftsidebar ul li a {color:#000;display:block;border-bottom:1px solid #a7a9ac;line-height:67px; position:relative;display:block;}
#leftsidebar ul li a img {margin:0 25px 2px 5px;text-decoration:none;}
#leftsidebar ul li a:hover {background:#d1d3d4;color:#000;font-weight:bold;display:block; position:relative;display:block;text-decoration:none;}
.img {float:left; margin-top:5px;}
span.vert{overflow:hidden; height:67px; width:120px;  display: block; line-height:14px;}

[Great Rash]

Что именно нужно выровнять? Относительно чего? Какой элемент относительно какого.

[vadimon]

Что именно нужно выровнять? Относительно чего? Какой элемент относительно какого.

Например, слово "Компьютеры серверы" просто нужно выравнять по вертикали в <span class="vert"></span>. Но span строчный элемент и в нем выравнивать нельзя. Тогда <span class="vert"></span> нужно будет выравнять относительно <span class="img"></span>. Как то так получается...

Попробовал в <span class="vert"></span> добавить display: table-cell; vertical-align:middle;. Все работает отлично только в опере, в мозилле выравнивается, но исчезает подчеркивание ссылок, в шестом ослике вообще не работает...

Edited October 8, 2010 by vadimon

[Great Rash]

Задать line-height для <span class="img"></span> равный его высоте. Либо воспользоваться ссылкой из поста №12

[vadimon]

Задать line-height для <span class="img"></span> равный его высоте. Либо воспользоваться ссылкой из поста №12

не, такие варианты не катят...

[Great Rash]

Тогда JavaScript.

[vadimon]

Тогда JavaScript.

Может, оно того и не стоит. Просто по-другому как-нибудь попробую сверстать, глядишь и получится, и как назло все окажется просто.