Столбцы CSS перекрываются везде, НО IE и Firefox 3

У меня проблема с моим сайтом и тем, как он отображается в некоторых браузерах:

http://www.karentiede.com

В Firefox 2.0 и многих других браузерах столбец «содержимое» выходит за левый край и появляется поверх декоративной рамки, что делает часть содержимого нечитаемой.

Один из представленных здесь вопросов и ответов предполагает, что создание всех страниц HTML 4.01 Strict DOCTYPE может помочь заставить все браузеры работать одинаково, но этот вопрос был решен в обратном порядке в Firefox и не работал в IE. Есть ли другое исправление, которое я должен попробовать?

Из CSS:

.column2 {
    float: right;
width: 80%;
}

С любой из страниц, которые срабатывают:

<body id="schedule_toc">
<div id="col1_schedule_toc">
<div class="column2">

Когда я проверяю сайт в http://www.browsershots.org, он выглядит плохо при первоначальном отображении в много браузеров. У меня был один или три читателя (вероятно, Firefox), которые говорили мне, что не могут видеть текст, и я подозреваю, что они, вероятно, были более опытными пользователями, чем я, пишущий CSS.


css cross-browser
person Community    schedule 12.01.2009    source источник

Ответы (4)


arrow_upward
2
arrow_downward

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

Проблема в том, что ваш правый div составляет 80%, поэтому, когда экран становится меньше, а соотношения меняются, эти 80% затем перекрываются с вашим левым фоном.

Взгляните на http://www.dynamicdrive.com/style/layouts/item/css-liquid-layout-21-fixed-fluid/, чтобы узнать, как настроить макет "static-fluid".

person savageguy    schedule 12.01.2009

arrow_upward
2
arrow_downward

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

Попробуйте переместить оба элемента влево и примените левое поле, равное ширине «декоративного» столбца, к столбцу 2 как таковому:

.column1 { float: left; width: 125px; }
.column2 { float: left; margin-left: 125px; }
.clear { clear: both; }

Вам понадобится очищающий div под обоими элементами:

<div class="column1">...</div>
<div class="column2">...</div>
<div class="clear"></div>
person Bryan A    schedule 12.01.2009
comment
Небольшая опечатка, но отличный совет (который пересекается с моим, поэтому я на него не ссылался). Завышено. - person John Dunagan; 12.01.2009
comment
Предлагаемое вами исправление определенно сработает, но я не думаю, что проблема в изображении - это было бы, если бы основной столбец не был размещен правильно, но это так. - person da5id; 12.01.2009

arrow_upward
1
arrow_downward

Как указал savageguy, проблема определенно заключается в соотношениях. Если вам нужен левый столбец фиксированной ширины и правый (основной) столбец переменной ширины, вы можете использовать это (не проверено, но должно работать):

#col1_schedule_toc {
    width: 175px;
    float: left;
}

.column2 {
    float: right;
    width: 100%;
}

РЕДАКТИРОВАТЬ: Между прочим, я заметил, что (по крайней мере, на странице, на которую я смотрел), вы также не закрываете левый столбец, прежде чем откроете правый, поэтому технически правый столбец находится внутри левого, что вызовет проблемы с моим предлагаемым исправлением . Поэтому вам также необходимо переместить закрывающий div для столбца 1 так, чтобы он находился над открывающим div для столбца 2.

РЕДАКТИРОВАТЬ 2: Кроме того, как указано в Плане Б, вам также понадобится очищающий div под обоими элементами, чтобы предотвратить сворачивание родительского (контейнера) div:

div.clear {
    clear: both;
    font-size: 1px;
    line-height: 1px;
    overflow: hidden;
}
person da5id    schedule 12.01.2009

arrow_upward
0
arrow_downward

В дополнение к подсказкам Savageguy по поводу правильных действий, изображение на странице (ваше изображение и т. Д.) Слева имеет фиксированную ширину. Вот почему при изменении размера браузера эти 80% внезапно становятся слишком широкими.

В столбце 2 установка левого поля ширины изображения + желаемое расстояние разделения (например, 160 должно работать, но вы можете поиграть с ним), а затем сделайте ширину столбца 2 100% (оставшейся ширины ) должен предотвратить ваше перекрытие.

[Edit: Plan B также предлагает очень надежное решение.)

person John Dunagan    schedule 12.01.2009