Google remarketing tag - iframe height issue

I've noticed that Google's remarketing code inserts an iframe at the bottom of my page. The problem is that the iframe messes up my layout (it's 13px high and leaves a blank white vertical space at the bottom).

I've tried to hide it with css but it's still visible in IE9:

iframe[name='google_conversion_frame'] { 
	height: 0 !important; 
	line-height: 0 !important; 
	font-size: 0 !important; 
}

Therefore I've got two questions:

a) how to hide this iframe in IE9

b) most importantly - is it safe or can it somehow affect the functionality of this script?

In my sites i use this code

iframe[name='google_conversion_frame'] { 
	height: 0 !important;
	width: 0 !important; 
	line-height: 0 !important; 
	font-size: 0 !important;
	margin-top: -13px;
	float: left;
}

Floating the iframe allows you to use negative margin equal to the height of the body inside the iframe.

Other way around (mentioned in the comments above) is to insert the conversion.js script tag into a hidden div:

<div style="display: none">
    <script type="text/javascript" src="//www.googleadservices.com/pagead/conversion.js">  </script>
</div>

src: http://keanrichmond.com/google-remarketing-messing-with-my-design.html

I had the same problem. The good solution was to add a line in the google remarketing tag.

    var google_conversion_format = 3;

The tag before modification :

<!-- Code Google de la balise de remarketing -->
<script type="text/javascript">/* 
<![CDATA[ */
var google_conversion_id = 10xxxxxxxx;
var google_custom_params = window.google_tag_params;
var google_remarketing_only = true;
/* ]]> */
</script>
<script type="text/javascript" src="//www.googleadservices.com/pagead/conversion.js"></script>
<noscript><div style="display:inline;"><img height="1" width="1" style="border-style:none;" alt="" src="//googleads.g.doubleclick.net/pagead/viewthroughconversion/10xxxxxxxx/?value=0&amp;guid=ON&amp;script=0"/></div></noscript>

The tag after modification :

<!-- Code Google de la balise de remarketing -->
<script type="text/javascript">/* 
<![CDATA[ */
var google_conversion_id = 10xxxxxxxx;
var google_custom_params = window.google_tag_params;
var google_remarketing_only = true;

var google_conversion_format = 3; /* ADD THIS LINE TO RESOLVE YOUR PROBLEM */

/* ]]> */

DO NOT USE THOSE OVERLY COMPLICATED ANSWERS. Simply use position:fixed; on that element to take it out of the document flow.

Like this:

iframe[name="google_conversion_frame"]{
    position:fixed;
}

That's it! You keep all original functionality AND you don't have to worry about API changes.

Is there any downside to just setting the iframe to be absolute positioning.

iframe[name='google_conversion_frame'] {
	position: absolute;    	
    bottom: 0;
}

less code, no !important's and no display: none

Here is my super simple minified solution:

/* Hide AdWords Remarketing iFrame */
iframe[name="google_conversion_frame"]{display:block; height:0;}

I tested and it works in Chrome, FireFox, and IE 10.

There are several ways to hide it of course, but why not have another option.

iframe[name="google_conversion_frame"] {
  height: 0;
  padding: 0;
  margin: 0;
  display: block;
}

I added "border: none;" as my site auto inserted a border that showed a colour even when collapsed.

/* Hide AdWords Remarketing iFrame */
iframe[name="google_conversion_frame"] {
  height: 0;
  padding: 0;
  margin: 0;
  border: none;
  display: block;
}

I just used css to set the height and width to zero. Wrapped the conversion.js file around a div with an id and set its child iframe width and height to 0.

<div id="googleiframe">
<script type="text/javascript" src="//www.googleadservices.com/pagead/conversion.js">
</script>
</div>
<style type="text/css">
#googleiframe iframe{height:0;width:0;}
 </style>

You can set the style in the main css file.