Support » Themes and Templates » Black boxes on Adsense ads

  • Resolved RenFromPenn



    I designed a new theme for my site and when doing so I was primarily working in Firefox. Even so, I loaded IE and checked things out. All appeared to be fine. Yesterday I added in the Adsense and didn’t give it a second thought. Well, late last night I turned on IE and visited my site only to find that the Adsense ads have blacks boxes displaying on them. I have pinpointed that this is being caused by having filter: alpha(opacity=100); in my theme. I can’t remove it however, because the right sidebar doesn’t display correctly without it. Any ideas on how I can get those Adsense ads to display properly? My URL is



Viewing 7 replies - 1 through 7 (of 7 total)
  • It may help if you validate your pages. Both the XHTML and CSS have errors in them:

    Since you’re using Firefox, get the Web Developer toolbar. It’s a great tool with buttons that will validate your code without having to go to and type in your blog address.

    Unfortunately I can’t give you an honest opinion about IE without resorting to words that are improper to use in conversation with a lady. I’ve found that using a separate stylesheet for IE has been the easiest solution. I’ve explained how to do that in these posts

    Unfortunately we can’t ignore IE users that are ignorant about the availability of other superior browsers because there are just too many of them.

    Really like the design of your site.


    Hi John,

    Thanks for the compliment on my site design 🙂 It’s always nice to get some positive feedback.

    Yeah, I completely agree about IE. I wish more people would make the switch to Firefox already.

    It’s pretty late now, but I’ll take your suggestion and see about validating my site. I’ll also be sure to check out the links that you provided.

    After I do that, I’ll post an update on any progress.


    So, I set things up on a test domain so that the visitors wouldn’t notice me paying around with the site. I validated the CSS and that really only made the footer problem worse. Now, instead of covering 1 or 2 posts, it covers all but one of them.

    Also, the validator removed the reference to filter: alpha(opacity=100); That, of course, solved the Adsense problem,, but now the background color of the sidebar doesn’t run to the bottom of the page. I have tried adding a background image to the right sidebar like I did on the left one, but it doesn’t repeat to the bottom of the page like the left sidebar does. I don’t get why it works on one side of the theme, but not on the other.

    I managed to fix the problem with Adsense by overriding the filter: alpha(opacity=100); on only that section of the page.

    Doing this, however, only made the footer problem worse.

    Sound like you’re using an automated tool in an editor to change your code to valid code. As you have realized it only creates other problems.

    Validate your XHTML code first at
    In the list of errors they give you tips on what the problem may be. Always check that all tags are closed as they should be. (it’s sometimes easier to copy the generated code from your “view source” option in your browser and pasting it in an editor like dreamweaver.)

    Once your XHTML is error free go on to the CSS and validate it here:

    Some themes have browser specific CSS or CSS3 that won’t be recognized. That’s okay as long as you’re 100% sure you got the syntax right.

    If you go about it this way it’ll be easiest for you because XHTML errors can have great impact on the rendering of the CSS. Trying to style around an XHTML error with CSS isn’t going to work.

    I did go to the two sites that you mention to validate this. The html wasn’t so awful. It seemed mostly like alerts that I wasn’t complying with valid xhtml, which I don’t consider to be a big problem. Things like using
    instead of

    Yes, the CSS validator that I visited, which is also the one that you suggested, did offer a cleaned up version of my stylesheet for me to us.

    Anyway, the out of it is that with a little bit more playing around with this I have finally managed to solve both problems.

    Well your code didn’t show because you didn’t use the backticks. If it’s the <br /> tags you’re referring to, which you might not see as a problem, your browser does see it as a problem. When a tag is opened but not closed like XHTML requires, the browser assumes that what follows is still within that element.

    If you don’t want to comply with the standard that’s fine, Just don’t use a DOCTYPE. The whole point of having a DOCTYPE is to let the browser know which rules you coded by. Telling the browser “I’m gonna play by these rules” but then disregard them doesn’t make sense. If you remove the DOCTYPE the browser doesn’t expect you to keep any standards at all and just renders the code as it comes.

    I do hope you have loads of free time, because to get your site looking the same across the different browsers without valid code is quite the challenge. I’m not hung up on rules but if you keep them it makes it a lot easier on yourself. And easier for others to help you. If you know your XHTML code is valid you don’t have to worry about it anymore. All you’ll have to look at is your CSS.

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Black boxes on Adsense ads’ is closed to new replies.