Sprise Media Custom Websites & Freelance Web Support in Scottsdale, Arizona

Pages Broken with AdBlock

The curious case of the disappearing divs

 
banner_adblock

If you like to be advertised to, wait for additional affiliate content load, or watch promos before your content on Youtube – don’t install the AdBlock browser extension.

Why Does My Site Look Broken?

Adblock is like watching TV without the commercials, except for one tiny exception…. when it breaks things by accident.

For a real example enable Adblock in your browser and load Ad2Phoenix.com, and you’ll get this:

oops_broken

With AdBlock enabled the site is missing the most important stylesheet and appears unfinished at best. I sent a message to the site admin but it was unanswered so perhaps they would prefer to assume users are not using advertisement blocking software. I was able to figure it out but what about the next user?

Why Is My <div> Hidden/Invisible?

Another issue that can occur is that elements mysteriously go missing, and probing them with a browser tool such as Firebug finds no real reason for them to be hidden. It’s not set to visibility: none, it’s not set to display: hidden, it doesn’t have an absolute position with crazy coordinates, and it hasn’t been buried underneath some other element in the z-index stack. What gives?

If there is truly no reason for a div to go missing, check the ids and classes. Is the element named something like #right-ad? Disable AdBlock and you may well see the element go back to exhibiting predictable (and testable) behavior.

fb