Подчёркивание

Coder_D · December 31, 2010

Всех с Новым Годом!

Взял подчеркивание отсюда http://htmlbook.ru/faq/kak-dobavit-punktir...vanie-k-ssylkam

В общем код работает без проблем, но стоит в CSS правила добавить

* {margin:0; padding:0;}

А ссылку заключить в <h*></h*>

Как код перестаёт работать в IE8.

Искал этот затык в коде целый час. Теперь думаю, как исправить.

Вот тестовый код, который я использую:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
* {
	margin:0; padding:0;
}
a {
	text-decoration:none;
}
a:hover {
	border-bottom:1px dashed #F60;
}
</style>
</head>

<body>
<h3><a href="#">111111111111111</a></h3>
</body>
</html>

Всем удачи в новом году!

psywalker · December 31, 2010

Ссылке zoom:1; влепи со всей дури

Coder_D · January 1, 2011

Блин! Что-то не работает! А как это должно было помочь?

Temiks · January 1, 2011

уберите код, и все будет работать, и zoom не нужен будет

* {margin:0; padding:0;}

А как это должно было помочь?

Вот ссылка

http://htmlbook.ru/css/zoom

А если вы хотите выровнять элемент, в данном случаи h3 то запишите так например

h3 {
margin: 0px;
}

Edited January 1, 2011 by Temiks

Coder_D · January 1, 2011

Это понятно. Самое просто! Но тогда получается куча лишнего кода с пропиской этого параметра отдельно каждому элементу вёрстки.

Я никак не могу понять, как эта часть кода влияет на отображение\НЕотображение dashed. Причем именно дашед, т.к. обычный text-decoration: underline; работает без проблем.

Temiks · January 1, 2011

тут не проблема в отображении а проблема в padding так как вы не оставляете место для линии

пишите значит так

* {
margin: 0px;
}

Temiks · January 1, 2011

еще работает и так

* {
	margin:0;
   }
		a {
	text-decoration:none;
}
a:hover {
	padding: 0px;
	border-bottom:1px dashed #F60;	
}

Edited January 1, 2011 by Temiks

Coder_D · January 1, 2011

Да, так работает. Спасибо!

Еще хотелось бы понять.

Если

* {margin:0; padding:0;}

код для сброса изначальных отступов, то почему не работает прописка padding-bottom:10px; элементам h3 или <a>. Точнее работает, они раздвигаются, внутренний отступ появляется, но dashed так и не появляется.

Какова механика этого события, неясно мне.

Edited January 1, 2011 by Coder_D

Temiks · January 1, 2011

а вот и еще рабочий вариант , но уже с zoom'ом , как писал psywalker

* {
	margin:0;
	padding: 0px;
   }
		a {
	text-decoration:none;
}
a:hover {
	zoom: 0.5;
	border-bottom:1px dashed #F60;	
}

только я написал zoom: 0.5, а с 1 не работает

код для сброса изначальных отступов, то почему не работает прописка padding-bottom:10px; элементам h3 или <a>. Точнее работает, они раздвигаются, внутренний отступ появляется, но dashed так и не появляется.

пробовал и так, не работает в ИЕ, Но в ФФ все ок, но вы обратили внимание на то, что отодвигается dashed на 10рх от текста

Coder_D · January 1, 2011

Вариант с zoom:0.5; действительно работает хорошо. Сейчас погоняю сайт в других браузерах на всякий пожарный.

В общем спасибо большое, друзья!

Всех с Новым Годом! Удачи и счастья!

Temiks · January 1, 2011

сделал ссылку как блок, теперь работает и с padding, но теперь возникла другая проблема, наводя курсор на dashed он подчеркивается на всю ширину экрана, для этого начал считать размеры в em , но это полный маразм, если так делать! ну и все ж это полдучилось 8em так что лучше использовать предыдущие варианты

* {
	margin:0;
	padding-bottom: 1px;
   }
		a {
	text-decoration:none;

}
a:hover {
	display: block;
	width: 8em;
	border-bottom:1px dashed #F60;  
}

Всех с Новым Годом! Удачи и счастья!

вас также

Edited January 1, 2011 by Temiks

Coder_D · January 3, 2011

Эпопея с dashed продолжается

Теперь в IE нужно сделать так, чтобы ссылка не двигалась. Важно отметить, что класс должно стоять именно у ссылки, а не у дива. Как быть?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
* {
	margin:0; padding:0px;
}
a {
	text-decoration:none;
}
a:hover {
	border-bottom:1px dashed red;
	zoom:0.5;
}
.test {
	margin-left:100px;
}
</style>
</head>
<body>

<div><a class="test" href="#">111111111111111</a></div>

</body>
</html>

Coder_D · January 3, 2011

А что в Гугл Хроме творится - вообще кошмар! Там zoom: 0.5; отжигает по полной!

Temiks · January 3, 2011

пропиши хак для ие тогда

Coder_D · January 3, 2011

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

Shift-Web · January 3, 2011

Условные комментарии, отдельный css с хаком

Temiks · January 3, 2011

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

вот тут почитайте

http://htmlbook.ru/content/khaki

Coder_D · January 3, 2011

Всем спасибо! В общем хаком пришил отображение в IE вместо dashed -> underline.

Научился писать хаки. Позитив!

Sign In

Подчёркивание

Question

Link to comment

Share on other sites

17 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

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information