I’m sure if you have a Flickr account, you are also using the Flickr badge on your blog or website to show your visitors your pictures. But have you ever noticed that this little piece of code won’t validate correctly? In fact, it even produces a whole list of errors. I’ll show you, how to avoid this (with less code and css info than the actual badge wrapper).
At first we wanna have a look at the original code, so here’s the css code
[code lang="css"]
flickrbadgesource_txt {padding:0; font: 11px Arial, Helvetica, Sans serif; color:#666666;}
flickrbadgeicon {display:block !important; margin:0 !important; border: 1px solid rgb(0, 0, 0) !important;}
flickricontd {padding:0 5px 0 0 !important;}
.flickrbadgeimage {text-align:center !important;}
.flickrbadgeimage img {border: 1px solid black !important;}
flickr_www {display:block; padding:0 10px 0 10px !important; font: 11px Arial, Helvetica, Sans serif !important; color:#3993ff !important;}
flickrbadgeuber_wrapper a:hover,
flickrbadgeuber_wrapper a:link,
flickrbadgeuber_wrapper a:active,
flickrbadgeuber_wrapper a:visited {text-decoration:none !important; background:inherit !important;color:#3993ff;}
flickrbadgewrapper {}
flickrbadgesource {padding:0 !important; font: 11px Arial, Helvetica, Sans serif !important; color:#666666 !important;}
[/code]
and the xhtml code
[code lang="html"]
[/code]
And now, here’s my version:
CSS
[code lang="css"]
flickrbadgewrapper img {
border: 1px solid #bbb;
padding: 3px;
margin: 5px;
}
flickrbadgewrapper {
background-color: #fff;
border: 0;
width: 65%;
text-align: center !important;
}
[/code]
XHTML
[code lang="html"]
[/code]
Simple, eh? Of course I didn’t think about every issue of the original badge but it should work on every other site too. So it basically does the same thing, except displaying the Flickr logo and it doesn’t use tables.
Update: You also have to substitute all your &’s in the flickr-link. Thanks to greer for that hint.