растяжка по высоте,падинги,опера,эксплорер

LikeAPilot · March 4, 2008

http://timako.iskra-net.ru/temp/index.html

в опере отображается нормально, но не растягивается по высоте.

в эксплорере паддинг шапки как-то не так считается и сразу появляется дырка.

(я помню была статья про то, как в эксплорере считается падинг, но так и не нашел)

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

уже замучался е? убирать... наверняка где то или фонт сайз прописать надо или с падингами что то не так...

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

klierik · March 4, 2008

так. поставте доктайп и далее будем думать

LikeAPilot · March 4, 2008

сейчас он там стоит.

klierik · March 4, 2008

отлично. тепер все безобразие типа

style="border-bottom:1px solid black;border-left:1px solid black;border-right:1px solid black;border-top:1px solid black; height:100%" align="center" width="759" border="0" cellspacing="0" cellpadding="0"

переносим в внешний CSS

LikeAPilot · March 4, 2008

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

klierik · March 4, 2008

ну толк как минимум в том что НЕ удобно править код для выяснения где размещается ошибка 8)))

да и надо б изначально все в CSS кидать

LikeAPilot · March 4, 2008

сразу в ксс еще умения не хватает.

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

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

LikeAPilot · March 5, 2008

буду рад любым идеям и советам...

LikeAPilot · March 5, 2008

вот другой пример

http://timako.iskra-net.ru/temp2/index.html

если стоит доктайп, то не растягивается по высоте в опере. в эксплорере тоже не растягивается по высоте

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

Что я делаю не так? У меня проблемы с растягиванием по высоте и доктайпом)) явно неправильно как то верстаю. косяки схожие.

Scrum · March 5, 2008

<table width="100%" border="0" cellspacing="0" cellpadding="0" style="height:100%;border-bottom:1px solid black;border-top:1px solid black;">

100% высоты от чего он должен иметь ?

LikeAPilot · March 5, 2008

под этой записью я подразумевал что таблица будет занимать 100% ширины и высоты окна браузера.

Scrum · March 5, 2008

нет этой записью вы говорите таблице занимать 100% высоты и ширины от родительского элемента.

LikeAPilot · March 5, 2008

нет у этой таблицы родительских элементов. ну разве что body. но я не вижу как боди мешает растягиваться ей.

Scrum · March 5, 2008

не разве что, а так и есть у таблицы родительским элементом является боди

смотрим высоту боди по умолчанию

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

<html>

<head>
 <title></title>
 <style type="text/css">
 <!--
 body {
 border: 1px solid red;
 }

 -->
 </style>
</head>

<body>

</body>

</html>

и прикидываем 100% высоты таблицы от родительского элемента.

Смекаете ? и подумайте над тем а есть ли у боди родительский элемент ? и какой высоты он ?

LikeAPilot · March 5, 2008

спасибо большое)

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

в опере теперь все идеально, а в эксплорере почему-то так и не растягивается.

lighted · March 5, 2008

Можно поработать с маржинами html и body.

Scrum · March 5, 2008

давайте посмотрим как вы задали "хтмл высоту".

LikeAPilot · March 6, 2008

вот так

<style type="text/css">
html {
 height:100%;
 }
 </style>

потом подумал и добавил

<style type="text/css">
html,body {
 height:100%;
 }
 </style>

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

Scrum · March 6, 2008

необходимо сменить доктайп на

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>
 <title></title>
 <style type="text/css">
 <!--
 html, body {
 height: 100%;
 margin: 0;
 padding: 0;
 border: none;
 }
 table {
 border-collapse: collapse;
 border: 1px solid red;
 height: 100%;
 width: 100%;
 }
 td {
 padding: 0;
 border: 1px solid gray;
 }
 #content {
 height: 100%;
 }



 -->
 </style>
</head>

<body>
 <table cellspacing="0">
 <tr>
 <td>Head</td>
 </tr>
 <tr>
 <td>Menu</td>
 </tr>
 <tr>
 <td>Logo</td>
 </tr>
 <tr>
 <td id="content">
 content
 </td>
 </tr>
 <tr>
 <td>Footer</td>
 </tr>
 </table>
</body>

</html>

LikeAPilot · March 6, 2008

спасибо большое еще раз))

Keni · February 23, 2011

http://timako.iskra-net.ru/temp/index.html
в опере отображается нормально, но не растягивается по высоте.
в эксплорере паддинг шапки как-то не так считается и сразу появляется дырка.
(я помню была статья про то, как в эксплорере считается падинг, но так и не нашел)
если убрать доктайп, то и в опере и эксплорере растягивается по высоте, но под меню появляется пустая полоска.
уже замучался е? убирать... наверняка где то или фонт сайз прописать надо или с падингами что то не так...
помогите, пожалуйста доктайп сохранить, по высоте растянуть, полоску убрать.

во во, такая же проблемма Демонтажные работы

Sign In

растяжка по высоте,падинги,опера,эксплорер

Question

Link to comment

Share on other sites

20 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

Join the conversation

Обсуждения

Important Information