какой DOCTYPE нужен

monstrU · December 16, 2009

Все привет! вот для примера составил простой html - таблица и div под ней.

хочу чтобы ширина таблицы и div были одинаковая.

но ie 7.0 рисует таблицу шириной меньше, чем div. поизучал вопрос - это все зависит от doctype, но вот какой ставить нужно чтобы ширина обоих объектов была одинаковая ?

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<head>

<title>Untitled Page</title>

</head>

<body >

<tr>

</tr>

</table>

456

</div>

</body>

</html>

rus · December 16, 2009

Эти элементы заимствуют ширину прежде всего от родителя, в данном случае это html и body, а у них ширина не указана явно.

Searcher · December 16, 2009

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

Про доктайп читаем здесь.

LunatiK · December 16, 2009

Эти элементы заимствуют ширину прежде всего от родителя, в данном случае это html и body, а у них ширина не указана явно.

И чего? родитель у них общий соответственно наследство одинаковое.

Даже если поставить ширину не 100%, а 100px при данном раскладе, всё равно div будет ширее

rus · December 16, 2009

И чего? родитель у них общий соответственно наследство одинаковое.
Даже если поставить ширину не 100%, а 100px при данном раскладе, всё равно div будет ширее

Да, действительно, див шире где-то на 1 пиксель, с права выпирает.

LunatiK · December 16, 2009

Да, действительно, див шире где-то на 1 пиксель, с права выпирает.

точнее на 2px, - это ширина бордера справа и слева

у таблицы ширина 100%, а у дива 100% + бордер

rus · December 16, 2009

точнее на 2px, - это ширина бордера справа и слева
у таблицы ширина 100%, а у дива 100% + бордер

Так у таблицы ведь тоже стоит бордер... или она его во внутрь определяет, а у дива наружу?

Edited December 16, 2009 by rus

Justnewone · December 16, 2009

фиребугом надо посмотреть, "показывать вычисленный стиль". Там разгадка видать.

monstrU · December 16, 2009

ну вот и решение - спасибо за помощь. у div к ширине border прибавляется

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<head>

<title>Untitled Page</title>

</head>

<body >

<tr>

</tr>

</table>

456

</div>

</body>

</html>

Доктайп предназначен не для решения частных вопросов. Он указывает на стандарт по которому броузер будет отображать страницу. Этот стандар касается всех элементов, а не только таблиц.
Про доктайп читаем здесь.

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

Great Rash · December 16, 2009

Если вы используете доктайп HTML, то строчка xmlns="http://www.w3.org/1999/xhtml", очевидно, не нужна...

А вообще использовать доктайп для решения подобной проблемы - мегаизврат!

Justnewone · December 16, 2009

Внимание!

какой DOCTYPE нужен

Вот и отвечай на вопросы после такого.

Ой, это не отсуда. Тссс.

monstrU · December 16, 2009

Если вы используете доктайп HTML, то строчка xmlns="http://www.w3.org/1999/xhtml", очевидно, не нужна...
А вообще использовать доктайп для решения подобной проблемы - мегаизврат!

действительно, не нужно - посмотрел в документации спасибо за подсказку.

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

или лучше использовать элементы одного типа ?

LunatiK · December 16, 2009

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

Вещи лучше использовать по назначению: Половником суп черпать, ножом хлеб резать.

Таблицу - для табличных данных

Дивы - для блока

и т.д.

Great Rash · December 16, 2009

неправильно указывается ширина разных элементов на странице

Все там правильно, если хотите, чтобы у вас 100% ширина таблицы с бордером и дива с бордером была одинаковой, то оберните див с бордером в еще один див и перестаньте прописывать дивам width: 100%.

Тогда у вас все будет корректно отображаться при любом доктайпе и вы сможете поставить горячо любимый мной xhtml strict

LunatiK · December 16, 2009

Все там правильно, если хотите, чтобы у вас 100% ширина таблицы с бордером и дива с бордером была одинаковой, то оберните див с бордером в еще один див и перестаньте прописывать дивам width: 100%.
Тогда у вас все будет корректно отображаться при любом доктайпе и вы сможете поставить горячо любимый мной xhtml strict

Ты это пробовал ? по-моему даже теоретически - невыдет

Justnewone · December 16, 2009

Все там правильно, если хотите, чтобы у вас 100% ширина таблицы с бордером и дива с бордером была одинаковой, то оберните див с бордером в еще один див и перестаньте прописывать дивам width: 100%.
Тогда у вас все будет корректно отображаться при любом доктайпе и вы сможете поставить горячо любимый мной xhtml strict

Засада кажется в том, что ФФ выделится.

s0rr0w · December 16, 2009

Засада кажется в том, что ФФ выделится.

Нет, просто сделает все как и положено. Это остальные на его фоне выделяются

monstrU · December 16, 2009

Все там правильно, если хотите, чтобы у вас 100% ширина таблицы с бордером и дива с бордером была одинаковой, то оберните див с бордером в еще один див и перестаньте прописывать дивам width: 100%.
Тогда у вас все будет корректно отображаться при любом доктайпе и вы сможете поставить горячо любимый мной xhtml strict

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

но отчего так происходит? я думаю , что когда есть контайнер у дива с бордером то ширина формируется по диву-контейнеру ?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html >

<head>

<title>Untitled Page</title>

</head>

<body >

<tr>

</tr>

</table>

456

</div>

</body>

</html>

Great Rash · December 16, 2009

Да прекратите ж вы ставить ширину диву - она у него и так 100% по умолчанию, зачем лишний код писать?

Вот почему так происходит теоретически описать не могу...

P.S.

И оформляйте пожалуйста код в теги [code] и [/code], и вам и нам удобней будет.

sashakiselev · December 25, 2009

Название темы столь универсально=), что решил поднять ее для своего вопроса, несмотря на совсем иную проблему.

Собственно получив понятие о необходимости сабжа для корректного отображения документа, уже на этапе разметки добавив его в код, к большому удивлению получил игнор на указанный в процентах размер таблицы и ее элементов, т.е. работают только фиксированные в px. До того с этим не сталкивался, т.к. пренебрегал доктайпом, т.е. без него все ОК!. ???

ЗЫ.. по-моему перепробывал все только встречавшиеся мне на пути доктайпы.

код разметки, где по идее ячейка "text" должна быть резиновой:

<! —вставьте ваш любимый доктайп=)—>
<html> 
<head> 
<title>page name</title>

<style type="text/css">
 html, body{
  margin:0px;
  padding:0px;}
table.main {
  width: 400px; 
  height: 100%; 
  border-collapse: collapse; border-color: #000000;}
td{
  font-family: Tahoma;
  font-size: 11px;
  color: #000000;
  vertical-align: top; 
  border: 1px solid #000000;}
td {padding: 0px;}
td.top {}
td.menu {}
td.text {height: 100%;}
td.copyright {text-align: center;}
</style>

</head> 
<body>
<table border="1" class="main" align="center">
<tr>
<td>empty</td>
</tr>
<tr>
<td class="top">top</td>
</tr>
<tr>
<td class="menu">menu</td>
</tr>
<tr>
<td class="text">text</td>
</tr>
<tr>
<td class="copyright">copyright</td>
</tr>
</table>
</body> 
</html>

Edited December 25, 2009 by sashakiselev

psywalker · December 25, 2009

Тут явно чтото не хватает для начала html, body{

margin:0px;

padding:0px;}

sashakiselev · December 25, 2009

Тут явно чтото не хватает для начала html, body{
margin:0px;
padding:0px;}

ээ...указаны же!

Edited December 25, 2009 by sashakiselev

Justnewone · December 25, 2009

ээ...указаны же!

время смари, когда комменты вышел и последнее твое редактирование.

sashakiselev · December 25, 2009

Justnewone, margin-padding были изначально.. правил имена классов для симпатичности.. хз может я в момент написания раньше запостил перепутав с "предварительный просмотр", хотя изначально они были.. ctrl c - p - куда им деваться)..

Но это не суть совсем - главное что у меня они в моем файле существуют вместе с вышеуказанной проблемой!(.

Edited December 25, 2009 by sashakiselev

Justnewone · December 25, 2009

html, body{

margin:0px;

padding:0px;}

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

sashakiselev · December 25, 2009

Justnewone, да без доктайпа ГУД!

Может вы меня просветите на счет "размеров сбацать" - буду счастлив.. без сарказма - в конец запутался.. Я ставил там ноли чтобы небыло

промежутков между таблицей и границами экрана..(Я по сути в этом и понял значение этих атрибутов!?) Так какие там поставить значения чтобы "нужная" ячейка стала резиновой ?? и в чем логическая связь между ними?

Edited December 25, 2009 by sashakiselev

Sign In

какой DOCTYPE нужен

Question

Link to comment

Share on other sites

28 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