CSS не работает в IE? - PullRequest
Новая
       70

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

2 голосов
/ 27 февраля 2009

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

Заранее благодарю за помощь!

http://www.alliedprintingsolutions.com

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

Ответы [ 11 ]

0 голосов
/ 27 февраля 2009

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

Используйте CSS, чтобы применить атрибут "background-image" для основного контента вашего сайта. Например: 

<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 для отображения фона вместо (или в сочетании с) фона атрибут изображения. Я могу почти гарантировать, что это ваша проблема. Удалите все ваши теги img и замените их на divs и стиль фонового изображения, и ваша проблема будет решена.

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

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

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

<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>

:)

Страница:
...