Badge offset problem

RonD200

I'm using the new Badge code generator under the Share button to generate code to embed the badge in my Blogger blog. The Badge looks fine in the Smugmug preview, but when I paste the code in my blog the badge cuts off the bottom row??? It looks like there's some sort of offset. See photo below. I'm using the default badge settings so there should be three rows of photos, but the bottom row is being cut off. As I said previously the badge looks fine in the Smugmug preview, but not on the blog.



This is the code I'm pasting into blogger:

<div style="background: #000000;-moz-border-radius: .6em;-webkit-border-radius: .6em;overflow:hidden;text-align: center;padding-top:13px;width:220px;height:220px;margin:0 auto;">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="200" height="200" id="vv12x">
<param name="movie" value="http://cdn.smugmug.com/swfs/badge/flashbadge.swf?autorepeat=true&amp;gridRows=3&amp;gridColumns=4&amp;gridSpacing=1&amp;gridDelay=2&amp;autoHideDelay=4&amp;slideshowDelay=4&amp;autostart=true&amp;aboutlink=&amp;sharelink=&amp;background=#000000&amp;forceSize=&amp;displayMode=full&amp;useLargeImages=true&amp;albums=http://api.smugmug.com/hack/feed.mg?Type=gallery&Data=8298256_hgiiL&format=rss200&Sandboxed=1&amp;gapImage=http://photos.smugmug.com/img/besocial/invisible_filler.png&amp;gapImageTarget=&amp;preloaderGlow=#FFFFFF&amp;preloaderColor=#FFFFFF&amp;order=norandom&amp;width=200&amp;height=200&amp;BadgeHost=cdn.smugmug.com&quot;&gt;
<param name="wmode" value="transparent">
<embed src="http://cdn.smugmug.com/swfs/badge/flashbadge.swf?autorepeat=true&amp;gridRows=3&amp;gridColumns=4&amp;gridSpacing=1&amp;gridDelay=2&amp;autoHideDelay=4&amp;slideshowDelay=4&amp;autostart=true&amp;aboutlink=&amp;sharelink=&amp;background=#000000&amp;forceSize=&amp;displayMode=full&amp;useLargeImages=true&amp;albums=http://api.smugmug.com/hack/feed.mg?Type=gallery&Data=8298256_hgiiL&format=rss200&Sandboxed=1&amp;gapImage=http://photos.smugmug.com/img/besocial/invisible_filler.png&amp;gapImageTarget=&amp;preloaderGlow=#FFFFFF&amp;preloaderColor=#FFFFFF&amp;order=norandom&amp;width=200&amp;height=200&amp;BadgeHost=cdn.smugmug.com&quot; width="200" height="200" wmode="transparent">
</embed>
</object>
</div>

Anyone have any ideas of why the bottom row of photos is being cut off?

Thanks Ron

Andy

Here's a badge, just put on Blogger test blog:



Mabye it's theme- or style-related on your blog?

wellman

RonD200 wrote:

I'm using the new Badge code generator under the Share button to generate code to embed the badge in my Blogger blog. The Badge looks fine in the Smugmug preview, but when I paste the code in my blog the badge cuts off the bottom row??? It looks like there's some sort of offset. See photo below. I'm using the default badge settings so there should be three rows of photos, but the bottom row is being cut off. As I said previously the badge looks fine in the Smugmug preview, but not on the blog.



This is the code I'm pasting into blogger:

<div style="background: #000000;-moz-border-radius: .6em;-webkit-border-radius: .6em;overflow:hidden;text-align: center;padding-top:13px;width:220px;height:220px;margin:0 auto;">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="200" height="200" id="vv12x">
<param name="movie" value="http://cdn.smugmug.com/swfs/badge/flashbadge.swf?autorepeat=true&amp;gridRows=3&amp;gridColumns=4&amp;gridSpacing=1&amp;gridDelay=2&amp;autoHideDelay=4&amp;slideshowDelay=4&amp;autostart=true&amp;aboutlink=&amp;sharelink=&amp;background=#000000&amp;forceSize=&amp;displayMode=full&amp;useLargeImages=true&amp;albums=http://api.smugmug.com/hack/feed.mg?Type=gallery&Data=8298256_hgiiL&format=rss200&Sandboxed=1&amp;gapImage=http://photos.smugmug.com/img/besocial/invisible_filler.png&amp;gapImageTarget=&amp;preloaderGlow=#FFFFFF&amp;preloaderColor=#FFFFFF&amp;order=norandom&amp;width=200&amp;height=200&amp;BadgeHost=cdn.smugmug.com&quot;&gt;
<param name="wmode" value="transparent">
<embed src="http://cdn.smugmug.com/swfs/badge/flashbadge.swf?autorepeat=true&amp;gridRows=3&amp;gridColumns=4&amp;gridSpacing=1&amp;gridDelay=2&amp;autoHideDelay=4&amp;slideshowDelay=4&amp;autostart=true&amp;aboutlink=&amp;sharelink=&amp;background=#000000&amp;forceSize=&amp;displayMode=full&amp;useLargeImages=true&amp;albums=http://api.smugmug.com/hack/feed.mg?Type=gallery&Data=8298256_hgiiL&format=rss200&Sandboxed=1&amp;gapImage=http://photos.smugmug.com/img/besocial/invisible_filler.png&amp;gapImageTarget=&amp;preloaderGlow=#FFFFFF&amp;preloaderColor=#FFFFFF&amp;order=norandom&amp;width=200&amp;height=200&amp;BadgeHost=cdn.smugmug.com&quot; width="200" height="200" wmode="transparent">
</embed>
</object>
</div>

Anyone have any ideas of why the bottom row of photos is being cut off?

Thanks Ron

Blogger treats new lines (even in the HTML editor) as "real" new lines. Take out all the new lines and make the SmugMug code one continuous line of text, and that should help.

Andy

wellman wrote:

Blogger treats new lines (even in the HTML editor) as "real" new lines. Take out all the new lines and make the SmugMug code one continuous line of text, and that should help.

Hm, I didn't do that, I just pasted the code into a blogger post

wellman

Andy wrote:

Hm, I didn't do that, I just pasted the code into a blogger post

I seem to recall that there's a Blogger setting involved... Yes, under Settings-->Formatting in Blogger's dashboard, there's a "Convert Line Breaks" option. It could be set to "no" to fix OP's problem.

RonD200

Andy wrote:

Here's a badge, just put on Blogger test blog:



Mabye it's theme- or style-related on your blog?

Hmmm, I'm using a Stretchy theme I wonder if that has anything to do with it?

RonD200

wellman wrote:

I seem to recall that there's a Blogger setting involved... Yes, under Settings-->Formatting in Blogger's dashboard, there's a "Convert Line Breaks" option. It could be set to "no" to fix OP's problem.

Thanks Greg, I changed the "Convert Line Breaks" option to "NO" and that fixed the problem with the Badge!!!! clap

RonD200

RonD200 wrote:

Thanks Greg, I changed the "Convert Line Breaks" option to "NO" and that fixed the problem with the Badge!!!! clap

Opps I spoke too soon, the line break option worked in one of my blogs but not the other.

Also the badge looks different if I use IE7 or FF. In Firefox the bottom row gets cut off, in IE7 the grid border on top of the badge is increased but all three rows show up???

I think I'm just gonna stick with the embedded slide show for now.

Thanks for your help.

Ron

Glory2Jesus4Photography

RonD200 wrote:

Thanks Greg, I changed the "Convert Line Breaks" option to "NO" and that fixed the problem with the Badge!!!! clap

I had the same problem and switching line break to no fixed it.
Andy why does it seem like you very seldom have the same problems as the rest of us. it Just makes me jealous some times.

RonD200

Glory2Jesus4Photography wrote:

I had the same problem and switching line break to no fixed it.
Andy why does it seem like you very seldom have the same problems as the rest of us. it Just makes me jealous some times.

Yeah it fixed it in one of my blogs, the only problem was changing the formating for line breaks to no, messed up the formating in all of my previous posts. I'm sticking with the slide show for now.

Ron

guy

RonD200 wrote:

Yeah it fixed it in one of my blogs, the only problem was changing the formating for line breaks to no, messed up the formating in all of my previous posts. I'm sticking with the slide show for now.

Ron

Like you I couldn't change the formatting option because it screwed up the look of all previous posts. However the trick about deleting the line breaks in the HTML code worked just fine. It's quite quick, it's easy to see them in the code so if you just press the delete key at each spot (3 or 4 times) it then works just fine!

RonD200

guy wrote:

Like you I couldn't change the formatting option because it screwed up the look of all previous posts. However the trick about deleting the line breaks in the HTML code worked just fine. It's quite quick, it's easy to see them in the code so if you just press the delete key at each spot (3 or 4 times) it then works just fine!

Thanks, I'll give that a try.

mrcoons

guy wrote:

Like you I couldn't change the formatting option because it screwed up the look of all previous posts. However the trick about deleting the line breaks in the HTML code worked just fine. It's quite quick, it's easy to see them in the code so if you just press the delete key at each spot (3 or 4 times) it then works just fine!

So what does a line break look like to those of us that are HTML challenged?

wellman

mrcoons wrote:

So what does a line break look like to those of us that are HTML challenged?

In you're code, you'll have something like this...

<foo>
<bar>
<foo>
<bar>

You'll need to make it look like this...

<foo><bar><foo><bar>

RonD200

Greg is correct what I did was look through the Badge code and whenever I saw the greater than symbol I would put my cursor behind it and hit the delete key to bring up the next line.

like this:

lots of code>delete here

mrcoons

Thanks, I get it - finally.

Got one in place!

RonD200

mrcoons wrote:

Thanks, I get it - finally.

Got one in place!

Great, looks good!!!!