frD-Border у input[type=button] input[type=submit] в IE

SoftAlex · August 5, 2007

Пишу я короче стиль для кнопки где у не? разные границы. Справа и слева по 3 пиксела, а снизу и сверху вообще 0 пикселов. В FF вс? нормально отображается, а в IE (проверял в 6 и 7) неконкретно, а т.е. кнопки отображаются с закругленными границами .. причем иногда по разному то захватывая при этом границы то нет... мне это дело типа ненужно, а нуно как в FF. Привожу код:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<style type="text/css">
<!--
input {
 background-color: #FFCC33;
 border-top-width: 0px;
 border-right-width: 3px;
 border-bottom-width: 0px;
 border-left-width: 3px;
 border-right-style: solid;
 border-left-style: solid;
 border-right-color: #0099FF;
 border-left-color: #0099FF;
 border-top-style: solid;
 border-bottom-style: solid;
}
-->
</style>
</head>

<body>
 <input type="submit" name="Submit" value="Искать">
</body>
</html>

Dimitry Wolotko · August 5, 2007

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<style type="text/css">
.input{
background-color: #FFCC33;
border: 0 3 0 3;
border: solid;
border-right-color: #0099FF;
border-left-color: #0099FF;}
</style>
</head>
<body>
<input class=input type="submit" name="Submit" value="Èñêàòü">
</body>
</html>

SoftAlex · August 5, 2007

непомогает код!

Цветков Антон · August 5, 2007

Тут проблема в самом IE... Поставте рядом еще одну такую же кнопку и увидите, что она отображается по-другому. Выход - юзать type="image".

Dimitry Wolotko · August 5, 2007

Странно, что не помагает - у меня ровно то, что Вы заказывали.

Цветков Антон · August 6, 2007

Dimitry Wolotko, ваш код вообще не должен правильно работать... Потому что если использовать border, указав лишь один параметр, то остальные параметры сбрасываются в значение по умолчанию. Потому действие свойства "border: 0 3 0 3" обнуляется. Я уж молчу про то, что надо указывать единицы измерения.

SoftAlex · August 6, 2007

Странно, что не помагает - у меня ровно то, что Вы заказывали.

Запускаю и в FF и в IE. То что отображается не с закруглениями это хорошо, но мне нужен border токо слева и справа... а черные полоски (граница) мне не нужно чтоб отображались сверху и снизу Помогите! :|

Использовать image для каждой кнопки это слишком. Как-же писать текст в кнопках? Есть другие варианты?

Цветков Антон · August 6, 2007

SoftAlex, тогда юзайте submit, но сделайте ему background-image, а "border: 0".

Dimitry Wolotko · August 6, 2007

border сделать можно и так:

 border-top-width: 0px;
 border-right-width: 3px;
 border-bottom-width: 0px;
 border-left-width: 3px;

вот не думал, что это принципиальная вещь.

И ещ? - указывать еденицы измерения конечно надо, а вот необходимо ли смертельно? Мне почему-то кажется что нет.

SoftAlex · August 6, 2007

border сделать можно и так:
 border-top-width: 0px;
 border-right-width: 3px;
 border-bottom-width: 0px;
 border-left-width: 3px;
вот не думал, что это принципиальная вещь.
И ещ? - указывать еденицы измерения конечно надо, а вот необходимо ли смертельно? Мне почему-то кажется что нет.

Какая разница? Таже фигня выход!

Dimitry Wolotko · August 6, 2007

а т.е. кнопки отображаются с закругленными границами

У меня она отображается тупо прямоугольником. Как и должна.

yopopt · August 6, 2007

Границы становятся закругл?нными, когда кнопка в фокусе. Понажимайте tab. Главный вопрос в том, почему в ие левый и правый бордер выходят за пределы высоты содержимого. То есть ие как-бы прибавляет по прозрачной границе сверху и снизу. Как это обойти уже подсказал Цветков Антон.

SoftAlex · August 6, 2007

Короче я понял это баг IE... Если border для всех сторон одинаковый то вс? ок, если нет то придется что-то исправлять в дизайне... А как мне можно присобачить к кнопке по 3 пиксела справа и слева (границу)? А то если поставить фон (в данном случае) к submit то он ведь будет работать нормальной только для кнопок определенной длины...

Цветков Антон · August 6, 2007

Dimitry Wolotko, построчно-то зачем? Сойдет и "border-width: 0 3px;". А единицы можно не указывать лишь у нуля.

SoftAlex, запихай кнопку в span, а уже у этого элемента задавай границу.

SoftAlex · August 6, 2007

Dimitry Wolotko, построчно-то зачем? Сойдет и "border-width: 0 3px;". А единицы можно не указывать лишь у нуля.
SoftAlex, запихай кнопку в span, а уже у этого элемента задавай границу.

Как проделать запихание span автоматически Java Script-ом только для IE?

Цветков Антон · August 7, 2007

SoftAlex, а зачем JS, да еще и только для IE... Сделайте для всех браузеров сразу - и не парьтесь...

Цветков Антон · August 7, 2007

Вот, не поленился написать:

<html>
<head>
 <title>Пример</title>
 <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
 <style type="text/css">
 span{
 background-color: #FFCC33;
 border: 3px solid #0099FF;
 border-width: 0 3px;
 }
 input{
 background-color: #FFCC33;
 border: 0;
 }
 </style>
</head>
<body>
 <span><input type="submit" value="Отправить"></span>
</body>
</html>

Проверил на IE6, Opera 8.5, Opera 9.0, Mozilla 1.7

SoftAlex · August 12, 2007

. Меняю размер шрифта у кнопки и вс? сползает.. Что делать?

SoftAlex · August 13, 2007

Короче проблемы с этими границами в span. Глючят они при измене шрифта и его размера на кнопке или в на span. Помогите побороть проблему ...

SoftAlex · August 14, 2007

Помогите пожалуйста решить проблему!

yopopt · August 14, 2007

Задавайте размер шрифта для span и для input.

<html>
<head>
	<title>Пример</title>
	<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
	<style type="text/css">
		span{
			background-color: #FFCC33;
			border: 3px solid #0099FF;
			border-width: 0 3px;
		font-size:24px;
		}
		input{
			background-color: #FFCC33;
			border: 0;
		font-size:20px;
		}
	</style>
</head>
<body>
	<span><input type="submit" value="Отправить"></span>
</body>
</html>

Или используйте display:block;

<html>
<head>
	<title>Пример</title>
	<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
	<style type="text/css">
		span{
			background-color: #FFCC33;
			border: 3px solid #0099FF;
			border-width: 0 3px;
		display:block;
		}
		input{
			background-color: #FFCC33;
			border: 0;
		font-size:20px;
		}
	</style>
</head>
<body>
	<span><input type="submit" value="Отправить"></span>
</body>
</html>

SoftAlex · August 14, 2007

Глючит при измене шрифта например на Arial

yopopt · August 14, 2007

Хм, поменял шрифт - вс? в порядке, никаких глюков.

SoftAlex · August 14, 2007

у меня выпирает на 1 пиксел вниз или фон или нижняя граница span при задании для него и для кнопки шрифта Arial. Это я вижу в FF..

SoftAlex · August 15, 2007

<html>
<head>
 <title>Пример</title>
 <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
 <style type="text/css">
 span{
 background-color: #000000;
 border-top-width: 0px;
 border-right-width: 3px;
 border-bottom-width: 0px;
 border-left-width: 3px;
 border-top-style: solid;
 border-right-style: solid;
 border-bottom-style: solid;
 border-left-style: solid;
 border-right-color: #f0cc78;
 border-left-color: #f0cc78;
 display:inline;
 text-transform: uppercase;
 font-family: Arial;
 font-size: 11px;
 }
 input{
 padding-right: 4px;
 padding-left: 4px;
 font-size: 10px;
 background-color: #FBF0D9;
 text-transform: uppercase;
 color: #481109;
 border: 0px;
 font-family: Arial;
}
 </style>
</head>
<body>
 <span><input type="submit" value="Отправить"></span>
</body>

Объясните почему выпирает снизу на 1 пиксел фон кнопки в FF. Плизз!

yopopt · August 15, 2007

Интересно... Могу предложить использовать display:block; вместе с float.

<html>
<head>
 <title>Пример</title>
 <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
 <style type="text/css">
 span{
 background-color: #000000;
 border-top-width: 0px;
 border-right-width: 3px;
 border-bottom-width: 0px;
 border-left-width: 3px;
 border-top-style: solid;
 border-right-style: solid;
 border-bottom-style: solid;
 border-left-style: solid;
 border-right-color: #f0cc78;
 border-left-color: #f0cc78;
 font-size: 11px;
 display:block;
 float:left;
 }
 input{
 padding-right: 4px;
 padding-left: 4px;
 font-size: 10px;
 background-color: #FBF0D9;
 text-transform: uppercase;
 color: #481109;
 border: 0px;
 font-family: Arial;

}
 </style>
</head>
<body>
 <span><input type="submit" value="Отправить"></span>
</body>

Sign In

frD-Border у input[type=button] input[type=submit] в IE

Question

Link to comment

Share on other sites

37 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

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