Проблема в IE 6

udodirc · August 17, 2010

Здраствуйте, есть вопрос по верстке. Есть форма, в ней есть как и выпадающие списки, так и просто текстовые поля. У них имеется один и тот же класс, в результате они получаются одинаковой ширины и обрамление поля серое. В FF и Opera поля одинаковые, а в IE6 отображаются по разному, у выпадающего списка и текстового поля ширина разная и обрамление тоже.

Вот код:

CSS:

.big{

width: 260px;

border: 1px solid;

color: #666666;

background: white;

}

Vlad · August 17, 2010

Недостаточно данных, нужен еще код HTML.

udodirc · August 17, 2010

Vlad said:
Недостаточно данных, нужен еще код HTML.

<td class=t_1 align='left'><input type='text' name='name' value='' class=big></td></tr><tr><td class=t_1 align='left' width=20%>Статус</td>

<option value='0'>Журналист</option>

<option value='1'>Оператор</option>

</select>

</td></tr><tr><td class=t_1 align='left' width=20%>Страна</td>

<select id='country' name='country' class='big'><option value='1'>КАЗАХСТАН</option><option value='2'>КЫРГЫЗСТАН</option><option value='3'>ТАДЖИКИСТАН</option><option value='4'>ТУРКМЕНИСТАН</option><option value='5'>УЗБЕКИСТАН</option></select>

</td></tr><tr><td></td><td class=t_2_u align='left'><input type='submit' name='ok' value='Ok' class=butmid></td></tr></table></FORM></div>

Lincky · August 17, 2010

Действительно существует такая проблема. Решается только подгонкой стилей.

А так же хочу добавить, что для select в IE бордеры через CSS не меняются. никак!!

Great Rash · August 17, 2010

Quote
А так же хочу добавить, что для select в IE бордеры через CSS не меняются. никак!!

Еще как меняются.

udodirc, вашу проблему можно решить так:

1) обрамляем каждый инпут контейнером (допустим <span>)

2) говорим контейнеру display: inline-block; border: red 1px solid; background: white;

3) говорим инпуту width: 100%; margin: 0; padding: 0; border: 0; background: 0;

4) задаем нужную ширину контейнеру (в моем случае <span>)

sigma77 · August 17, 2010

Great Rash,

Ты говоришь про инпут, а тут селект.

Для селекта (ИЕ7 и ниже) решений без JS, я не находила. Насколько мне известно свойства border в ИЕ7 для селекта нету.

udodirc · August 18, 2010

sigma77 said:
Great Rash,
Ты говоришь про инпут, а тут селект.
Для селекта (ИЕ7 и ниже) решений без JS, я не находила. Насколько мне известно свойства border в ИЕ7 для селекта нету.

Как сделать это на JS, есть примеры?

Кроме бордера, там еще ширина не выставляется. В классе big ширина 260px, в FF и Opera и select и input ширина одинаковая, а в IE разная, почему?

Вот полный код:

<td align="left" class="t_1"><input type="text" class="big" value="" name="name"/></td></tr><tr><td width="20%" align="left" class="t_1">Статус</td>

<option value="0">Журналист</option>

<option value="1">Оператор</option>

</select>

</td></tr><tr><td width="20%" align="left" class="t_1">Страна</td>

<select class="big" name="country" id="country"><option value="1">КАЗАХСТАН</option><option value="2">КЫРГЫЗСТАН</option><option value="3">ТАДЖИКИСТАН</option><option value="4">ТУРКМЕНИСТАН</option><option value="5">УЗБЕКИСТАН</option></select>

</td></tr><tr><td/><td align="left" class="t_2_u"><input type="submit" class="butmid" value="Ok" name="ok"/></td></tr></tbody></table>

Вот CSS:

.t_1 {FONT-FAMILY: Arial,Verdana, Sans-Serif; FONT-SIZE: 11px; color: #4A4A4A; background: #EEF4F7;}

.t_1_u {FONT-FAMILY: Arial,Verdana, Sans-Serif; FONT-SIZE: 11px; color: #4A4A4A; color: #4A4A4A; background: #EEF4F7; text-align:center;}

.t_2 {FONT-FAMILY: Arial,Verdana, Sans-Serif; FONT-SIZE: 11px; color: #4A4A4A; background: #E1E7EA;}

.t_2_u {FONT-FAMILY: Arial,Verdana, Sans-Serif; FONT-SIZE: 11px; color: #4A4A4A; color: #4A4A4A; background: #E1E7EA; text-align:center;}

.big{

width: 260px;

border: 1px solid;

color: #666666;

background: white;

}

Edited August 18, 2010 by udodirc

Great Rash · August 18, 2010

Quote
Ты говоришь про инпут, а тут селект.
Для селекта (ИЕ7 и ниже) решений без JS, я не находила. Насколько мне известно свойства border в ИЕ7 для селекта нету.

Я говорил именно про селект. Если чего-то нету это не значит, что мы не можем это эмулировать. Если вы не находили решений, это не значит что их не может быть в принципе, просто народ не любит париться со стилизацией форм, а я люблю

sigma77, udodirc, вот вам кроссбраузерное решение, копируем себе, запускаем и смотрим:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru">

<head>
	<title>An XHTML 1.0 Strict standard template</title>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />

	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
		}

		html {
			font-size: 100.1%;
		}

		body {
			margin: 10px;
			font: 62.5% Arial, Tahoma, Verdana, sans-serif;
		}

		a img {
			border: 0;
		}

		form {
			width: 290px;
		}

		fieldset {
			padding: 10px;
			border: red 3px solid;
		}

		legend {
			font-size: 1.6em;
			font-weight: bold;
			color: red;
			padding: 0 5px;
		}

		p {
			margin-top: 10px;
			font-size: 1.4em;
			line-height: 25px;
			color: red;
		}

		.test {
			display: inline-block;
			overflow: hidden;
			width: 260px;
			border: red 3px dashed;
			background: white;
		}

		.input {
			display: block;
			padding: 1px 4px;
		}

		.test select {
			width: 262px;
			margin: -1px;
			color: red;
		}

		.test input {
			width: 100%;
			margin: 0;
			padding: 0;
			border: 0;
			background: 0;
			color: red;
		}
	</style>

	<!--[if IE 8]>
	<style type="text/css">
		legend {
			padding-bottom: 5px;
		}
	</style>
	<![endif]-->

	<!--[if lte IE 8]>
	<style type="text/css">
		legend {
			margin-top: -10px;
			margin-bottom: 10px;
		}
	</style>
	<![endif]-->
</head>

<body>

	<form action="" method="get">
		<fieldset>
			<legend>Я толстая красная форма!</legend>

			<span class="test">
				<select name="test">
					<option value="1">option 1</option>
					<option value="2">option 2</option>
					<option value="3">option 3</option>
				</select>
			</span>

			<br /><br />

			<span class="test">
				<span class="input">
					<input type="text" name="test2" value="input" />
				</span>
			</span>
		</fieldset>

		<p>
			Между прочим!<br />
			<a href="http://validator.w3.org/check?uri=referer"><img src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0 Strict" height="31" width="88" /></a>
		</p>
	</form>

</body>
</html>

Lincky · August 18, 2010

С таким методом абсолютно согласен. Но изначально был другой исходный код, исходя из которого, реализовать бордер нельзя.

Great Rash · August 18, 2010

Ну, как бы, это все равно, что сказать: "изначально была таблица и стандартными методами ее в див превратить нельзя". Ничто же не мешает дописать куда надо нужный код.

sigma77 · September 6, 2010

Great Rash said:
Я говорил именно про селект. Если чего-то нету это не значит, что мы не можем это эмулировать. Если вы не находили решений, это не значит что их не может быть в принципе, просто народ не любит париться со стилизацией форм, а я люблю
sigma77, udodirc, вот вам кроссбраузерное решение, копируем себе, запускаем и смотрим

Только что способ реально помог. Респектище тебе

Sign In

Проблема в IE 6

Question

Link to comment

Share on other sites

10 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

Join the conversation

Обсуждения

Important Information