Blogger CSS issue: Styles don't get loaded - randomly

Question

I have this blog which I give support from time to time for a client. It uses those dynamic views from blogger. My task was to change the blog's header and insert my client's logo.

I know how to do it and it is working just fine, EXCEPT that sometimes the images from the headers just don't get loaded and some elements are showed without style. The CSS for that block is not loaded for some reason. There is a similar question here: Images are SOMETIMES there . I've got the exact same behavior: The first time I open the site the header styles are there. If I reload the page, it goes away and reappears randomly as I continue to reload the page.

This happens in any browser - IE, Chrome, Firefox.... you name it. And it seems that this issue is around there since 2009, It would be nice if Google could get rid of it someday. Until there, does anyone have a clue about how to work around this problem??

Somethings to note:

• There is no console errors.
• The blog views work, despite of this issue.

Thanks in advance.

Edit:

How the image was inserted:

• A blog post was created and the logo was uploaded in it.
• I copied the link from this post.
• Custom CSS was inserted using the "Add CSS" option, in MODELS->ADVANCED->ADD CSS. (this is a literal translation, I'm getting it from a language other than English)

• The <h1> was edited in order to hide the text and show the logo as a background image. Like so:

  background: transparent url('http://1.bp.blogspot.com/-IWokMKhUVbg/UaCJ_ZULa2I/AAAAAAAAAs4/908V5umDsLM/s1600/myfakelogo.png') no-repeat scroll 13px 5px;
  
  float: left;
  margin-left: 73px;
  margin-top: 10px;
  text-align: left;
  text-indent: -99999px;
  width: 420px;  
  

• The <h3> tag was hidden using display: none;

Note that this is not a CSS problem because it actually works. The issue here is that it SOMETIMES FAILS. So a workaround would be, perhaps, changing the way I upload the Image. Or maybe not because the styles are not being loaded either, not only the images...

Answer 1

Go to Dashboard, select Template from the pulldown menu, and Edit HTML. Then scroll down until you see the following lines at the bottom of the template:

 <script language='javascript' type='text/javascript'>
      setTimeout(function() {
        blogger.ui().configure().view();
      }, 0);
    </script>
  </body>
</html>

Change the timeout value from 0 to 1000:

<script language='javascript' type='text/javascript'>
      setTimeout(function() {
        blogger.ui().configure().view();
      }, 1000);
    </script>
  </body>
</html>

Credit for this trick