Форум: Форум PHPФорум ApacheФорум Регулярные ВыраженияФорум MySQLHTML+CSS+JavaScriptФорум FlashРазное
Новые темы: 0000000
MySQL 5. В подлиннике. Авторы: Кузнецов М.В., Симдянов И.В. C++. Мастер-класс в задачах и примерах. Авторы: Кузнецов М.В., Симдянов И.В. Объектно-ориентированное программирование на PHP. Авторы: Кузнецов М.В., Симдянов И.В. Программирование. Ступени успешной карьеры. Авторы: Кузнецов М.В., Симдянов И.В. PHP. Практика создания Web-сайтов (второе издание). Авторы: Кузнецов М.В., Симдянов И.В.
ВСЕ НАШИ КНИГИ
Консультационный центр SoftTime

HTML+CSS+JavaScript

Выбрать другой форум

 

Здравствуйте, Посетитель!

вид форума:
Линейный форум Структурный форум

тема: Почему Input и textarea длиннее блоков при стиле width 100%?
 
 автор: warkhosh   (28.08.2009 в 15:19)   письмо автору
 
 

Кто может дать объяснение: почему в HTML документах с объявленным doctype, Input и textarea со стилем width:100% внутри блочных блоков (div, h1...) длиннее их?
Есть ли решение этой проблемы без всяких обворачиваний другими тэгами?
Под FF это обходится присвоением Input и textarea стилей: min-width:100%; max-width:100%; но это единичный известный мне CSS хак конкретно под FF.

ПРИМЕР:
<?xml version="1.0" encoding="windows-1251" ?>
<!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" lang="ru">
<head>
<title>:: Input и textarea длиннее блоков при стиле width 100%!!!</title>
<meta http-equiv="Content-Type" content="text/html;charset=windows-1251" />
</head>

<body style="padding:0px; margin:0px;">
<div style="border:1px solid red; position:relative;">
<input type="text" value="" name="test" style="position:relative; width:100%; padding:0px; margin:0px; " />
<p style="text-align:justify;">Текст.</p>
</div>
<h1 style="text-align:justify; border:1px solid red;">Текст.<br />
<textarea name="text" style="width:100%; padding:0px; margin:0px; ">textarea</textarea>
</h1>
</body>
</html>

  Ответить  
 
 автор: Madman   (28.08.2009 в 15:25)   письмо автору
 
   для: warkhosh   (28.08.2009 в 15:19)
 

Наверное потому, что у них есть еще и border ;)
Напишите так:
<input type="text" value="" name="test" style="position:relative; width:100%; padding:0px; margin:0px; border:none" /> 
и увидите, что инпут будет шириной в родительский блок

  Ответить  
Rambler's Top100
вверх

Rambler's Top100 Яндекс.Метрика Яндекс цитирования