CSS не работает в IE?

Работаю над этим сайтом уже некоторое время, отлично работает на Mac и ПК Firefox, а также Safari. Однако IE делает сайт почти пустым - есть идеи о том, что происходит? Какие-нибудь обходные пути?

Заранее спасибо за вашу помощь!

http://www.alliedprintingsolutions.com

http://www.alliedprintingsolutions.com/style.css (таблица стилей)

Ответов (11)

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

Вы можете попробовать добавить doctype.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

Изменить: объявление doctype должно быть первым в html-файле. Он идет даже до тега <html>.

Слишком много глупостей происходит с абсолютным позиционированием content_left и content_right. Все будет в порядке, удалив «position: absolute» и заменив его на «float: left» в обоих содержимом (установите ширину оболочки на 100%).

Я тоже столкнулся с той же проблемой и нашел решение после некоторого исследования.

  1. Не используйте код CSS в файле HTML
  2. Создайте отдельный CS-файл и сделайте ссылку на него, используя <link rel="stylesheet" href="css/style.css">
  3. И всегда добавляйте <!DOCTYPE>тег на каждую HTML-страницу // * Это основное решение

Иногда даже после добавления

<!DOCTYPE html>

Css не загружается.

Это из-за пробелов перед

  <!DOCTYPE html>

Убедитесь, что его нет.

В противном случае в IE страница будет ужасно отображаться

Не просто пустое пространство раньше:

    <!DOCTYPE html>

но также удалите пробелы перед фигурными скобками в таблице стилей (файл CSS). Пример простой таблицы стилей (представьте ее слева в текстовом редакторе):

    h1{
     font-family:Arial;
     color:purple;
    }

Всем спасибо за все ваши предложения. Большая часть контента теперь отображается (относительно, как и должно быть) в IE, за исключением нижнего колонтитула, который грубо разрезает мою страницу (ха-ха). Я понимаю, что вы говорите, Нельсон ЛаКуэ, об изображениях заголовков, мне придется попробовать поиграть с ними, я все еще новичок в CSS, и выяснение того, правильно ли они все размещены с картой изображений, было достаточно головной болью. . Что касается Doctype, я добавил его, как вы мне сказали, и он, похоже, испортил некоторый контент даже в Firefox, поэтому я знаю, что мне нужно пройти еще несколько ошибок. Когда я его снял, все снова стало нормально. "Woowoo's" с абсолютным позиционированием были в значительной степени необходимы, поскольку используемый метод позиционирования был ЕДИНСТВЕННЫМ способом, который я мог найти для работы с фоновыми изображениями и изображениями заголовков в такт, с разделами столбцов в нужном месте. По крайней мере, я добился некоторого положительного прогресса, но, думаю, впереди у меня еще много работы: / Хотелось бы, чтобы это было немного легче исправить, так как в Firefox все выглядит отлично. Ну что ж, еще раз спасибо за вашу помощь, ребята!

Шеннон

У меня сейчас нет FireBug (если у вас нет этого расширения - получите его!) Но использование изображений в том виде, в котором вы сейчас находитесь, является проблемой.

Используйте CSS, чтобы применить атрибут «фоновое изображение» к основному содержанию вашего сайта. Например:

<style>
.Page
{
    background-image : url(../images/site_bg.png) no-repeat;
    width : 600px; /* Image width here */
    heigth : 500px; /* Image height here */
    padding-top : 15px; /* top text offset here */
    padding-left : 15px; /* left text offset here */
    padding-right : 15px; /* right text offset here */
    padding-bottom : 15px; /* bottom text offset here */
}
</style>

...

<div class = "Page">
 <!-- Content -->
</div>

Это будет работать намного лучше, и будет отлично работать во всех браузерах :)

В ответ на комментарий

Я не хочу сказать, что вы неправы, но когда я могу щелкнуть и перетащить фоновые изображения курсором мыши, это означает, что вы используете тег IMG для отображения фона вместо атрибута background-image (или вместе с ним) . Я почти могу сказать, что это ваша проблема. Удалите все свои теги img и замените их на div и стиль фонового изображения, и ваша проблема будет решена.

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

Второе редактирование с примером кода

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

<style>
    .Container { margin : auto; width : 600px; /* BG and Header Width here */ }

    .Header
    {
        background-image : url(../images/site_header.png) no-repeat;
        width : 600px; /* Image width here */
        heigth : 500px; /* Image height here */
        padding-top : 15px; /* top text offset here */
        padding-left : 15px; /* left text offset here */
        padding-right : 15px; /* right text offset here */
        padding-bottom : 15px; /* bottom text offset here */
    }

    .Header .Link1:link, .Header .Link1:visited, .Header .Link2:link, .Header .Link2:visited
    {
        width : 60px;
        heigth : 60px;
        display : block;
        float : left;
        margin : 10 20px;
    }

    .Header .Link1:link, .Header .Link1:visited
    {
        background-image : url(../images/link1.jpg);
    }

    .Header .Link2:link, .Header .Link2:visited
    {
        background-image : url(../images/link2.jpg);
    }

    .Page
    {
        background-image : url(../images/site_bg.png) no-repeat;
        width : 600px; /* Image width here */
        heigth : 500px; /* Image height here */
        padding-top : 15px; /* top text offset here */
        padding-left : 15px; /* left text offset here */
        padding-right : 15px; /* right text offset here */
        padding-bottom : 15px; /* bottom text offset here */
    }
</style>

...

<div class = "Container">
  <div class = "Header">
    <a href = "link1" id = "Link1"></a>
    <a href = "link2" id = "Link2"></a>
  </div>
  <div class = "Page">
    Content
  </div>
</div>

:)

Добавьте DOCTYPE!

Для лучшей кроссбраузерности рекомендуется использовать HTML5 или HTML4 Strict ( не Transitional).

<!DOCTYPE html>


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">


(Как видите, HTML5 намного проще и его можно использовать, даже если вы еще не используете теги HTML5.)


Примечание: DOCTYPE должен быть самым первым в файле, перед всеми другими тегами, и без пустых строк, табуляции или пробелов перед ним.

Быстро просмотрел код в firebug. Кажется, у вас есть z-index -1 для содержимого div (#wrapperbig), который браузеры должны игнорировать для неабсолютного / относительного содержимого - это может быть странной реализацией в IE.

Также, как упоминалось ранее, добавьте doctype - IE будет отображать сайт в «режиме quirks», если нет doctype.

Быстрое решение: удалите "overflow: auto;" из #wrapperbig и #wrapper.

Это приведет к отображению содержимого.

Однако обязательно посмотрите другие ответы. У них есть хорошие моменты.