Проблема Blogger с пользовательскими фоновыми изображениями в Chrome и Safari - PullRequest
Новая
       13

Проблема Blogger с пользовательскими фоновыми изображениями в Chrome и Safari

1 голос
/ 06 марта 2010

Это странно, рассматриваемый сайт - blog.andrebatista.info и размещен на blogger.com. Я пытаюсь, чтобы шаблон блога выглядел так же, как и на моем главном веб-сайте, www.andrebatista.info .

По какой-то причине, если я перехожу непосредственно к адресу блога, Chrome и Safari не отображают все мои фоновые изображения ... все они.

Однако, если я сначала зайду на www.andrebatista.info , а затем зайду в блог, который он отображает просто отлично? ¿

Я настраиваю его, добавляя ссылку на таблицу стилей моего основного сайта в самом конце тега head в шаблоне blogger. Эта таблица стилей отображается ниже:

* { Маржа: 0; обивка: 0; граница: 0; } 

html,body {
 background:#064169 url(http://www.andrebatista.info/images/main_gradient_slice.jpg) repeat-x;
 font-family: Arial, "MS Trebuchet", sans-serif;
 font-size:18px;
}

#main_wrapper{
 margin: 0 auto;
 width:1024px;
}
 #header{
  background: url(http://www.andrebatista.info/images/header.jpg);
  height:133px;
  border:none;
  margin:0;
 }

 #menu_wrapper{
  background: url(http://www.andrebatista.info/images/menu.jpg);
  height:34px;
  overflow:hidden;

 }
  #menu_wrapper .menu_item{
   color:white;
   float: left;
   border: 1 px solid red;
   height: 34px;
   padding-top:10px; 
   text-align:center;
   width:100px;

  }

  #menu_wrapper .first{
   padding-left:240px;
   float:left;
   width:100px;

  }
  #menu_wrapper .active,#menu_wrapper .menu_item:hover{
   background-color:white;
   color:Teal;
   cursor: pointer;
  }

 #content_area_wrapper{
  background: url(http://www.andrebatista.info/images/body_bg_slice.jpg) repeat-y;
 }
  #content_area{
   min-height:524px;
   background: url(http://www.andrebatista.info/images/main_content_top.jpg) repeat-x;
  }
   #main_banner{
    background: url(http://www.andrebatista.info/images/main_banner.jpg) no-repeat center center;
    width:662px;
    height:338px;
    margin: 0 auto;

   }
   #main_banner div{
    color:white;
    padding-left:47px;
    padding-right:164px;
    padding-top:105px;
   }
   #text_area{
    overflow:hidden;
    width:662px;
    margin:0 auto;
    padding:14px;
   }
    #contentList{
     padding:0 20px 20px 20px;
    }
    #text_area .left{
     width:50%;
     float:left;
    }
    #text_area .left{
     width:50%;
     float:right;    
    }

 #footer2{
  background: url(http://www.andrebatista.info/images/footer.jpg);
  height:62px;
 }

 #footer{
  background: url(http://www.andrebatista.info/images/footer.jpg);
  height:62px;
 }

Есть идеи о том, чего мне не хватает?

Ответы [ 3 ]

2 голосов
/ 06 марта 2010

Это не проблема с CSS или сервером, на котором размещен ваш блог, а проблема с сервером, на котором размещен ваш сайт. Когда я проверяю трафик с помощью Fiddler , я получаю взамен эти ответы вместо изображений: 

HTTP/1.1 302 Found
Date: Fri, 05 Mar 2010 23:43:52 GMT
Server: Apache
Location: http://www.hosting.zymic.com/403
Content-Length: 216
Content-Type: text/html; charset=iso-8859-1
Via: 1.1 www.andrebatista.info
Connection: close

<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN">
<html><head>
<title>302 Found</title>
</head><body>
<h1>Found</h1>
<p>The document has moved <a href="http://www.hosting.zymic.com/403">here</a>.</p>
</body></html>

Полагаю, это результат какой-то меры по предотвращению хотлинкинга, основанной на заголовке Referer.

1 голос
/ 06 марта 2010

Что ж, когда я захожу туда в Firefox, я получаю сообщение об ошибке «ни один пост не соответствует моему запросу», из-за чего я задаюсь вопросом, правильно ли настроен ваш сервер.

РЕДАКТИРОВАТЬ: также верно в Chrome

0 голосов
/ 06 марта 2010

Попробуйте поставить URL в кавычках.(Если это не проблема с сервером, как в другом ответе, webkit может подавиться ': //'.) 

background:#064169 url("http://www.andrebatista.info/images/main_gradient_slice.jpg") repeat-x;

Дополнительная информация: CSS background-image - Что является правильнымиспользование

...