макет сайта портится только в IE - PullRequest
Новая
       2

макет сайта портится только в IE

1 голос
/ 07 марта 2011

У меня есть сайт, созданный в Dreamweaver с использованием HTML и CSS.

Компоновка - это именно то, что мне нужно во всех браузерах (Chrome, Firefox, Safari), за исключением Internet Explorer 7, где компоновка нижнего ряда изображений или изображений полностью испорчена - слишком высокая или слишком большая право. Я понятия не имею, почему это происходит, я новичок и перепробовал все, что мог придумать, если кто-то может помочь, это будет высоко ценится.

Сайт находится здесь: http://www.mediadarling.co.uk/clients/lenistudios/

Заранее спасибо!

Ответы [ 3 ]

1 голос
/ 07 марта 2011

В вашем CSS есть пара битов, которые я не совсем понимаю: 

#movers-row {
    ...
    margin: -120px 0 0 120px;

Почему отрицательное верхнее поле?Это похоже на то, что тянет изображения слишком далеко в IE 7. Я действительно не понимаю, почему это не в других браузерах;я думаю, что-то связанное с поплавками. 

#footer {
    ...
    margin-top: -130px;

Это связано с другим отрицательным верхним полем?

В любом случае, я думаю, вы можете исправить свою проблему в IE 7 следующим образом:

  • Удаление этих двух отрицательных верхних полей
  • Добавление margin-top: 10px; к #imagerow только в IE 7 (и, возможно, IE 6) (верхний отступ не работает с плавающей точкой длякакая-то таинственная причина IE)

См. здесь пример кода: http://www.pauldwaite.co.uk/test-pages/5220698/

У вас также есть несколько ошибок проверки в вашем HTML.Я не думаю, что они являются причиной вашей проблемы, но я сначала исправил их, потому что, когда вы пытаетесь отследить ошибку IE, вам действительно не нужны ошибки валидации. Вот проверка страницы.

0 голосов
/ 07 марта 2011

вы можете использовать условные операторы для IE, вот пример: 

<!--[if IE 7]><link href="css/layoutIE7.css" rel="stylesheet" type="text/css" /><![endif]-->

Это помещается в <head> и предполагает, что у вас есть дополнительный файл CSS с исправлениями IE.

PS вам нужно добавить свои специфичные для IE правила CSS в файл IE CSS, чтобы он работал в IE и большинстве браузеров ...

В моем примере я использовал "if IE 7",означает, что это IE 7, но вы можете использовать комбинации и другие версии.

РЕДАКТИРОВАТЬ: окружить дорогого гостя, текст, изображение и div #rotxt другим div и убедиться, что он действительно окружает егопростое правило:

.surround {height: auto; overflow: hidden;}

это кросс-браузер, нет необходимости в условном CSS.

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

Итак, мое предложение выглядит примерно так(извините за ненастоящие теги):

[новое окружение div] [основное изображение div] изображение [/ основное изображение div]

[окружающий div] заголовок текста заголовка [/ окружающий div] [/ новое окружение div]

[images div] images [/ images div]

[sepatator div] (необязательно) [/ sepatator div]

[social div] [/ социальный див]

0 голосов
/ 07 марта 2011

После: <div id="rotxt">Roll over images to see larger versions</div> Место: <p class="clear"><br /></p>

.clear содержит CSS: clear: both;

...