Проблем при ограждане на "text input" обект...
5 отговора
163 прегледа
Проблем при ограждане на "text input" обект...
Ето един примерен код:
<html><body bgcolor="#FFFFFF">
<table border="1" cellspacing="0" cellpadding="0" style="border-collapse: collapse; border-color: #FF0000; border-width: 1px;">
<tr><td style="background: #FFFFFF;">
<input type="text" style="width: 100px; background:#FFFFFF; border-style: solid; border-width: 1px; border-color: #000000;">
</td></tr>
</table></body></html>
Ето какво се получава в Internet Explorer:
и в Opera Btowser:
Както се вижда от кода, това е един "input" елемент тип "text" ограден с таблица. И въпроса е:
Как мога да ги разкарам онези 2 линиики по 1 пиксел отгоре и отдоло при вариянта с IE. Пробвах по какви ли не начини, но пустите линии стоят и не мога да прилепя бордера плътно.
"В името на всички черни дупки на космоса!"
<html><body bgcolor="#FFFFFF">
<table border="1" cellspacing="0" cellpadding="0" style="border-collapse: collapse; border-color: #FF0000; border-width: 1px;">
<tr><td style="background: #FFFFFF;">
<input type="text" style="width: 100px; background:#FFFFFF; border-style: solid; border-width: 1px; border-color: #000000;">
</td></tr>
</table></body></html>
Ето какво се получава в Internet Explorer:
и в Opera Btowser:
Както се вижда от кода, това е един "input" елемент тип "text" ограден с таблица. И въпроса е:
Как мога да ги разкарам онези 2 линиики по 1 пиксел отгоре и отдоло при вариянта с IE. Пробвах по какви ли не начини, но пустите линии стоят и не мога да прилепя бордера плътно.
"В името на всички черни дупки на космоса!"
Re: Проблем при ограждане на "text input" обект...
най-вероятно няма да можеш... пробва ли с маргин и паддинг?
ако и с тях не става - не знам...
а всъщност ква е специалната причина рамките да са 2? що не оставиш инпут-а без рамка, като ше слагаш на клетката...
освен тва незнам дали си забелязал, ама при ИЕ рамката ти влиза в зададения размер, а при Мозила/Опера, е извън него...
т.е. ако дадеш видтх 100 пиксела и 1 пиксел рамка, в ИЕ обекта си остава 100 пиксела, а при мозила-та става 102...
Just a genius
ако и с тях не става - не знам...
а всъщност ква е специалната причина рамките да са 2? що не оставиш инпут-а без рамка, като ше слагаш на клетката...
освен тва незнам дали си забелязал, ама при ИЕ рамката ти влиза в зададения размер, а при Мозила/Опера, е извън него...
т.е. ако дадеш видтх 100 пиксела и 1 пиксел рамка, в ИЕ обекта си остава 100 пиксела, а при мозила-та става 102...
Re: Проблем при ограждане на "text input" обект...
Забелязах го това но то не ми създава проблем в случая.
Като сложа някакъв паддинг и се получава рамката която искам. Примера с плътното обикаляне го давам, защото като сложа паддинг, отгоре и отдоло стърчи с 1 пиксел от някой бутон примерно. Мога да го наглася да изглежда добре в IE, но тогава ще е кофти в Opera. А това, че едното е с +2 пиксела от другото като цяло не ме бърка, защото са +2 на всички елементи а не само на един-два.
Явно няма измъкване...
"В името на всички черни дупки на космоса!"
Като сложа някакъв паддинг и се получава рамката която искам. Примера с плътното обикаляне го давам, защото като сложа паддинг, отгоре и отдоло стърчи с 1 пиксел от някой бутон примерно. Мога да го наглася да изглежда добре в IE, но тогава ще е кофти в Opera. А това, че едното е с +2 пиксела от другото като цяло не ме бърка, защото са +2 на всички елементи а не само на един-два.
Явно няма измъкване...
"В името на всички черни дупки на космоса!"
Редактирано от Danil на
Re: Проблем при ограждане на "text input" обект...
Има:-)
Така се вижда както искаш, с малък трик за ИЕ:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"[линк]">
<html>
<head>
<title></title>
<style type="text/css">
<!--
body {
background-color: #fff;
}
table {
border: 1px solid #f00;
}
input {
width: 100px;
border: 1px solid #000;
}
-->
</style>
<!--[if gte IE 5]>
<style type="text/css">
input {
margin: -1px 0;
}
</style>
<![endif]-->
</head>
<body>
<table cellspacing="0" cellpadding="0">
<tr>
<td>
<input type="text">
</td>
</tr>
</table>
</body>
</html>
Успех!
Scriptura pro scribente nihil probat...
Така се вижда както искаш, с малък трик за ИЕ:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"[линк]">
<html>
<head>
<title></title>
<style type="text/css">
<!--
body {
background-color: #fff;
}
table {
border: 1px solid #f00;
}
input {
width: 100px;
border: 1px solid #000;
}
-->
</style>
<!--[if gte IE 5]>
<style type="text/css">
input {
margin: -1px 0;
}
</style>
<![endif]-->
</head>
<body>
<table cellspacing="0" cellpadding="0">
<tr>
<td>
<input type="text">
</td>
</tr>
</table>
</body>
</html>
Успех!
Scriptura pro scribente nihil probat...
Re: Проблем при ограждане на "text input" обект...
О да, доста интересно :)
Не знаех, че могат да се задават отрицателни стойности...Хитро :)
Мерси много :)
"В името на всички черни дупки на космоса!"
Не знаех, че могат да се задават отрицателни стойности...Хитро :)
Мерси много :)
"В името на всички черни дупки на космоса!"
Re: Проблем при ограждане на "text input" обект...
Моля:-)
Отрицателни стойности могат да се задават на margin. Не могат да се задават на padding. А ИЕ-то си иска понякога специално ухажване:-) Не че съм много навътре в нещата, но забелязах, че това крие риск за цвета на косата:-)
Scriptura pro scribente nihil probat...
Отрицателни стойности могат да се задават на margin. Не могат да се задават на padding. А ИЕ-то си иска понякога специално ухажване:-) Не че съм много навътре в нещата, но забелязах, че това крие риск за цвета на косата:-)
Scriptura pro scribente nihil probat...