Форма не в правильном положении в IE7

Question

http://www.campbellcustomcoatings.com/index2.php

На этом сайте я использую тень блока css3 и rgba для фона контента. Чтобы было хорошо с IE7, я использую 3 изображения. Элемент Form очищается под основной областью содержимого, и он должен быть справа от него.

Кто-нибудь знает, почему?

Answer 1

Если вы хотите понять, почему это происходит, попробуйте накрасить поле div ярким цветом с помощью id = "container".

Вы увидите, что его ширина указана в CSS, но вIE 8 и Firefox его высота равна нулю.Это связано с тем, что он содержит только пустые div и плавающий div, который отображается вне нормального потока страницы.

Однако в IE 7 «контейнер» имеет высоту, которая включает в себя высоту плавающего div сID = "содержание".Это заставляет его выдвигать div с id = "form" внизу.

Если вы хотите, чтобы "form" отображалась в пространстве, которое (в IE 7) занято "контейнером", вы можетепопробуйте сделать "form" дочерним по отношению к "container".

Answer 2

Теперь я не трогал ваш main2.css .Это все еще использует float:right для макета формы для FF / Chrome / Safari.Мое решение использует position:absolute для размещения формы в ie.css .

Я думаю, что это самый простой / быстрый способ исправить вашу веб-страницу для IE7 + .

Лично я бы вернулся и реорганизовал main2.css для большей согласованности кода, вы, вероятно, в итоге получили бы меньше кода в ie.css таким образом (чтоэто то, к чему я обычно стремлюсь).

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

Если вам нужны какие-либо другие советы или предложения, или если приведенные ниже шаги не работают на 100%, позвольте мнезнать.Ваш сайт выглядит потрясающе.

Начиная с вашей последней версии index2.php, main2.css и ie.css :

In index2.php

ход <div id="form"> внутри:

div#container

В ie.css

избавиться от:

#form { float:right; }

избавиться от:

#container #bottom { clear: left; }

добавить:

#container #content { float:none; }

изменить:

#container #bottom { margin: 0; }

на:

#container #bottom { margin: 0 0 0 35px; }

добавить:

#container { position:relative; } /* this sets the parent element for the next line */

наконец, добавьте:

#form { position:absolute; right:0; top:-15px; }

Как вы знаете, вам все еще нужно добавить графику обратно в div#form, а также поместить верхнюю и нижнюю округлую графику наdiv#form.Если у вас есть какие-либо проблемы и вам нужна помощь, дайте мне знать.Надеюсь, что методы помогут вам закончить его.

Answer 3

Ваш HTML не проверяет .Попробуйте сначала это исправить, это может не решить проблему, но, по крайней мере, у вас будет хорошая основа для работы.

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

Answer 4

Форма div # находится вне вашего контейнера div #.

Попробуйте:

• Поместите форму div # в контейнер после содержимого div # content
• Установите div#form float: right;вместо левого
• Настройте содержимое div # и ширину div # формы / отступы / поля, чтобы они оба могли поместиться в ширину контейнера div #.

Answer 5

На моем IE7 все показывает ОК, если вы решили проблему, вы можете опубликовать решение.