Фоновое изображение DIV не отображается в Firefox и Chrome - PullRequest
Новая
       0

Фоновое изображение DIV не отображается в Firefox и Chrome

0 голосов
/ 05 апреля 2011

У меня странная проблема, когда мой фон DIV не отображается в Firefox и Chrome, но в IE выглядит великолепно.После поиска в Stackoverflow я нашел несколько похожих вопросов, но, к сожалению, ни одно из решений не помогло мне.

Я прочитал на форуме, что это может быть связано с кэшированием браузера или что я использую Windows XP.Я считаю, что кеширование в браузере не является проблемой в моем случае, учитывая, что я тестирую свою страницу в автономном режиме, и единственное онлайн-тестирование, которое я провел, было сразу после загрузки файлов.У меня не было возможности проверить это на другой платформе Windows (например, Vista), но даже если эта проблема не возникает в Vista, естественно, я хотел бы, чтобы мое фоновое изображение появилось на всех платформах.

Пожалуйста, найдите ниже мой CSS и исходный код:

CSS 

body {
margin: 0px;
background:url(../images/bground.jpg) fixed bottom;
}

.area {
width:738px;
margin:0 auto;
padding:0 131px;
}

#menu {
width:738px;
height:41px;
position:absolute;
top:273px;
text-align: left;
}

#navlist li {
display: inline;
list-style-type: none;
padding: 0 20px 0 0;
}

#sec-menu {
height:41px;
position:absolute;
right:131px;
top:50px;
text-align: right;
border-bottom:1px solid #bbb
}

#sec-navlist li {
display: inline;
list-style-type: none;
padding: 0 0 0 10px;
}

#register {
position:absolute;
right:131px;
top: 110px;
}

#content {
width:1000px;
position:absolute;
top:273px;
text-align: center;
}

Исходный код 

<body onload="MM_preloadImages('images/register-over.png')">

<div class="area" style="height:343px; background:transparent url('images/header.png') top no-repeat center; position:relative">

<div id="sec-menu">
<ul id="sec-navlist">
    <li><a href="#" class="sec-menu">International Faculty</a></li>
    <li><a href="#" class="sec-menu">Contact</a></li>
    <li><a href="#" class="sec-menu">Sitemap</a></li>
</ul>
    </div>

<a href="#"><img src="images/register.png" alt="Register for KLVS 2011 Now!" width="91" height="89" id="register" onmouseover="MM_swapImage('register','','images/register-over.png',1)" onmouseout="MM_swapImgRestore()" /></a>

<div id="menu">
    <ul id="navlist">
    <li class="menu-active">Home</li>
    <li><a href="#" class="menu">About KLVS 2011</a></li>
    <li><a href="#" class="menu">Programmes</a></li>
    <li><a href="#" class="menu">Accommodation</a></li>
    <li><a href="#" class="menu">Exhibitors &amp; Sponsors</a></li>
    <li><a href="#" class="menu">Call for Abstract</a></li>
</ul>
</div>


<div class="area" style="background:url(images/transparent-white_12.png) repeat-y"><br />
</div>

Проблема

Мое 'header.png' изображение не отображается в первом DIV, который использует область класса Не уверен, что это жизненно важная информация, но я также применяю класс area к другому DIV, вызывающему другое фоновое изображение, и это фоновое изображение отлично отображается во всех IE, Firefox и Chrome.Я попытался удалить position:relative и / или transparent из первого DIV, но проблема все еще возникает.

Я также проверил мой файл на http://validator.w3.org/, и я прошел, так что теперьЯ действительно озадачен тем, что могло вызвать это.Я действительно надеюсь, что любая добрая душа в Stackoverflow сможет помочь мне с этим.

Спасибо.

1 Ответ

2 голосов
/ 05 апреля 2011

Ваш CSS имеет ошибку.Поскольку вы использовали сокращение, стили top и center перепутаны.Положите их вместе, и все будет хорошо: 

<div class="area" style="height:343px; background:transparent url('images/header.png') top center no-repeat ; position:relative">

top center no-repeat

...