CSS колонки перекрываются везде, но IE и Firefox 3 - PullRequest
Новая
       11

CSS колонки перекрываются везде, но IE и Firefox 3

2 голосов
/ 12 января 2009

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

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-писатель.

Ответы [ 4 ]

2 голосов
/ 12 января 2009

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

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

.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>
2 голосов
/ 12 января 2009

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

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

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

1 голос
/ 12 января 2009

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

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

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

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

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

div.clear {
    clear: both;
    font-size: 1px;
    line-height: 1px;
    overflow: hidden;
}
0 голосов
/ 12 января 2009

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

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

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

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

Нет похожих вопросов

...