Firefox adblock blocking my CSS styles

Question

Firefox adblock add ons blocks my CSS styles from being applied.

With Enable Ad-block

CSS get loaded but it does not apply my style to the element (checked with Firebug).

With Disable Ad-block

Everything works fine.

I add CSS like this:

<link  rel="stylesheet" type="text/css"  media="all" href="http://myhost/static/frontend/Gworks/bootstrap/en_US/Gworks_Advertisement/css/chousing_advertise.css" />

Css:

/*form styles*/
#msform {
  width: 100%;
  margin: 50px auto;
  text-align: center;
  position: relative;
}
#msform fieldset {
  background: white;
  border: 0 none;
  border-radius: 3px;
  box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.4);
  padding: 20px 30px;
  box-sizing: border-box;
  width: 80%;
  margin: 0 10%;

  /*stacking fieldsets above each other*/
  //position: absolute;
}
/*Hide all except first fieldset*/
#msform fieldset:not(:first-of-type) {
  display: none;
}
/*inputs*/
#msform input, #msform textarea {
  padding: 15px;
  border: 1px solid #ccc;
  border-radius: 3px;
  margin-bottom: 10px;
  width: 100%;
  box-sizing: border-box;
  font-family: montserrat;
  color: #2C3E50;
  font-size: 13px;
}
/*buttons*/
#msform .action-button {
  width: 100px;
  background: #05b8d4;
  font-weight: bold;
  color: white;
  border: 0 none;
  border-radius: 1px;
  cursor: pointer;
  padding: 10px 5px;
  margin: 10px 5px;
}
#msform .action-button:hover, #msform .action-button:focus {
  box-shadow: 0 0 0 2px white, 0 0 0 3px #05b8d4;
}
/*headings*/
.fs-title {
  font-size: 15px;
  text-transform: uppercase;
  color: #2C3E50;
  margin-bottom: 10px;
}
.fs-subtitle {
  font-weight: normal;
  font-size: 13px;
  color: #666;
  margin-bottom: 20px;
}
/*progressbar*/
#progressbar {
  margin-bottom: 30px;
  overflow: hidden;
  /*CSS counters to number the steps*/
  counter-reset: step;
}
#progressbar li {
  list-style-type: none;
  color: black;
  text-transform: uppercase;
  font-size: 9px;
  width: 33.33%;
  float: left;
  position: relative;
}
#progressbar li:before {
  content: counter(step);
  counter-increment: step;
  width: 20px;
  line-height: 20px;
  display: block;
  font-size: 10px;
  color: white;
  background: #05b8d4;
  border-radius: 3px;
  margin: 0 auto 5px auto;
}
/*progressbar connectors*/
#progressbar li:after {
  content: '';
  width: 100%;
  height: 2px;
  background: #05b8d4;
  position: absolute;
  left: -50%;
  top: 9px;
  z-index: -1; /*put it behind the numbers*/
}
#progressbar li:first-child:after {
  /*connector not needed before the first step*/
  content: none;
}
/*marking active/completed steps green*/
/*The number of the step and the connector before it = green*/
#progressbar li.active:before,  #progressbar li.active:after{
  background: #142c90;
  color: white;
}
#msform input::-moz-placeholder
{
  color: black !important;
}
#msform textarea::-moz-placeholder
{
  color: black !important;
}

I'm looking to solve this issues, I don't want to be make sure of every client to disable adblock.

Answer 1

Your URL contains a bunch of keyworks that will likely match some adblocking word filters, like this one.

Check these parts of your URL:

/Gworks_Advertisement/
/chousing_advertise.css

Both contain the word "advertise" which appears in some of the more generic rules.

If those URL's are not for ads, don't use a URL with such keywords.

If they really are just for serving internet ads, changing the URL might work in the sort term, but the word filter will likely be updated to block them again.