Text+image iframes all in a row

First, be aware that the text+image iframe links generated by the standard Amazon "Build Links wizard" are a little smaller than those created by the Amazon Blogger tool, which adds padding to the iframe.

Standard text+image iframes

For the Amazon text+image iframes shown below, I used a CSS class, iframe.inrow, to display the iframes "inline". By default, iframes are block elements. Like paragraphs and divs, there is a automatic line-break between them. When displayed inline, they are more like words in a paragraph, and will wrap if there are too many to fit on one line.

To display iframes side-by-side, add this class to your stylesheet:

iframe.inrow {display:inline;}

To add more space between iframes add a right margin to the style:
iframe.inrow (display:inline; margin-right:10px;}

To add space between the iframes, add padding:
iframe.inrow (display:inline; margin-right:10px; padding-top:5px;}

To apply the class add it to the <iframe> tag:
<iframe class="inrow" src="... "></iframe> 

In the next example row, iframes are floated left. You could add this style to your stylesheet:

iframe.fleft {float:left;}
To add more space between rows of iframes, add padding to the style:
iframe.fleft (float:left; margin-right:10px; padding-top:5px;}

If you prefer, you can simply paste the style into each iframe's existing style attribute:
<iframe ... style="display:inline; margin-right:10px; padding-top:5px; width:120px; height:240px;" ...></iframe>

Blogger Tool generated text+image iframes

The text+image iframes generated by the Blogger tool include a style of padding-right:10px, and an HTML attribute of align="left" so a right margin is not necessary to separate the iframes. They will align in rows by themselves. However, if you want to make the code standards-compliant, you could use the CSS style "display:inline" or "float:left" and delete the bogus CSS "align:left" style and the HTML attribute: align="left". The obsolete iframe attributes marginwidth and marginheight can also be safely removed. When displayed inline, the iframes will wrap, just like words in a paragraph, if there are too many to fit on one line.

The most common problem with iframes created by the Blogger Tool is simply that the white background may not match your background color. To fix that problem, edit each iframe tag in the HTML editor. Find "&bg1=FFFFFF" and change FFFFFF, which is the hex color code for white, to the code for your background color.

The following rows of iframes were added using the Amazon Blogger tool. Notice that their height is 245px with top padding of 5px, instead of the usual 240px.

The first group has a class of inrow2. In the examples below, the iframe width has been changed from 131px to 120px, and padding-right is 10px:
iframe.inrow2 {display:inline;}

To apply the class add it to the <iframe> tag:
<iframe class="inrow2" src="... "></iframe>

You could also use the CSS style "float:left" to achieve the same effect. The iframes below are floated left.

iframe.fleft {float:left;}

If the iframes are not enclosed in a block element, such as a paragraph or div, you will need to clear the float at the end of the iframes.

Again, you can add either style directly to the <iframe> tag. The invalid style "align:left;" is ignored, but should be removed if you want your code to validate. The HTML attribute align="left" should also be omitted. The style becomes:

style="display:inline; padding-top:5px; width:120px; height:245px; padding-right:10px;"
OR
style="float:left; padding-top:5px; width:120px; height:245px; padding-right:10px;"

I hope this explanation clears up some of the confusion surrounding text+image iframes.

Blogger disappearing header redux

A few days ago, my header image disappeared again in IE8. I found a way to make the image reappear by setting it as a background to the home page anchor (<a> tag) in the header, but it still had square corners. Finally, I discovered the cause of the problem and a better solution.

When the page loads, Blogger runs a script to "retrofit" IE with some CSS3 features, such as rounded corners. The script should work fine, UNLESS your Blogger template specifies rounded corners on nested divs in the header, particularly if more than one background image is involved. Box-shadows applied to an outer div AND a full-sized inner div with a background image may also cause problems. In these situations, you may see a black background where your image should appear, or no image at all, depending on your header code.

Template Edits

Backup your template in case something goes wrong. Then Edit HTML. Find the CSS for your Header section in the template-skin. If you use a gradient in the outer-header, try replacing it with a solid color, no image. If that doesn't work, specify rounded corner styles (that is, border-radius and all its proprietary variations) for .outer-header OR .Header img, .Header #inner-header, but not both.

Rounded corners for .Header img, .Header #header-inner worked for me when #header-inner had a background image, and there were no <img> tags in the header. If you use an image that replaces the title and description, make sure you apply box-shadow to ONLY .Header #header-inner. Test to determine what works with your blog.

On this blog, I applied border radius to a new div inside #header-inner, which gets the background image. I'm doing this to position that div, #gtclickable, over another div that displays the blog title and description when images and/or CSS are turned off. Therefore, I removed border-radius styles for .header-outer and .Header img, leaving them on .Header #header-inner. I also applied border-radius to #gtclickable, so the background image would not "poke out" with square corners. The box-shadow styles are applied ONLY to .Header #header-inner.

There is another, partial solution that will restore the missing banner image, but results in square corners on the inner header. I mention my first band-aid attempt here because a few people may find it useful. The partial fix is to insert an "if IE" conditional comment that contains an internal CSS style sheet. (It's more convenient to use a Google HTML/Javascript gadget in the header for this instead of editing the template.) In the style sheet, add the background image and border-radius to an element ignored by IERetrofit.js. It works with a span tag or the banner anchor (<a>) tag as long as they are displayed as block elements instead of inline. If overflow:hidden is used, the background image disappears again.

Other browsers, such as Firefox, Chrome, Safari, and Opera support border-radius or a proprietary version of it. My template edits did not break the header display in these browsers, and of course, they are unaffected by the IEretrofit.js script.

Blogger post URLs really are permanent

Blogger does not change the post URL, otherwise known as the permalink or slug if you change the post title after first publishing. With "old Blogger" you could change a post title and the URL would also update. Not so with the "new Blogger"! This behavior can be a giant pain, as I just discovered.

If the post URL is way off-base, it can confuse readers. The only thing you can do is copy its contents to a new post and delete the old one.

If you are very motivated, you could take advantage of this behavior to create user-friendly URLs. Publish the post with a short title that uses your key words. Then change the post title and republish. Notice that the title of this post and its URL are slightly different.

I also use WordPress, which allows you to edit the permalink/slug as needed. This is a great feature, but I don't expect it to be added to Blogger, which likes to keep things simple.