Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 08.07.2012, 18:56
Аватар для Demath
Профессор
Отправить личное сообщение для Demath Посмотреть профиль Найти все сообщения от Demath
 
Регистрация: 22.06.2012
Сообщений: 168

При добавлении DOCTYPE "плывут" размеры input type=text
Помогите разобраться, пожалуйста.
Без DOCTYPE текстовые input (<input ... type="text" />) отображаются согласно заданного размера (width: 20px; height: 20px)
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="ru-ru" xml:lang="ru-ru">

<head>
<title>Генератор матриц</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />

<style type="text/css">
ul li {list-style: none; padding: 0; margin: 0;}

#tabsText li {width:364px; height:230px; background: #ededed; border: 1px solid darkblue;
			  -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px;}
			  
div.MatrixGenerator {float: left; position: relative; width: 354px; height: 159px; margin: 10px 0 0 5px;
				 background: transparent url(http://goo.gl/pwyR1) center no-repeat;}
	
	.MatrixRows, .MatrixCols, .MatrixVline, .MatrixHline, .MatrixInsert
				{position: absolute;}
	.MatrixRows {top: 82px; left: 84px;}
	.MatrixCols {top: 82px; left: 205px;}
	.MatrixVline {top: 110px; left: 239px;}
	.MatrixHline {top: 133px; left: 250px;}
	.MatrixInsert {top: 78px; left: 267px;}
	
	.MatrixRows input, .MatrixCols input, .MatrixVline input, .MatrixHline input
				 {width: 20px; height: 20px; margin: 0; padding: 0; color: blue;}	
				 
	.MatrixInsert input {width: 70px; height: 22px; margin: 0; padding: 0; cursor: pointer;}
	
	.tbrackets1, .tbrackets2, .tbrackets3, .tbrackets4, .tbrackets5, .tbrackets6
				{position: absolute; top: 48px; height: 22px; cursor: default;}
	.tbrackets1 {width: 28px; left: 10px;}
	.tbrackets2 {width: 25px; left: 69px;}
	.tbrackets3 {width: 25px; left: 126px;} 
	.tbrackets4 {width: 32px; left: 183px;}
	.tbrackets5 {width: 34px; left: 246px;}
	.tbrackets6 {width: 18px; left: 309px;}
	
	.ibrackets1, .ibrackets2, .ibrackets3, .ibrackets4, .ibrackets5, .ibrackets6
				{position: absolute; top: 52px; height: 22px; cursor: default;}
	.ibrackets1 {left: 40px;}
	.ibrackets2 {left: 96px;}
	.ibrackets3 {left: 153px;} 
	.ibrackets4 {left: 217px;}
	.ibrackets5 {left: 282px;}
	.ibrackets6 {left: 328px;}
	
	.ibrackets1 input, .ibrackets2 input, .ibrackets3 input, .ibrackets4 input, .ibrackets5 input, .ibrackets6 input
				{margin: 0; width: 13px; height: 13px;}
</style>

<!--[if lt IE 9]>
<style type="text/css">
.ibrackets1 input, .ibrackets2 input, .ibrackets3 input, .ibrackets4 input, .ibrackets5 input, .ibrackets6 input
				{margin: 0; padding: 0; width: 13px; height: 13px;}
</style>
<![endif]-->
</head>

<body>
<ul id="tabsText">
<li>
<div class="MatrixGenerator">
	<span class="MatrixRows"><input name="rows1" maxlength="1" type="text" /></span>
	<span class="MatrixCols"><input name="cols1" maxlength="1" type="text" /></span>
	<span class="MatrixVline"><input name="vline1" maxlength="1" type="text" /></span>
	<span class="MatrixHline"><input name="hline1" maxlength="1" type="text" /></span>
	<span class="MatrixInsert"><input value="Вставить" name="button" type="button" title="Нажмите один раз"
								onclick="LatexMatrix(rows1,cols1,vline1,hline1,message)" /></span>

	<span class="tbrackets1" title="Круглые скобки"></span>
	<span class="tbrackets2" title="Прямые скобки"></span>
	<span class="tbrackets3" title="Квадратные скобки"></span>
	<span class="tbrackets4" title="Двойные прямые скобки (норма матрицы)"></span>
	<span class="tbrackets5" title="Фигурные скобки"></span>
	<span class="tbrackets6" title="Без скобок"></span>							
								
	<span class="ibrackets1"><input type="radio" name="mbrackets" checked="checked" value="p" onclick="brackets(this)" /></span>
	<span class="ibrackets2"><input type="radio" name="mbrackets" value="v" onclick="brackets(this)" /></span>
	<span class="ibrackets3"><input type="radio" name="mbrackets" value="b" onclick="brackets(this)" /></span>
	<span class="ibrackets4"><input type="radio" name="mbrackets" value="V" onclick="brackets(this)" /></span>
	<span class="ibrackets5"><input type="radio" name="mbrackets" value="B" onclick="brackets(this)" /></span>
	<span class="ibrackets6"><input type="radio" name="mbrackets" value="" onclick="brackets(this)" /></span>
</div>
</li>
</ul>
</body>
</html>

Но, когда добавляю DOCTYPE, эти input увеличиваются до width: 24px; height: 24px

<!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" dir="ltr" lang="ru-ru" xml:lang="ru-ru">

<head>
<title>Генератор матриц</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />

<style type="text/css">
ul li {list-style: none; padding: 0; margin: 0;}

#tabsText li {width:364px; height:230px; background: #ededed; border: 1px solid darkblue;
			  -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px;}
			  
div.MatrixGenerator {float: left; position: relative; width: 354px; height: 159px; margin: 10px 0 0 5px;
				 background: transparent url(http://goo.gl/pwyR1) center no-repeat;}
	
	.MatrixRows, .MatrixCols, .MatrixVline, .MatrixHline, .MatrixInsert
				{position: absolute;}
	.MatrixRows {top: 82px; left: 84px;}
	.MatrixCols {top: 82px; left: 205px;}
	.MatrixVline {top: 110px; left: 239px;}
	.MatrixHline {top: 133px; left: 250px;}
	.MatrixInsert {top: 78px; left: 267px;}
	
	.MatrixRows input, .MatrixCols input, .MatrixVline input, .MatrixHline input
				 {width: 20px; height: 20px; margin: 0; padding: 0; color: blue;}	
				 
	.MatrixInsert input {width: 70px; height: 22px; margin: 0; padding: 0; cursor: pointer;}
	
	.tbrackets1, .tbrackets2, .tbrackets3, .tbrackets4, .tbrackets5, .tbrackets6
				{position: absolute; top: 48px; height: 22px; cursor: default;}
	.tbrackets1 {width: 28px; left: 10px;}
	.tbrackets2 {width: 25px; left: 69px;}
	.tbrackets3 {width: 25px; left: 126px;} 
	.tbrackets4 {width: 32px; left: 183px;}
	.tbrackets5 {width: 34px; left: 246px;}
	.tbrackets6 {width: 18px; left: 309px;}
	
	.ibrackets1, .ibrackets2, .ibrackets3, .ibrackets4, .ibrackets5, .ibrackets6
				{position: absolute; top: 52px; height: 22px; cursor: default;}
	.ibrackets1 {left: 40px;}
	.ibrackets2 {left: 96px;}
	.ibrackets3 {left: 153px;} 
	.ibrackets4 {left: 217px;}
	.ibrackets5 {left: 282px;}
	.ibrackets6 {left: 328px;}
	
	.ibrackets1 input, .ibrackets2 input, .ibrackets3 input, .ibrackets4 input, .ibrackets5 input, .ibrackets6 input
				{margin: 0; width: 13px; height: 13px;}
</style>

<!--[if lt IE 9]>
<style type="text/css">
.ibrackets1 input, .ibrackets2 input, .ibrackets3 input, .ibrackets4 input, .ibrackets5 input, .ibrackets6 input
				{margin: 0; padding: 0; width: 13px; height: 13px;}
</style>
<![endif]-->
</head>

<body>
<ul id="tabsText">
<li>
<div class="MatrixGenerator">
	<span class="MatrixRows"><input name="rows1" maxlength="1" type="text" /></span>
	<span class="MatrixCols"><input name="cols1" maxlength="1" type="text" /></span>
	<span class="MatrixVline"><input name="vline1" maxlength="1" type="text" /></span>
	<span class="MatrixHline"><input name="hline1" maxlength="1" type="text" /></span>
	<span class="MatrixInsert"><input value="Вставить" name="button" type="button" title="Нажмите один раз"
								onclick="LatexMatrix(rows1,cols1,vline1,hline1,message)" /></span>

	<span class="tbrackets1" title="Круглые скобки"></span>
	<span class="tbrackets2" title="Прямые скобки"></span>
	<span class="tbrackets3" title="Квадратные скобки"></span>
	<span class="tbrackets4" title="Двойные прямые скобки (норма матрицы)"></span>
	<span class="tbrackets5" title="Фигурные скобки"></span>
	<span class="tbrackets6" title="Без скобок"></span>							
								
	<span class="ibrackets1"><input type="radio" name="mbrackets" checked="checked" value="p" onclick="brackets(this)" /></span>
	<span class="ibrackets2"><input type="radio" name="mbrackets" value="v" onclick="brackets(this)" /></span>
	<span class="ibrackets3"><input type="radio" name="mbrackets" value="b" onclick="brackets(this)" /></span>
	<span class="ibrackets4"><input type="radio" name="mbrackets" value="V" onclick="brackets(this)" /></span>
	<span class="ibrackets5"><input type="radio" name="mbrackets" value="B" onclick="brackets(this)" /></span>
	<span class="ibrackets6"><input type="radio" name="mbrackets" value="" onclick="brackets(this)" /></span>
</div>
</li>
</ul>
</body>
</html>
Ответить с цитированием
  #2 (permalink)  
Старый 08.07.2012, 19:03
что-то знаю
Отправить личное сообщение для devote Посмотреть профиль Найти все сообщения от devote
 
Регистрация: 24.05.2009
Сообщений: 5,176

добавьте для инпутов свойство в CSS:
box-sizing: border-box;
__________________
хм Russians say завтра but завтра doesn't mean "tomorrow" it just means "not today."
HTML5 history API рассширение для браузеров не поддерживающих pushState, replaceState
QSA CSS3 Selector Engine
Ответить с цитированием
  #3 (permalink)  
Старый 08.07.2012, 19:08
Аватар для Demath
Профессор
Отправить личное сообщение для Demath Посмотреть профиль Найти все сообщения от Demath
 
Регистрация: 22.06.2012
Сообщений: 168

Спасибо. Помогло!
Ответить с цитированием
  #4 (permalink)  
Старый 08.07.2012, 19:16
что-то знаю
Отправить личное сообщение для devote Посмотреть профиль Найти все сообщения от devote
 
Регистрация: 24.05.2009
Сообщений: 5,176

Сообщение от Demath
Спасибо. Помогло!
на будущее запомните, что в режиме совместимости, то-есть без DOCTYPE браузер отмеряет размер с учетом бордеров, а в нормальном режиме он размеры высчитывает без учета бордеров.
__________________
хм Russians say завтра but завтра doesn't mean "tomorrow" it just means "not today."
HTML5 history API рассширение для браузеров не поддерживающих pushState, replaceState
QSA CSS3 Selector Engine
Ответить с цитированием
  #5 (permalink)  
Старый 08.07.2012, 19:27
Аватар для Demath
Профессор
Отправить личное сообщение для Demath Посмотреть профиль Найти все сообщения от Demath
 
Регистрация: 22.06.2012
Сообщений: 168

Сообщение от devote
на будущее запомните, что в режиме совместимости, то-есть без DOCTYPE браузер отмеряет размер с учетом бордеров, а в нормальном режиме он размеры высчитывает без учета бордеров.
Спасибо.

P.S. Для Firefox и Safari пришлось ещё добавить -moz-box-sizing:border-box и -webkit-box-sizing:border-box соответственно.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
изменение значения input при смене значения select galart jQuery 4 30.01.2015 19:39
Гостевая Ajax + php не обнавляется при добавлении сообщения onuvidelsolnce AJAX и COMET 6 27.11.2011 20:47
Баг Firefox: по F5 перескакивает radio при динамическом добавлении в DOM input Atoll Events/DOM/Window 6 22.06.2010 18:25
Скролл окна при добавлении контента "сверху"" yaneblog Events/DOM/Window 0 22.01.2010 23:00
как при добавлении изображения на сервер считывать имя в БД? solomusic Серверные языки и технологии 3 12.06.2008 23:28