Не стыковка в меню с ИЕ

people2010 · July 27, 2010

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

http://www.sharemania.ru/0162693

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

2)Проблема с расположением меню синего в браузере Ие, в др. нормально толкьо в Ие меню синее идёт как-т овправо и немного длинее чем меню с подпунктами ниже. подскажите как одолеть это?

Заранее благодарю.

Great Rash · July 28, 2010

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

«border-collapse» на htmlbоok.ru

Проблема с расположением меню синего в браузере Ие, в др. нормально толкьо в Ие меню синее идёт как-т овправо и немного длинее чем меню с подпунктами ниже. подскажите как одолеть это?
Заранее благодарю.

Синего меню не увидел, а вообще меню не надо делать таблицами - плохо это. Используйте неупорядоченные списки.

stars · July 28, 2010

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

1) Нету <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">

2)

<tr>
<td>
<!—————————-Внутренняя таблица в ячейке———————->
<tr>
<td>

Так просто нельзя делать внутри <td> вы можети открыть новую таблицу но не как делать новые строки...

3) Комментарии на русском не есть хорошо особенно если документ будет UTF-8.

4)

чем интересно так выделилась 2 строка что вы ее решили комментарием выделить?

5) Код абсолютно не читается благо тут кусочек маленький а если это был бы огромный сайт кто после вас будет разгребать все это? В конце я приведу свой пример посмотрите...

6) Где в img обязательный параметр alt?

7) Почему вы в меню с начало используете элемент P потом само меню делаете из ссылок обернутых в див? Где логика то?

8) Зачем в #menu a 2 раза задается высота шрифта?

9) Почему в файле css вы пишете то в строчку, то через энтер, почему у вас то есть пробелы между свойством и значением то нету?(Это очень редко влияет на отображение, но как читать то такие файлы?)

10) Вы понимаете что выкладывая такую работу и прозьбу помочь вы издеваетесь над людьми которые это все смотрят? )))

11) Зачем в атребуте width="210px" вы пишете пиксили?

Вот как это сделал бы я:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<title>Главная</title>
		<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}

			.navigator{
				margin: 20px 0px 20px 20px;
				font-weight: bold;
				font-size: 16pt;
				background: #3366CC;
				color: white;
				width: 170px;
				text-align: center;
			}

			ul#menu {
				margin-left: 20px;
			}

			ul#menu li {
				width: 170px;
				height: 30px;
				border: 1px solid black;
				display: block;
				overflow: hidden;
				margin-top: 1px;
				font: bold 12pt Verdana;
				background: white; 
				color: black;
				list-style: none;
			}

			ul#menu li a {
				height: 100%;
				width: 100%;
				display: block;
				padding: 7px 0px 0px 5px;
				text-decoration: none;
			}

			ul#menu li a:hover {
				display: block;
				background: #FFFFCC;
				color: #663333;
			}
		</style>
	</head>
	<body>
		<table border="0" cellspacing="0" cellpadding="0"  align="center" style="margin: 0 auto;" >
			<tr>
				<td>
				<!-- Header -->
					<img src="img/header.jpg" alt="*">
				<!-- End of Header-->
				</td>
			</tr>
			<tr>
				<td>
					<!-- Menu -->
					<table width="972" border="1" cellspacing="0" cellpadding="0">
						<tr>
							<td width="210">
								<div class="navigator">Главное меню</div>
								<ul id="menu">
									<li><a href="#1">Главная</a></li>
									<li><a href="#2">Фото</a></li>
									<li><a href="#3">Видео</a></li>
									<li><a href="#4">Контакты</a></li>
								</ul>
								<br>
							</td>
							<td> </td>
						</tr>
					</table>
					<!-- End of Menu -->
				</td>
			</tr>
			<tr>
				<td>
					<!-- Footer -->
					<img src="img/footer.jpg" alt="*">
					<!-- End of footer -->
				</td>
			</tr>
		</table>
	</body>
</html>

Главная ваша ошибка что код не читаемый, и не понятен логически... В css пишите сначала ширину высоту далее свойства которые влияют на отображение а только в самом конце свойства которые влияют на контент внутри вашего элемента...

Edited July 28, 2010 by stars

people2010 · July 28, 2010

Спасибо конечно, но я хочу сделать как на картинке 1 ,у вас получилось как на картинке 2. Как сделать чтоб было как первый вариант этой картинки,которой я сейчас скинул, а не второй как у вас.

Edited July 28, 2010 by people2010

stars · July 28, 2010

Ну так и придумайте чтонить типо

ul#menu li {	
				border-bottom: none;
}
<!--[if IE]>
<style type="text/css">
			ul#menu li {
				margin-top: -2px;
				border-bottom: 1px solid black;
			}
</style>
<![endif]-->
<li style="border-bottom: 1px solid black;"><a href="#4">Контакты</a></li>

people2010 · July 28, 2010

Скажите, а зачем вы используете dispaly:block; и list-style?

Встретил такое объявление

ul#menu li

Что это объявление означает?

Edited July 28, 2010 by people2010

s0rr0w · July 28, 2010

Скажите, а зачем вы используете dispaly:block; и list-style?
Встретил такое объявление
ul#menu li
Что это объявление означает?

Это не объявление, это селектор.

Это значит, что если у ul будет id="menu", то нужно применить стиль к li этого элемента.

people2010 · July 28, 2010

Это не объявление, это селектор.

ul#menu li a

В данной строке что будет являться селектором?

Почему в стилях здесь всё в блоки берётся?

display:block;

mishka · July 28, 2010

display:block на лишке в действительности ненужен. И list-style лучше на ul применять.

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

Edited July 28, 2010 by mishka2

stars · July 28, 2010

Да с блоками я чето на работе погорячился... А топик стартеру похоже надо пройтись по разделу http://stepbystep.htmlbook.ru/ в противном случаи не чего нормального у вас не выйдет...

Edited July 28, 2010 by stars

people2010 · July 28, 2010

Всё вроде уяснил, list-style нужен для браузера ИЕ,чтоб обрезать то ,что вышло за рамку.

Ещё вопрос. Скажите, как сделать, чтоб вот так как сейчас есть и было, только при нажатии кнопкой к примеру на пункт "видео",меню спустилось и отобразилось ещё 2 подпункта этого меню, затем вновь при нажатии на него оно возвратилось в изначалное положение?

Edited July 28, 2010 by people2010

stars · July 28, 2010

Всё вроде уяснил, последнее не понял, что даёт вот list-style в коде.

Товарищ честное слово не поленитесь уделите внимание разделу шаг за шагом ну уйдет у вас 1-2 дня ну так хоть проясните многое... Не ужели вы даже на сайт зайти не можете почитать про http://www.htmlbook.ru/css/list-style.html

Ещё вопрос. Скажите, как сделать, чтоб вот так как сейчас есть и было, только при нажатии кнопкой к примеру на пункт "видео",меню спустилось и отобразилось ещё 2 подпункта этого меню, затем вновь при нажатии на него оно возвратилось в изначалное положение?

Довольна просто используйте js

Edited July 28, 2010 by stars

people2010 · July 28, 2010

Я читаю, только при некоторых моментах непонятны.

Извиняюсь, по поводу меню, когда я использовал margin-top:-2px; вроде как на картинке в 4-ом посте этой темы первой отображается во всех браузерах кроме браузера ИЕ,

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

Вот вылаживаю,запустите в Ие, а потом в др. браузерах.

http://www.sharemania.ru/0288983

Edited July 28, 2010 by people2010

stars · July 28, 2010

Я читаю, только при некоторых моментах непонятны.
Извиняюсь, по поводу меню, когда я использовал margin-top:-2px; вроде как на картинке первой отображается во всех браузерах кроме браузера ИЕ,
если у величить минуса, тогда в Ие одном будет тонкая граница, а в других юраузерах толстая, что-то кручусь так и не вышло.
Вот вылаживаю,запустите в Ие, а потом в др. браузерах.
http://www.sharemania.ru/0288983

В таком случаи вам нужно найти кросбраузерное решение или воспользоваться условными комментариями для IE... Или как альтернатива я могу помочь с работой за оговоренную сумму денег с предоплатой...

Edited July 28, 2010 by stars

people2010 · July 28, 2010

Наконец-то сработало, прочитал статейку про комментарии, заработало, спс, буду всегда теперь коментарии использовать.

Edited July 28, 2010 by people2010

Searcher · July 29, 2010

Я читаю, только при некоторых моментах непонятны.

А вот это ваша большая ошибка. Зачем читать то вообще? Есть форумы, на все вам ответят, сделают за вас и даже напрягаться не надо.

Sign In

Не стыковка в меню с ИЕ

Question

Link to comment

Share on other sites

15 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information