Проблема с CSS / таблицами на Mac
У меня возникли некоторые проблемы с CSS и / или таблицами на моем недавно переработанном Веб-сайт. Из-за хорошо известной проблемы «100% высота div» я прибегал к использованию таблиц в качестве структурного элемента веб-сайта. Это выглядит примерно так:
РАЗМЕТКА HTML:
<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
Для устранения неполадок я обычно даю своим div и другим элементам рамку, чтобы я мог визуально видеть, где они расположены на странице.
border: 1px solid red;
У меня есть подозрение, что не отображается не ваш td, а div, который у вас внутри. Вы можете попробовать установить для него свойство display в css.
position: relative;
Вы также можете попробовать удалить свойство float из своего стиля #cright.
Это не обязательно решит вашу проблему, а скорее всего лишь рекомендации по устранению неполадок. На самом деле сложно устранить проблему, не видя полного макета вашей страницы.
Because of the well known "100% div height"-issue …
и что бы это было? Тот решил здесь? По сути, важная часть
html, body {
height: 100%;
}
Таблицы в качестве обходного пути здесь не годятся, потому что, насколько я знаю, у них есть аналогичные проблемы, связанные с высотой.
Я уверен, что то, что вы пытаетесь достичь, вполне возможно с помощью только позиционирования и макета CSS без необходимости прибегать к таблице для макета.
Похоже, что таблицы все равно не работают, поэтому выберите чистый макет CSS, и вы не только найдете решение, но и получите более удобный, соответствующий стандартам сайт, которым можно будет гордиться. сохранить и изменить в будущем.
Насколько я могу судить, вы стремитесь к довольно простой двухколоночной компоновке с фиксированной шириной по центру. Быстрый поиск в Google по запросу «2-колоночный макет css» предоставит вам множество примеров и руководств по подходам, которые вы можете использовать для достижения этой цели.
Попробуйте изменить теги на «совместимость» ;-)