Глючат таблицы , точнее я, но всё равно таблицы виноваты

Добрый день Подскажите пожалуйста как исправить ошибку в вёрстке (использование таблиц не обязательно).

Есть контент, в нём три колонки: левая и правая - границы с задником, центр - контент с текстом. При наборе текста в центральной - таблица увеличивается (в высоту), средняя колонка тоже, а границы с задником остаются исходного размера.

Скрин с ошибкойUntitled_3.png (41,42 Кбайт, скачиваний: 400)

Контент сайта:

<div class="content">
        <table><tr>
            <td class="left">& nbsp;</td>
            <td class="middle">
                <div>
                    <h1>Здравствуйте, дорогие друзья!!!</h1>
                    sadsad
                    asd<br />
                    asd<br />
                    asd<br />
                </div>
            </td>
            <td class="right">& nbsp;</td>
        </tr></table>
    </div>

CSS:

@charset "windows-1251";
/* настройки для всего сайта */
*{
    margin:0px;
    padding:0px;
}
html{ height:100%; }
img{ border:none; }
table{ border-collapse:collapse; }
td{
    vertical-align:top;
    padding:0px;
}
 
h1{ font-size:18px; font-weight:normal; }
 
/* ... */
/* разные стили */
/* ... */
 
/* контент */
div.content{
    width:800px;
    height:auto;
}
 
 
div.content > table td.left{
    background:#d4bb92 url(../img/middle_left.jpg) right top repeat-y;
    width:100px;
}
 
div.content > table td.middle{
    width:580px;
    padding:0px 10px;
    background:#d4bb92;
}
 
div.content > table td.right{
    background:#d4bb92 url(../img/middle_right.jpg) left top repeat-y;
    width:100px;
}

<td class="right" width="100">& nbsp;</td>

поможет

Добавлено 07.09.10, 18:12
сорри не туда смотрю

background:url("картинка") repeat-y scroll left top #FFFFFF;

Нашёл ошибку в своём же коде

...
 
.italic{ font-style:italic; }
.ul{ text-decoration:underline; }
.green{ color:#690; }
.red{ color:#900; }
.px9{ font-size:9px; }
.px10{ font-size:10px; }
.px11{ font-size:11px; }
.px12{ font-size:12px; }
.px22{ font-size:22px; }
.left{ float:left; }
.right{ float:right; }
.invisible{ display:none; }
 
...

Класс left и right уже был задействован для флоатов

Цитата Serafim @ 07.09.10, 18:17

Класс left и right уже был задействован для флоатов

для чего?

Цитата Serafim @ 07.09.10, 18:17

.px9{ font-size:9px; }
.px10{ font-size:10px; }
.px11{ font-size:11px; }

госсподи, да пиши ты проще style="....", чем такое городить

zera, я тебя уверяю, это очень удобно, говорю по своему опыту Сам попробуй

Добавлено 07.09.10, 18:43

Цитата zera @ 07.09.10, 18:39

госсподи, да пиши ты проще style="....", чем такое городить

"font-size:15px; font-weight:bold;" - намного уродливее, чем "px15 bold"

Цитата Serafim @ 07.09.10, 18:42

я тебя уверяю, это очень удобно, говорю по своему опыту

<div class="float-left height-100p font-size-10-px background-color-c9f2ba">даже отсюда я вижу удобство</div>

ps кому и "корзина в браузере" удобно

zera, сравни мои названия классов и твои У меня только те, которые постоянно используются на сайте в совершенно разных комбинациях

Цитата zera @ 07.09.10, 18:47

сравни мои названия классов и твои

ага, я и сравнил:

Цитата Serafim @ 07.09.10, 18:17

Нашёл ошибку в своём же коде
...
Класс left и right уже был задействован для флоатов

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

Цитата zera @ 07.09.10, 18:58

про подводные камни даже не буду пытаться объяснять

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

Холивар?

Цитата orb @ 07.09.10, 18:03

<td class="right" width="100">& nbsp;</td>поможет

Даже можно <td><!-- --></td>

Serafim, на мой взгляд лучше использовать все-таки более осмысленные названия, типа left_cell (right_cell) или хотя-бы добавляй в селектор имя тэга...
А то такие конфликты выискивать в нескольких трехкилометровых css не есть хорошо...

Ну я уже понял это, спасибо

zera, по поводу классов Serafim дело говорит=) так же использую:

.fl { float: left }
.fr { float: right }
.r { text-align: right }
.l { text-align: left }
.w-100 { width: 100% }

и т.д. . Это очень хорошая практика, во многих css-фреймворках такое используется

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

@charset "windows-1251";
*{
    margin:0px;
    padding:0px;
}
html{ height:100%; }
body{
    font-family:Tahoma, Geneva, sans-serif;
    font-size:11px;
    height:100%;
}
a{ outline:none; }
table{ border-collapse:collapse; }
td{ vertical-align:top; text-align:left; }
img{ border:0px; }
ul li{ list-style:none; }
input[type=text],
input[type=password]{ outline:none; }
h1{ font-size:18px; font-weight:normal; }
h2{ font-size:16px; font-weight:normal; }
h3{ font-size:14px; font-weight:normal; }
.bold{ font-weight:bold; }
.italic{ font-style:italic; }
.normal{ font-weight:normal; font-style:normal; }
.ul{ text-decoration:underline; }
.noul{ text-decoration:none; }
.white{ color:#fff }
.gray{ color:#999; }
.light{ color:#ebe7cc; }
.brown{ color:#5f4935; }
.blue{ color:#3f6a70; }
.green{ color:#690; }
.red{ color:#900; }
.px9{ font-size:9px; }
.px10{ font-size:10px; }
.px11{ font-size:11px; }
.px12{ font-size:12px; }
.px14{ font-size:14px; }
.px16{ font-size:16px; }
.px18{ font-size:18px; }
.px20{ font-size:20px; }
.px22{ font-size:22px; }

Его даже изменять не надо, в каждом проекте используется как минимум 50% этого функционала И плюс обеспечивает настройки для всех браузеров, например убирает подсвечивание инпутов в ВебКит и ссылок в мозилле - на это мало кто обращает внимания

Добавлено 10.09.10, 20:39
З.Ы. А если писать для каждого проекта заново - обязательно что-то забудешь

Добавлено 10.09.10, 20:42
А ещё в нычке есть набор специальных селекторов для обеспечения максимальной совместимости, например:

{
  -webkit-border-radius:5px;
  -khtml-border-radius:5px;
  -moz-border-radius:5px;
  border-radius:5px;
}

или такое:

{
  white-space: -moz-pre-wrap;
  white-space: -pre-wrap;
  white-space: -o-pre-wrap;
  word-wrap: break-word;
  white-space: pre-wrap;
}

Цитата Serafim @ 10.09.10, 20:38

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

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