Проблемы с IE7 и плавающими элементами (конечно)

Question

Я работаю над сайтом, у которого есть элемент оболочки, с левой и правой боковой панелью, каждая из которых находится внутри оболочки. Левая боковая панель (которая содержит навигацию) очищает правую боковую панель и почему-то толкает ее вниз. Я попытался исправить это примерно 50 различными способами. Я изначально думал, что изменение размера и / или поля поможет. Это не так. Я попытался исправить «display: inline», но безрезультатно. Я пробовал кучу других настроек, но не могу заставить его работать. Вы можете просмотреть сайт по адресу www.ibgs2010.org, а css - по адресу www.ibgs2010.org/css/style.css (я пытаюсь использовать специальную таблицу стилей IE7, чтобы исправить это). Если кто-то может помочь, я бы очень признателен. Я сжег около 3 часов сегодня, пытаясь решить эту маленькую проблему.

Answer 1

Похоже, проблема в ajaxloader div - установите его ширину 697px (как на боковой панели справа), и это должно решить вашу проблему.

Answer 2

Предлагаю добавить следующее:

#ajaxloader {
    width: 737px;
    float: left;
}

Ширина 737px получена из ширины 697px плюс 40px левого отступа .sidebar.right

С этим дополнением версии IE7 и Firefox должны выглядеть одинаково, давать или брать пиксель.

Answer 3

Я включаю сброс CSS Yahoo в начале каждой страницы (или файла CSS). Это действительно помогает выровнять игровое поле. Также с IE, всегда не забывайте указывать ширину (даже если она равна 100%), и если вы используете плавающее значение, убедитесь, что отображается: inline.

Answer 4

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

Вместо float вы можете попробовать position с left и right соответственно:

.content.wrapper {
   position: relative; /* establish boundary for absolute positioning */
}

.sidebar.left {
   position: absolute;
   top: 0px;
   left: 0px;
}

.sidebar.right {
   position: absolute;
   top: 0px;
   right: 0px;
}

Answer 5

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

Надеюсь, это помогло вам.

Приветствия