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>

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

попробуй просто заюзать для кнопки параметры width и height... и аналогичные для спана.

zzz · August 15, 2007

<html>
<head>
 <title>Пример</title>
 <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
 <style type="text/css">
		* html div {
			display: inline;
			border-top-width: 0;
			border-right-width: 3px;	
			border-bottom-width: 0;
			border-left-width: 3px;
			border-style: solid;
			border-color: #F0CC78;
		}
		input {
			padding: 0 4px;
			background: #FBF0D9;
			color: #481109;
			font: 11px Arial;
			border-top-width: 0;
			border-right-width: 3px;
			border-bottom-width: 0;
			border-left-width: 3px;
			border-style: solid;
			border-color: #F0CC78;
		}
		* html input {
			border-left-width: 0;
			border-right-width: 0;
		}
 </style>
</head>

<body>
 <div><input type="submit" value="Отправить" /></div>
</body>

В примере, приведенном выше есть не большая проблема, при увеличении шрифта в Sarafi и при увеличении маштаба страницы в Opera, слева и справа от кнопки образуется отступ в 1 пиксел. Мой пример работает во всех броузерах. Вместо

можно использовать , это кому как нравится.

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

Короче, вот идеально работающий пример. Работает везде даже при увеличении шрифта. Если автора темы это снова не устроит, то предлагаю ему забить на это дело и использовать background.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
 <title>Пример</title>
 <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
 <style type="text/css">
 div{
			float: left;
 background-color: #FFCC33;
 border: 3px solid #0099FF;
 border-width: 0 3px;
 }
 input{
 background-color: #FFCC33;
 border: 0;
			font-size: 500px;
 }
 </style>
</head>
<body>
 <div><input type="submit" value="Отправить"></div>
</body>
</html>

SoftAlex · August 16, 2007

Вроде заработало, а тут бац еще проблема... ставлю короче пробел после span и еще вставляю такую же кнопку и делается перенос который совсем не в тему... а если уберу пробел то вс? нормально... А дальше еще хуже: пробовал после 2 кнопок текст написать так он вообще куда-то уехал...:/

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
 <title>Пример</title>
 <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
 <style type="text/css">
 div{
	float: left;
	background-color: #FFCC33;
	border: 3px solid #0099FF;
	border-width: 0 3px;
	display: block;
	clear: left;
 }
 input{
	background-color: #FFCC33;
	border: 0;
	font-size: 9px;
	padding-right: 3px;
	padding-left: 3px;
 }
 </style>
</head>
<body>
 <div><input type="submit" value="Отправить"></div> <div><input type="submit" value="Отправить"></div>
</body>
</html>

yopopt · August 16, 2007

Вот так:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
 <title>Пример</title>
 <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
 <style type="text/css">
 div{
 float: left;
 background-color: #FFCC33;
 border: 3px solid #0099FF;
 border-width: 0 3px;
 }
 input{
 background-color: #FFCC33;
 border: 0;
 font-size: 9px;
 padding-right: 3px;
 padding-left: 3px;
 }
 span{
 display:block;
 float:left;
 }
 </style>
</head>
<body>
 <div><input type="submit" value="Отправить"></div><span>бла-бла-бла</span><div><input type="submit" value="Отправить"></div>
</body>
</html>

SoftAlex · August 16, 2007

"бла-бла-бла" тоже надо заключать в span???? Это просто праздник какой-то для span! ))))))))

SoftAlex · August 16, 2007

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

А как мне сделать вс? это без float используя background.. Разве им можно нарисовать границы с 2х сторон???

zzz · August 16, 2007

Кажись проблема возникает за проблемой... Так как у меня вс? теперь в лево съезжает ... Кагбы это дело находится в таблице, но нуно по центру кнопки поставить... Пробел между кнопками заключенный в span с границей чегото тоже мутит....
А как мне сделать вс? это без float используя background.. Разве им можно нарисовать границы с 2х сторон???

Используй мой пример и никаких проблем не возникнет.

SoftAlex · August 17, 2007

Используй мой пример и никаких проблем не возникнет.

Проблема возникает: возникает перенос

yopopt · August 17, 2007

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

Приведите более конкретный код.

А как мне сделать вс? это без float используя background.. Разве им можно нарисовать границы с 2х сторон???

Можно сделать кнопки фиксированной ширины и нарисовать background в виде: полоса - фон_шириной_кнопки_минус_ширина_полос - полоса.

SoftAlex · August 17, 2007

Можно сделать кнопки фиксированной ширины и нарисовать background в виде: полоса - фон_шириной_кнопки_минус_ширина_полос - полоса.

А без фиксированной ширины не как?

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

Эх, вот любят люди придумывать себя всякие глупости, которые ни им, ни другим не нужны, и мучаются... Сделали кнопку одноцветную + фон и все тут.

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

Join the conversation

Обсуждения

Important Information