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.


@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.


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.

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?

there may be some server caching used for static files like CSS, Javascript, HTML etc.

The recommended practice is now just style.css?123. The “v=” has been dropped because it was causing issues under certain conditions.

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.