Проблема CSS / таблиц на Mac - PullRequest
Новая
       27

Проблема CSS / таблиц на Mac

1 голос
/ 11 ноября 2008

У меня возникли некоторые проблемы с CSS и / или таблицами на недавно обновленном веб-сайте . Из-за хорошо известного вопроса «100% высоты по высоте» я прибег к использованию таблиц в качестве структурного элемента веб-сайта. Так это выглядит примерно так:

HTML MARKUP: 

<div id="header">...</div>
  <table>
  <tr>
    <td><div id="main">...</div></td>
    <td class="crighttd"><div id="cright">...</div></td>
   </tr>
</table>
<div id="footer">...</div>

И СООТВЕТСТВУЮЩИЙ CSS 

table {
  border-top: 1px solid #6A6A6A;
  padding: 0;
  margin-top: 20px;
  border-spacing: 0
}

td {
  vertical-align: top;
  padding:0;
  margin:0
}

.crighttd {
  background: #4F4F4F;
  vertical-align:top;
  margin: 0
}

#cright {
  width: 185px;
  float: right;
  background: #4F4F4F;
  height: 100%;
  line-height: 1.2em;
  margin: 0;
  padding: 25px 0 25px 20px;
}

Проблема здесь в том, что, очевидно, справа в некоторых браузерах не будет отображаться символ td (это было видно на Mac, а также на старых экземплярах IE). Это проблема CSS или что-то с таблицами?

Ответы [ 3 ]

7 голосов
/ 11 ноября 2008

Из-за хорошо известного вопроса «100% высоты в высоту»…

а кто бы это был? Один решил здесь ? В основном, важная часть 

html, body {
    height: 100%;
}

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

1 голос
/ 11 ноября 2008

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

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

Насколько я могу судить, вы стремитесь к довольно простой центрированной двухколоночной компоновке с фиксированной шириной. Быстрый поиск в Google по «2 колонкам css layout» предоставит вам множество примеров и руководств по подходам, которые вы можете использовать для достижения этой цели.

0 голосов
/ 11 ноября 2008

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

border: 1px solid red;

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

position: relative;

Вы также можете попробовать удалить свойство float из вашего стиля #cright.

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

...