Jump to content
  • 0

Ширина Вложенного Блока Не Растягивается По Ширине Родительского В Ие7

Belovsan

Asked by Belovsan,

 Share

Question

Belovsan Explorer

Belovsan

Posted
Posted (edited)

Добрый день всем и с началом трудовой недели :)

У меня тут такая ситуация. Делаю выпадающую менюху со скруглёнными углами и надо сделать так, чтобы она по ширине растягивалась автоматически в зависимости от кол-ва знаков в пунктах меню. И вроде как почти разобрался. Но вот не могу понять как в ИЕ7 заставить верхние блоки (где вставлены радиусы) растянуться по ширине самого выпадающего меню. Возможно ли это сделать? Или в ИЕ7 это не реально? Вот ссылка: http://rubanys.narod.ru/gor_menu/trabl/gor_menu.html

Edited by Belovsan
Link to comment
Share on other sites

14 answers to this question

Recommended Posts

  • 0
psywalker Explorer

psywalker

Posted
Posted

Например вот так смотри. В первой ссылке я соединил слова для наглядности. <li><a href="#">ПреимуществаMicrosoftDynamicsAX</a></li> Но вместо этого предлагаю просто между словами поставить невидимые пробелы, которые находятся в Пуск-Таблица символов-Пустая клеточка(это и будет невидимый пробел), которая не даст словам прерваться.

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Страница</title>
<style type="text/css">
	*{margin: 0; padding: 0;}
	#menu { width: 900px; height: 40px;}
		#menu li { float: left; position: relative; width: auto; margin: 0 10px;}
		#menu li ul { top: 20px; left: 0; width: auto; display: none; position: absolute; border: 1px solid #000;}
		#menu li ul li { float: none; width: auto;}
		#menu li:hover ul{ display: block;}

</style>
</head>

<body>
<ul id="menu">
		<li class="active first"><a href="#"><span>Главная</span></a>
			<ul>

				<li><a href="#">ПреимуществаMicrosoftDynamicsAX</a></li>
				<li><a href="#">Стоимость Microsoft Dynamics AX</a></li>
				<li><a href="#">Внедрение Microsoft Dynamics AX</a></li>
				<li><a href="#">Поддержка и консультации</a></li>
				<li><a href="#">Преимущества Microsoft Dynamics AX</a></li>
				<li><a href="#">Стоимость Microsoft Dynamics AX</a></li>

				<li><a href="#">Внедрение Microsoft Dynamics AX</a></li>
				<li><a href="#">Поддержка и консультации</a></li>
				<li><a href="#">Преимущества Microsoft Dynamics AX</a></li>
				<li><a href="#">Стоимость Microsoft Dynamics AX</a></li>
				<li><a href="#">Внедрение Microsoft Dynamics AX</a></li>

			</ul>

		</li>
		<li><a href="#"><span>Полезное</span></a>
			<ul>
				<li><a href="#">Преимущества Microsoft Dynamics AX</a></li>
				<li><a href="#">Стоимость Microsoft Dynamics AX</a></li>
				<li><a href="#">Внедрение Microsoft Dynamics AX</a></li>

				<li><a href="#">Поддержка и консультации</a></li>

			</ul>
		</li>
		<li><a href="#"><span>Услуги</span></a>
			<ul>
				<li><a href="#">Преимущества Microsoft Dynamics AX</a></li>
				<li><a href="#">Стоимость Microsoft Dynamics AX</a></li>

				<li><a href="#">Внедрение Microsoft Dynamics AX</a></li>

				<li><a href="#">Поддержка и консультации</a></li>
			</ul>
		</li>
		<li class="last"><a href="#"><span>Контакты</span></a>
			<ul>
				<li><a href="#">Преимущества Microsoft Dynamics AX</a></li>

				<li><a href="#">Стоимость Microsoft Dynamics AX</a></li>

				<li><a href="#">Внедрение Microsoft Dynamics AX</a></li>
				<li><a href="#">Поддержка и консультации</a></li>
			</ul>
		</li>
	</ul>



</body>
</html>

Link to comment
Share on other sites
  • 0
Belovsan Explorer

Belovsan

Posted
  • Author
Posted (edited)

psywalker, ммм, либо я что-то не правильно понимаю, либо Вы немного не поняли мою проблему. Тут ситуация следующая. У меня там всё растягивается нормально, а вот самый верхний и нижний блоки <li class="verh"> и <li class="niz"> они типа как пустые и в них стоят только бэкграунды радиусов. Так вот. В "свежих браузерах" (ИЕ8, Опера, Мозилла) ширина этих блоков равна общей ширине выпадающего меню. В результате радиусы стоят на своих местах. А вот в ИЕ7 почему-то ширина этих блоков не растягивается автоматически. В итоге правые радиусы не на своих местах. Вот я и пытаюсь разобраться, есть ли вообще возможность как-то приказать ИЕ7 растянуть ширину или нет.

Edited by Belovsan
Link to comment
Share on other sites
  • 0
Belovsan Explorer

Belovsan

Posted
  • Author
Posted (edited)

У меня ширина должна растягиваться в зависимости от содержимого. Она так и растягивается. Но вот именно верхний и нижний блоки (<li class="verh"> и <li class="niz">) - они не растягиваются по всей ширине ul. В них нет текста, а только бэкграунды радиусов. Причём такое только в ИЕ7 наблюдается.

Если внутри этих li поставить невидимые пробелы, то мы ж не сможем добиться автоматического растягивания этих блоков. Они ж по сути будут иметь фиксированную ширину, равную количеству пробелов. Так ведь?

Edited by Belovsan
Link to comment
Share on other sites
  • 0
psywalker Explorer

psywalker

Posted
Posted

а ты повесь углы на верхние и нижние LI, в которых есть текст, например <li><span class="vkl"><a href="#">About SBA</a></span></li>. Вот повесь один угол на LI, а второй на SPAN например.

Link to comment
Share on other sites
  • 0
Belovsan Explorer

Belovsan

Posted
  • Author
Posted (edited)

Там на li у меня правый бэкграунд боковой висит. Но в принципе, можно и так попробовать сделать. Типа присвоить этим li классы и что-нибудь там нашаманить. Но блин это ж надо и нарезку переделать будет немного. А растянуть в ИЕ7 эти блоки, чтоб они выглядели как в Опере, Мозилле и в ИЕ8 - эт не реально никак? Ведь в этих же броаузерах всё тип-топ - шоколад :). А в ИЕ7 пошла кривизна.

Edited by Belovsan
Link to comment
Share on other sites
  • 0
Belovsan Explorer

Belovsan

Posted
  • Author
Posted (edited)

Да уж, не легка жизнь в Вилларибо...

psywalker, я тож буду долбиться над этим вопросом. Если вдруг озарение придёт, то непременно сообщу о решении. Ну, и если кто-нибудь нашёл уже способ как справиться с этим траблом, то я (и думаю, что не один я) буду оч признателен за инфу о решении.

Edited by Belovsan
Link to comment
Share on other sites
  • 0
Belovsan Explorer

Belovsan

Posted
  • Author
Posted (edited)

Итак, после некоторых мучительных потуг пришло решение данного вопроса. Растянуть блок удалось следующим образом:

#gor_menu ul.vlog_menu{position:absolute; margin-top:16px;} /*Смещаем выпадающий блок на высоту верхнего блока с бекграундами радиусов*/
#gor_menu ul.vlog_menu li.verh, #gor_menu ul.vlog_menu li.niz{position:absolute; right:0; left:0;}/*Вот оно решение! Растягиваем блоки с радиусами по ширине блока выпадающего меню*/
#gor_menu ul.vlog_menu li.verh{margin-top:-16px;}/*Смещаем блок с верхними радиусами в верхнюю часть выпадающего меню*/
#gor_menu ul.vlog_menu li.niz{top:100%;}/*Смещаем блок с нижними радиусами в нижнюю часть выпадающего меню*/

В общем, в итоге имеем в ИЕ7 вот такой расклад: http://rubanys.narod.ru/gor_menu/gor_menu.html

psywalker, хоть и нелегка жизнь в Вилларибо, но иногда на душе бывает и радостно от таких вот маленьких побед :)

Edited by Belovsan
Link to comment
Share on other sites
  • 0
psywalker Explorer

psywalker

Posted
Posted
psywalker, хоть и нелегка жизнь в Вилларибо, но иногда на душе бывает и радостно от таких вот маленьких побед :)

Отлично, молодец! Вот и решили твою последнюю проблему :)

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to question listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy

  I accept