SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast
    Join Date
    May 2007
    Location
    Oslo, Norway
    Posts
    74
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS takes minutes to change on server

    Hi folks,

    I have a very strange problem. I have just started designing a new web site on One.com. I use DreamWeaver.
    Each time I do changes in the CSS and uploads it, it takes like 10-12 minutes before I can see the changes on the live website.
    If I do changes in the index file it's being visual at once. The CSS file is linked by the full url.

    I have tested on three computers with different browsers and also on different networks, office and home, but same delay.
    The CSS is quite plain so far.
    Code:
    @charset "UTF-8";
    /* CSS Document */
    
    body  { 
    margin: 0;
    padding: 0;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 12px;
    line-height: 15px;
    color: #333;
    border-top: 3px #fe781e solid;
    }
    body#home a#homeLink,
    body#anl a#anlLink,
    body#adv a#advLink,
    body#lok a#lokLink,
    body#about a#aboutLink,
    body#contact a#contactLink,
    body#reg a#regLink,
    body#advice a#adviceLink
    {
    background:#5F111F;
    color: #FFF;
    }
    
    #wrapper { 
    margin-left: auto;
    margin-right:  auto;
    width: 1024px;
    background: #06C;
    padding: 30px 0px;
    position: relative;
    }
    #clearbottom { 
    clear: both;
    height:1px;
    }
    #topbanner { 
    width: auto;
    margin-left: 0;
    background:#FFFFFF;
    height:123px;
    border-bottom: 1px #cccccc solid;
    position: relative;
    }
    #topholder { 
    width: 1024px;
    position: relative;
    margin-left:auto;
    margin-right:auto;
    }
    #logo { 
    padding: 15px 0 15px 0;
    width: 500px;
    background: #FFF;
    float:left;
    margin-right: 30px;
    }
    #topsearch { 
    width: 400px;
    margin: 15px 0 0 0;
    float:left;
    }
    #menuline { 
    background: #f2f2f2;
    height: 60px;
    width: auto;
    position: relative;
    border-bottom: 1px #cccccc solid;
    }
    #menuholder { 
    height: 60px;
    width: 1024px;
    font: normal 13px "Trebuchet MS", Arial, Helvetica, sans-serif;
    margin-left:auto;
    margin-right:auto;
    position: relative;
    }
    #slideholder { 
    border-top: 
    #leftcolumn { 
    width: 260px;
    float: left;
    height: auto;
    }
    
    /* footer */
    
    #footer {
    width: 944px;
    clear:both;
    float:none;
    margin: 45px 25px 0px 25px;
    padding: 15px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #000;
    }
    #footer a { 
    text-decoration:none;
    color:#666;
    }
    #footer a:hover { 
    color: #999;
    border-bottom: 1px dotted #999999;
    }
    #footer .bottom_links { 
    float:left;
    width: 894px;
    height: 160px;
    margin-bottom: 15px;
    padding-bottom: 10px;
    font-size:12px;
    }
    #footer ul { 
    width: 894px;
    list-style:none;
    height:190px;
    clear:right;
    float:left;
    margin-left:25px;
    }
    #footer li { 
    list-style:none;
    width: 210px;
    float:left;
    margin: 3px 2px 0 0;
    padding:0;
    line-height: 14px;
    }
    #footer .bottomlinks { 
    height: 340px;
    background: #D1E3E1;
    margin-top: 5px;
    }
    #footer .bottomtop { 
    padding: 6px 10px 6px 12px;
    width: 894px;
    height:35px;
    text-align:center;
    }
    #footer .bottomtop p { 
    margin:3px 0 0 0;
    }
    #footer .bottomtop h3 { 
    margin: 8px 0 0 0;
    text-transform:uppercase;
    font-size: 12px;
    }
    #footer .bottom_contact { 
    width: 894px;
    float:left;
    height: 100px;
    margin: 0 10px 0 10px;
    padding: 5px 15px 6px 15px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    background: #FFF;
    color: #000;
    }
    #footer .bottom_contact h3 { 
    margin: 6px 0 0 0;
    text-transform:uppercase;
    font-size: 12px;
    }
    #footer .bottom_contact p { 
    margin: 12px 0 0 0;
    }
    #footer .bottompartner { 
    width: 894px;
    padding: 10px 15px 5px 15px;
    float: left;
    height: 60px;
    background: #FFF;
    margin: 15px 10px 12px 10px;
    text-align: center;
    color: #333;
    }
    #footer .bottompartner p { 
    margin: 3px 0 0 0;
    }
    Any feedback would be greatly appreciated.

  2. #2
    SitePoint Addict
    Join Date
    Sep 2005
    Posts
    271
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    Sounds like your CSS files are caching. When you include the css file, try adding ?v=0.1 at the end. This should force the browser to load the new file. The downside is you have to change the value every time you update the CSS file.

    You could also try a hard refresh such as Ctrl+f5.

  3. #3
    SitePoint Enthusiast
    Join Date
    May 2007
    Location
    Oslo, Norway
    Posts
    74
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Patche,

    Thank you, that helped:-)
    But I don't think it's my browsers that are caching the CSS. Hard refresh does not help. And none of the other sites I am working on is having this problem (not on One.com). Is there something else I can do? Javascript or something that will empty the cache?

  4. #4
    SitePoint Enthusiast
    Join Date
    Jan 2013
    Posts
    26
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    there may be some server caching used for static files like CSS, Javascript, HTML etc.

  5. #5
    Barefoot on the Moon! silver trophy
    Force Flow's Avatar
    Join Date
    Jul 2003
    Location
    Northeastern USA
    Posts
    4,521
    Mentioned
    51 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Patche View Post
    Sounds like your CSS files are caching. When you include the css file, try adding ?v=0.1 at the end. This should force the browser to load the new file. The downside is you have to change the value every time you update the CSS file.
    The recommended practice is now just style.css?123. The "v=" has been dropped because it was causing issues under certain conditions.

    Quote Originally Posted by pbsonawane View Post
    there may be some server caching used for static files like CSS, Javascript, HTML etc.
    It's possible that the code for caching is located in your site's htaccess file. Look for any lines that include "ExpiresByType".

    Exapnding on what Patche said, to get around caching when you make a change, each time you make a change and upload a new version of the CSS file you will need to change the number in the query that follows the file's name.
    Visit The Blog | Follow On Twitter
    301tool 1.1.5 - URL redirector & shortener (PHP/MySQL)
    Can be hosted on and utilize your own domain


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •