CSS和图像不会在页面加载上加载，而是在页面刷新时加载

Question

All,

I have a PHP MVC application with the following structure:

helloworld
 - application
     - configs
     - controllers
     - models
     - layouts
 - include
 - library
 - public
    - .htaccess
    - index.php
    - design
      - css
         - style.css
         - struct.css
      - js
      - images
        - bg.gif

I have configured a virtual host in apache called hello that points to helloworld/public/ folder. So, when I view my site, using http://hello all the CSS and images render fine.

I deployed my site to a different server with similar config as above. When I access the website using http://test.com/hello the CSS and the background images contained in it, renders absolutely fine in Chrome and Safari, but background images fail on IE,Firefox and Opera. When the page refreshes on these browsers, it works just fine. I am unable to understand the behavior for this.

The URLs in my CSS are written like this:

background-image: url(/design/images/bg.gif);

and my htaccess is like this:

Options -MultiViews -Indexes

#####################################################
# CONFIGURE media caching
#
Header unset ETag
FileETag None

Header unset Last-Modified
Header set Expires "Fri, 21 Dec 2012 00:00:00 GMT"
Header set Cache-Control "max-age=7200, must-revalidate"
SetOutputFilter DEFLATE
#
#####################################################

RewriteEngine   On
RewriteCond %{REQUEST_FILENAME} -s [OR]
RewriteCond %{REQUEST_FILENAME} -l [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^.*$ - [NC,L]
RewriteRule ^.*$ index.php [NC,L]

Can somebody explain why Background images and CSS is not rendering properly on page load, but renders after a page refresh?

Answer 1

let do some testing to identify the problem

1- try to access http://test.com/hello/design/images/bg.gif ,it should be accessible , if not then its permission problem

2- then try to use absolute url in your css files like background-image: url(http://test.com/hello/design/images/bg.gif);

3- if you still face the problem then its design issue , i guess you are using IE 6 check out here