search

adamwulf / Columnizer-jQuery-Plugin

The Columnizer jQuery Plugin will automatically layout your content in newspaper column format. You can specify either column width or a static number of columns. And, of course, it’s easy to use!
http://welcome.totheinter.net/columnizer-jquery-plugin/
Other
760 stars 147 forks source link

Conflict with AdSense in IE? #156

Open OsiriX91 opened 10 years ago

OsiriX91 commented 10 years ago

Hello

I'm using your plugin in my responsive design, but having some trouble with the combination of AdSense. Example: http://www.openingsurengids.com/antwerpen/mechelen Login with: username: martijn pass: martijn

The problem only occurs when you resize the website to the mobile version, so you have to resize your browser to a width lower then 590px.

In the newest Chrome and FF it is working correct. As you can see at the bottom of the page, it is showing an AdSense ad. Below that, you see the columnized "Aangrenzende gemeenten" and "Categorieën" When I open the same page in IE11 and browser width lower then 590px, there is a white space below the ad and "Aangrenzende gemeenten" and "Categorieën" aren't shown.

When I remove the AdSense ad, your plugin is also working correct in IE11. So it has some kind of conflict with AdSense.

Hope you know a solution.

Thanks in advance.

adamwulf commented 10 years ago

The issue seems to be your CSS on the adsense div.

below are two screenshots. the first shows my edit to make it 200px instead of 100%. the 2nd shows the default height of 100%. that 100% height causes it to cover up the columnized content below.

screen shot 2014-04-10 at 11 48 15 am

screen shot 2014-04-10 at 11 48 23 am

OsiriX91 commented 10 years ago

Thanks for your reply! That did indeed solve that problem.

The reason I thought it was a conflict, was because I had another (less major) problem before this one. This problem happens in IE (don't need to resize the window): Page with AdSense in columns: http://www.openingsurengids.com/steden Page without AdSense in columns: http://www.openingsurengids.com/blabla

As you can see, the page without AdSense is divided into 2 columns, while the other page is a single column in IE.

Or is it also a CSS problem? Can't seem to find a solution yet.

Again, thanks a lot!

adamwulf commented 10 years ago

yeah, adsense can't be columnized directly. you might be able to add/initialize the adsense after columnizing. but since columnizer clones document elements, it breaks any content inside of frames (like adsense, among other things).

you may be able to get around it by putting a div of the proper size inside the content, columnizing it, then moving the ad element inside the donefunc which wouldn't clone it.