VPF::лишний пиксель - Форум программистов

ОнКофе

Дата 24.4.2008, 20:30 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 274
Регистрация: 3.3.2006
Где: http://www.angeli na-pitt.by.ru

Репутация: нет
Всего: нет

не пойму откуда берется лишний пиксель под ссылкой
Кто-нибудь уже сталкивался с подобным?

Код


<!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=windows-1251" />
<title>TEMP</title>
<STYLE>
div#temp A{float:left; display:block; border-left:10px solid #d2003b; margin-right:20px; padding:0 0 0 1px;}
div#temp A{font:bold 16px/13px Arial, Helvetica, sans-serif; color:#000; text-transform:uppercase; letter-spacing:-1px; background:#CCCCCC;}
 
.clearfix:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;}
.clearfix {display: inline-block;}
* html .clearfix {height: 1%;}
.clearfix {display: block;}
html{background:#999;}
</STYLE>
</head>

<body>
  <DIV id="temp" class="clearfix"><A href="#">File</A><A href="#">Edit</A><A href="#">View</A><A href="#">Insert</A><A href="#">Modify</A></DIV>
</body>
</html>

Это сообщение отредактировал(а) ОнКофе - 24.4.2008, 20:30

bars80080

Дата 25.4.2008, 09:47 (ссылка)

(нет голосов)

Загрузка ...

прапор творюет

Награды: 1

Профиль
Группа: Завсегдатай
Сообщений: 12022
Регистрация: 5.12.2007
Где: Königsberg

Репутация: 50
Всего: 315

похоже только так:

Код


<!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=windows-1251" />
<title>TEMP</title>
<STYLE>
div#temp A{float:left; display:block; border-left:10px solid #d2003b; margin-right:20px; padding:0 0 0 1px; text-decoration: none; }
div#temp A{font:bold 16px/12px Arial, Helvetica, sans-serif; color:#000; text-transform:uppercase; letter-spacing:-1px; background:#CCCCCC;
     }
div#temp a span { position: relative; } 
* html div#temp a span { top: 1px; } 
.clearfix:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;}
.clearfix {display: inline-block;}
* html .clearfix {height: 1%;}
.clearfix {display: block; }
html{background:#999;}
</STYLE>
</head>

<body>
  <DIV id="temp" class="clearfix"><A href="#"><span>File</span></A><A href="#"><span>Edit</span></A><A href="#"><span>View</span></A><A href="#"><span>Insert</span></A><A href="#"><span>Modify</span></A></DIV>
</body>
</html>

ОнКофе

Дата 25.4.2008, 15:35 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 274
Регистрация: 3.3.2006
Где: http://www.angeli na-pitt.by.ru

Репутация: нет
Всего: нет

хм....
а как вариант может быть можно использовать списки?

Код


  <DIV id="temp" class="clearfix"><UL><LI><A href="#">File</A></LI><LI><A href="#">Edit</A></LI><LI><A href="#">View</A></LI><LI><A href="#">Insert</A></LI><LI><A href="#">Modify</A></LI></DIV>

тогда перестает работать правило с аналогией с прошлым примером

Код


div#temp li a{position: relative; }
* html div#temp li a{ /*top: 1px;*/ padding-top:1px; }

bars80080

Дата 25.4.2008, 15:59 (ссылка)

(нет голосов)

Загрузка ...

прапор творюет

Награды: 1

Профиль
Группа: Завсегдатай
Сообщений: 12022
Регистрация: 5.12.2007
Где: Königsberg

Репутация: 50
Всего: 315

да можно как-угодно, надо только осознать как это происходит

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

значит в примере со списками, надо заливать фоном <li>, а <a> должен быть прозрачным, позиционированым (relative), ну и подогнать такие вещи как line-height, top и т.п.

ОнКофе

Дата 25.4.2008, 16:31 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 274
Регистрация: 3.3.2006
Где: http://www.angeli na-pitt.by.ru

Репутация: нет
Всего: нет

bars80080, да полностью согласен! Большое спасибо! Теперь разобрался что и как!!!

ОнКофе

Дата 25.4.2008, 16:57 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 274
Регистрация: 3.3.2006
Где: http://www.angeli na-pitt.by.ru

Репутация: нет
Всего: нет

что за странная штука?
делаю все как ты научил, и все вроде бы получается... но!

Код


<STYLE>
 div#login form{display:block; float:right; background:#FFFFFF;}
 div#login input{width:103px; border:0; background:#575757; position: relative; color:#A9A9A9; height:13px; font:bold 10px Arial, Helvetica, sans-serif;  padding:2px 0 3px 6px; text-align:left; margin:0 0 5px 0; display:block;}
* html div#login input{ top: -1px; } 
 div#login p{width:95px; display:block; float:right; color:#393939; font:bold 10px/23px Verdana, Arial, Helvetica, sans-serif;} /*  margin-top:expression(1 + "px"); */
</STYLE>

  <DIV id="login">
  <FORM method="post" name="Registration">
    <INPUT name="Login" type="text" value="123456">
    <INPUT name="Password" type="password" value="123456">
    <INPUT name="SendForm" type="submit" value="Send" style="margin:4px 0 0 0; width:109px; height:19px; font:bold 10px Verdana, Arial, Helvetica, sans-serif; color:#c4c4c4;">
   </FORM>
  </DIV>

форма вместо того чтобы подняться на один пиксем - перемещается.... изначально был лишний пиксел сверху, после добавления CSS один пиксель появился снизу.... Быть может жто правило не работает для элементов форм?

bars80080

Дата 25.4.2008, 17:16 (ссылка)

(нет голосов)

Загрузка ...

прапор творюет

Награды: 1

Профиль
Группа: Завсегдатай
Сообщений: 12022
Регистрация: 5.12.2007
Где: Königsberg

Репутация: 50
Всего: 315

поупражняйся со всеми вертикальными размерами
в том случае тоже, при перемещении слова вниз один пиксель оставался сверху, я сузил его размеров в параметре font

Цитата

div#login form{display:block; float:right; background:#FFFFFF;}
div#login input{width:103px; border:0; background:#575757; position: relative; color:#A9A9A9; height:13px; font:bold 10px Arial, Helvetica, sans-serif; padding:2px 0 3px 6px; text-align:left; margin:0 0 5px 0; display:block;}
* html div#login input{ top: -1px; }
div#login p{width:95px; display:block; float:right; color:#393939; font:bold 10px/23px Verdana, Arial, Helvetica, sans-serif;} /* margin-top:expression(1 + "px"); */

всё это влияет на высоту, и может быть придётся добавить ещё что-нибудь

Добавлено через 10 минут и 43 секунды
к примеру так:

Код


<STYLE>

#login { background: #00ff00; }
div#login form { display: block; float:right; background:#0000ff;}
div#login input { width: 103px; border:0; background:#575757; position: relative; color:#A9A9A9; height:13px; font:bold 10px Arial, Helvetica, sans-serif;  padding: 2px 0 3px 6px; text-align: left; margin: 0 0 5px 0; display: block;}
* html #sendinput{ top: -1px; } 
div#login p{width:95px; display:block; float:right; color:#393939; font:bold 10px/23px Verdana, Arial, Helvetica, sans-serif;} /*  margin-top:expression(1 + "px"); */
</STYLE>

  <DIV id="login">
  <FORM method="post" name="Registration">
    <INPUT id="sendinput" name="Login" type="text" value="123456">
    <INPUT name="Password" type="password" value="123456">
    <INPUT name="SendForm" type="submit" value="Send" style="margin:4px 0 0 0; width:109px; height:19px; font:bold 10px Verdana, Arial, Helvetica, sans-serif; color:#c4c4c4; ">
   </FORM>
  </DIV>

ОнКофе

Дата 25.4.2008, 18:16 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 274
Регистрация: 3.3.2006
Где: http://www.angeli na-pitt.by.ru

Репутация: нет
Всего: нет

в очередной раз убеждаюсь в том, что нет ничего невозможного!!!!

ОнКофе

Дата 28.4.2008, 12:15 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 274
Регистрация: 3.3.2006
Где: http://www.angeli na-pitt.by.ru

Репутация: нет
Всего: нет

IE 7 напрочь рушит все убеждения.... блин!

bars80080

Дата 28.4.2008, 12:54 (ссылка)

(нет голосов)

Загрузка ...

прапор творюет

Награды: 1

Профиль
Группа: Завсегдатай
Сообщений: 12022
Регистрация: 5.12.2007
Где: Königsberg

Репутация: 50
Всего: 315

в ИЕ7 надо создавать нечто среднее между ИЕ6 и ФФ, но в этом я уже не помощник.
найди соотв. хаки для ИЕ7

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| Вёрстка веб-сайтов \| Следующая тема »