Google remarketing tag iframe height issue

Google’s remarketing code inserts an iframe (with no content) directly below the opening <body> tag, which is 300x13px and can throw out a website’s layout. This post looks at how to effectively hide it with CSS in a couple of different ways that hopefully shouldn’t mess with its functionality at all.

Using position: absolute

Add this to your CSS and it will use absolute positioning, pushing it off the left side of page so it cannot be seen and doesn’t affect content flow:

iframe[name='google_conversion_frame'] {
    position: absolute;
    left: -1000px;
}

Setting the height

Another method is to set the height instead:

iframe[name='google_conversion_frame'] {
    height: 0;
}

I’ve seen posts that suggest setting display: block as well, but just setting the height seems to work OK. If you find it’s not setting the hide in a particular browser, then try adding display block too.

Setting display: none?

This will work to hide the frame, but it’s probably not a good idea because it may mess with the functionality of the remarketing code. Obviously the above options may too, but something needs to be done to prevent it from pushing layouts out.

HTML/CSS background-position

The HTML/CSS background position can be set using px, % and the constants top, center, bottom for vertical positioning and left, center, right for horizontal positioning. This post looks at the order they need to be in, and a "gotcha" that can catch you out when moving from constants to pixels.

Opacity for Internet Explorer using CSS3 PIE and Alpha Transparency

Alpha transparency is a much easier way to make a background transparent than having to specify a whole bunch of cross browser CSS opacity statements and works in a wide variety of browsers, with the usual exception of Internet Explorer prior to version 9. If you are using the CSS3 PIE utility in your web project then there’s an easy way to use alpha transparency with CSS3 PIE.

What am I trying to achive?

I’ve used this technique myself for the top navigation of one of my websites where there’s a background image with navigation tabs on top. The website also uses border-radius which PIE also helps with, but I won’t include that in the example in this post.

The screenshot below shows an example of a background image with a transparent block on top with some text. The background image can be seen opaque through the block.

The HTML and CSS

In the above example, the HTML looks like this:

<div id="exampleContainer">
 <div id="exampleTransparency">Example transparency</div>
 </div>
 

The CSS looks like this:

#exampleContainer {
 background: url(https://electrictoolboxcom5738b.zapwp.com/minify:true/asset:https://electrictoolbox.com/wp-content/uploads/running.jpg);
 height: 97px;
 width: 500px;
 }
 #exampleTransparency {
 /* set background with alpha channel transparancy: 1st for IE no PIE, 2nd for IE PIE, 3rd for others */
 background: rgb(95,83,75);
 -pie-background: rgba(0,0,0,0.5);
 background: rgba(0,0,0,0.5);
 /* add PIE for IE < 9 */
 behavior: url(https://electrictoolbox.com/examples/pie.htc);
 /* IE needs position set to something other than the default for this to work */
 position: relative;
 /* other css settings for content */
 color: white;
 padding: 10px;
 }
 /* prevent IE9 using PIE */
 :root *> #exampleTransparency {
 behavior: none;
 }
 
 

It’s fairly self explanatory but just a couple of points…

There are three declarations for the background. The first is the fallback which will show a solid background color if PIE doesn’t work (i.e. Javascript is switched off). The second is the declaration for PIE which will be ignored by all browsers other than IE using PIE. The third sets the background with alpha transparency. Browsers that don’t support this will ignore it and use the earlier declaration.

Obviously change the path for pie.htc to where you store it on your own site. It does need to have the full path to it, as I mentioned in my gotchas about PIE post.

And finally that odd looking declaration at the end prevents IE9 from using PIE at all; by doing this it ensures IE9 will not download the pie.htc file. I talked about this in an earlier post as well.

Browser support for alpha transparency

All modern browsers support alpha transparency:

  • Chrome
  • Firefox 3+
  • IE9+
  • Opera 10+
  • Safari 3+

Working example

I have a working example available to view in a browser, which should look more or less exactly like the screenshot example in this post.

border-radius and box-shadow support across browsers

This post is a reference sheet I needed for myself to show which browsers support the CSS3 box-shadow and border-radius properties, which require vendor prefixes, and which have no support at all.

box-shadow / border-radius support

The border-radius support and box-shadow support columns indicate what property name is required for the property to work in that browser. For older versions of Firefox the are prefixed by -moz, for older versions of webkit they are prefixed with -webkit.

Browser and version border-radius support box-shadow support
Chrome border-radius box-shadow
Firefox 4.0+ border-radius box-shadow
Firefox 3.6 -moz-border-radius -moz-box-shadow
Firefox 3.5 -moz-border-radius -moz-box-shadow
Firefox 3.0 -moz-border-radius No support
Internet Explorer 9+ border-radius box-shadow
Internet Explorer 8 and earlier No support No support
Mobile Safari 4.0.5 (iOS 4) border-radius -webkit-box-shadow
Mobile Safari 4.0.4 (iOS 3) -webkit-border-radius -webkit-box-shadow
Opera 10.50+ border-radius box-shadow
Opera 10.10 and earlier No support No support
Safari 5.0 border-radius -webkit-box-shadow
Safari 4.0 -webkit-border-radius -webkit-box-shadow

Mobile Safari was tested on iOS3 and iOS4 using the iPad and iPhone simulators on a Mac, and also on Android 2.2 (which reports it as 4.0 and 533.1). The version on Android 2.2 was like 4.0.5 where it needed the vendor prefix for box shadow but not border radius.

Cross Browser Usage

In order to ensure the greatest cross browser usage, set up border-radius and box-shadow like so:

-moz-border-radius: [radius settings here];
-webkit-border-radius: [radius settings here];
border-radius: [radius settings here];

-moz-box-shadow: [shadow settings here];
-webkit-box-shadow: [shadow settings here];
box-shadow: [shadow settings here];

Replace [radius settings here] with the exact same settings for each; and the same for [shadow settings here].

Note: I used the HTML5 DOCTYPE when testing to create the above table.