фоновое изображение не повторяется в IE - PullRequest
Новая
       15

фоновое изображение не повторяется в IE

0 голосов
/ 02 июля 2010

Это должно быть очень просто ... не уверен, что я не вижу здесь ... фоновое изображение очень хорошо повторяется в браузерах не IE, но не в IE8.

сайт: http://www.erisdesigns.net/Stage/McCampbellInsurance/index.html

#wrapper {
    max-width:100%;
    min-width:1000px;
    min-height:100%;
    margin:0 auto;
    background-image:url(images/shadowborder.png);
    background-repeat:repeat-y;
    background-position:center;
    margin-bottom:-70px;
    position:relative;
    overflow:auto;
}

#headwrapper {
    position:relative;
    -moz-background-clip:border;
    -moz-background-origin:padding;
    -moz-background-size:auto auto;
    background-image:url(images/btr_rpt.jpg); /* NO REPEAT!!! */
    background-repeat:repeat-x;
    height:150px;
}

#header {
    position:relative;
    -moz-background-clip:border;
    -moz-background-origin:padding;
    -moz-background-size:auto auto;
    background-color:transparent;
    background:url(images/KMIAFS_banner.jpg) center top no-repeat;
    height:150px;
}

#menu {
    clear:left;
    float:left;
    padding:0;
    border-top:5px solid #003a72;
    width:100%;
    overflow:hidden;
    height:70px;
}

#spacer {
    height:70px;
    clear:both;
}

#footer {
    position:relative;
    height:70px;
    width:100%;
    border-top:5px solid #003a72;
    background-color:#bec8e3;
    text-align:center;
    color:#666;
    margin:0 auto;
    margin-top:-70px;
    clear:both;
}

HTML: 

</head>
<div id="wrapper">
<div id="headwrapper">
<div id="header"></div>
     <div id="menu">
       <ul>
          <li class="active"><a href="#" title="">/a></li>
          <li><a href="#" title=""></a></li>
          <li><a href="#" title=""></a></li>
          <li><a href="#" title=""></a></li>
          <li><a href="#" title=""></a></li>
          <li><a href="#" title=""></a></li>
          <li><a href="#" title=""></a></li>
       </ul>        
         </div>
</div>
</div>

Ответы [ 2 ]

1 голос
/ 02 июля 2010

Добавить width 100%; к #wrapper

#wrapper { width: 100%; }

Это работает?

0 голосов
/ 02 июля 2010

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

По-видимому, это вызвано правилом display: table на #wrapper во встроенной таблице стилей, который вызывает поведение сжатия к размеру, сжимаясь до min-width 1000px. Это правило не имеет смысла, так как содержимое оболочки не является элементами строки таблицы. Вам лучше использовать изображение заголовка вне обертки с фиксированной шириной и простой width: 100% для заполнения страницы.

Эта таблица стилей находится в условно-скрытом комментарии внизу, который повлияет на все версии IE, кроме 7, что кажется плохой идеей ... это действительно то, что вы имели в виду, и чего вы пытались достичь с помощью display: table взломать? Все правила -moz- также кажутся совершенно излишними. Это простая раскладка, которая не требует хаков.

Не имеет значения, кроме того: вы также включили декларацию XML вверху файла. Лучше пропустить это для HTML-совместимого XHTML, так как это приводит к тому, что IE6 возвращается к режиму Quirks (даже хуже, чем нормальное отображение для IE6), и в любом случае, поскольку в UTF-8 указывается только XML 1.0, по умолчанию все равно, это бессмысленно. Для HTML-совместимого XHTML вы должны установить вместо параметра charset значение UTF-8 в теге <meta http-equiv="Content-Type">.

...