Firefox is giving me this error:

XML Parsing Error: not well-formed
Location: http://www.arctosdesign.com/silverstripe/
Line Number 158, Column 106://]]></script><script type="text/javascript" src="http://www.flickr.com/badge_code_v2.gne?count=3&display=latest&size=s&layout=x&source=user&user=28322286%40N08"></script>
---------------------------------------------------------------------------------------------------------^

And this is what Safari says:

This page contains the following errors:
error on line 140 at column 1837: EntityRef: expecting ';'
Below is a rendering of the page up to the first error.

I am trying to add a flickr badge from Flickr but I am getting this error. I am no coder but I think it means that there is a problem with the = symbol in the link. Does any one know how to solve it.
would really appreciate any help.

No, it's not the =. It's the ampersand. In XML (or XHTML for that matter), you have to encode it like this: &
So, replace all the & in your link url with & that should fix the problem

I fixed the & but it still doesn't work.

this is how I currently have it.

<div id="flickr_badge_uber_wrapper">
<div id="flickr_badge_wrapper">
<script type="text/javascript" src="http://www.flickr.com/badge_code_v2.gne?count=4&amp;display=latest&amp;size=s&amp;layout=x&amp;source=user&amp;user=28322286%40N08"></script>
</div></div>

Are you sure that URL is correct? If I open that in the browser, the returned JavaScript won't generate any visible elements... it does however add some invisible elements to the page (you can verify that using firebug

well if I go into the DOM section of firebug(I don't really know how to use firebug I have very little coding knowledge and I am trying to learn) I can see this:

"<div class="flickr_badge_image" id="flickr_badge_image1"><a href="http://www.flickr.com/photos/retrocity/3612043955/"><img src="http://farm3.static.flickr.com/2422/3612043955_d6a46f10da_s.jpg" alt="A photo on Flickr" title="rarotonga_dinner-4" height="75" width="75"></a></div><div class="flickr_badge_image" id="flickr_badge_image2"><a href="http://www.flickr.com/photos/retrocity/3612858126/"><img src="http://farm4.static.flickr.com/3316/3612858126_0afcb7fd2e_s.jpg" alt="A photo on Flickr" title="rarotonga_dinner-3" height="75" width="75"></a></div><div class="flickr_badge_image" id="flickr_badge_image3"><a href="http://www.flickr.com/photos/retrocity/3612043447/"><img src="http://farm4.static.flickr.com/3620/3612043447_cc082cf7f5_s.jpg" alt="A photo on Flickr" title="rarotonga_dinner-2" height="75" width="75"></a></div><div class="flickr_badge_image" id="flickr_badge_image4"><a href="http://www.flickr.com/photos/retrocity/3612857528/"><img src="http://farm4.static.flickr.com/3320/3612857528_5619567dd5_s.jpg" alt="A photo on Flickr" title="rarotonga_dinner-1" height="75" width="75"></a></div><span style="position:absolute;left:-999em;top:-999em;visibility:hidden" class="flickr_badge_beacon"><img src="http://geo.yahoo.com/p?s=792600102&t=d4a03345bad290dbe3993cde2947ab2f&r=http%3A%2F%2Fwww.arctosdesign.com%2Fsilverstripe%2F&fl_ev=0&lang=en&intl=uk" width="0" height="0" alt="" /></span>"

which shows that it is getting hold of my images because those are linking to the right place there just not showing on my page?

I have a feeling the problem is here:

<span style="position:absolute;left:-999em;top:-999em;visibility:hidden" class="flickr_badge_beacon"><img src="http://geo.yahoo.com/p?s=792600102&t=d4a03345bad290dbe3993cde2947ab2f&r=http%3A%2F%2Fwww.arctosdesign.com%2Fsilverstripe%2F&fl_ev=0&lang=en&intl=uk" width="0" height="0" alt="" /></span>

I checked all the liked thumbnails and they are correct the only thing not producing anything is this link.
Potentially I am way off. :)

Hm the content you get there looks ok to me. Do you get any errors in the Firebug console? And how did you style the surrounding divs? Are you sure none of them has "visibility: hidden" or "display: none" ?

The surrounding Divs have the following styles:

#flickr {
	height: 308px;
	width: 311px;
	float: right;
	margin-right: 7px;
	padding-top: 13px;
	padding-bottom: 12px;
	padding-left: 0px;
}
#flickr_header {
	background-image: url(../images/flickr.jpg);
	background-repeat: no-repeat;
	height: 23px;
	width: 193px;
	background-position: left top;
	margin-left: 10px;
}
#flickr_container {
	background-image: url(../images/flicker_bg.jpg);
	background-repeat: no-repeat;
	background-position: left top;
	height: 267px;
	width: 258px;
	margin-left: 26px;
	margin-top: 10px;
}
.flickr_img{
	width: 252px;
	margin-left: 1px;
	position: relative;
	padding-top: 3px;
}
#flickr_r {
	width:214px;
	height: 168px;
	padding:0 0 0 50px;
	margin-top:0px;
	}
div#flickr_r a img {
	float:left;
	background: #ffffff;
	margin:0 4px 4px 0px;
	padding:4px;
	width:75px;
	height:75px;
	}
	div#flick_r a img {
	background: #555555;
	}
div#flickr_r img[src*="http://geo.yahoo.com"] { display:none }

I found these links explaining a similar problem.
http://www.teddy-o-ted.com/design/fix-for-buggy-flickr-badge-js/
http://veerle.duoh.com/blog/comments/fickr_badge_w3c_valid/
and I followed as they said but still no images.

it seems as though my problem might lie in the creation of a <span> also the links above suggested chaning the standard flickr badge CSS which I did but I notice bellow it is still using <div id="flickr_badge_image"> which I have no css for?

var b_txt = '';
2
3// write the badge
4
5
6
7 b_txt+= '<div class="flickr_badge_image" id="flickr_badge_image1"><a href="http://www.flickr.com/photos/retrocity/3612043955/"><img src="http://farm3.static.flickr.com/2422/3612043955_d6a46f10da_s.jpg" alt="A photo on Flickr" title="rarotonga_dinner-4" height="75" width="75"></a></div>';
8
9
10 b_txt+= '<div class="flickr_badge_image" id="flickr_badge_image2"><a href="http://www.flickr.com/photos/retrocity/3612858126/"><img src="http://farm4.static.flickr.com/3316/3612858126_0afcb7fd2e_s.jpg" alt="A photo on Flickr" title="rarotonga_dinner-3" height="75" width="75"></a></div>';
11
12
13 b_txt+= '<div class="flickr_badge_image" id="flickr_badge_image3"><a href="http://www.flickr.com/photos/retrocity/3612043447/"><img src="http://farm4.static.flickr.com/3620/3612043447_cc082cf7f5_s.jpg" alt="A photo on Flickr" title="rarotonga_dinner-2" height="75" width="75"></a></div>';
14
15
16 b_txt+= '<div class="flickr_badge_image" id="flickr_badge_image4"><a href="http://www.flickr.com/photos/retrocity/3612857528/"><img src="http://farm4.static.flickr.com/3320/3612857528_5619567dd5_s.jpg" alt="A photo on Flickr" title="rarotonga_dinner-1" height="75" width="75"></a></div>';
17
18
19b_txt += '<span style="position:absolute;left:-999em;top:-999em;visibility:hidden" class="flickr_badge_beacon"><img src="http://geo.yahoo.com/p?s=792600102&t=88be7833b0bb72e29c60df2eeac20052&r=http%3A%2F%2Fwww.arctosdesign.com%2Fsilverstripe%2F&fl_ev=0&lang=en&intl=uk" width="0" height="0" alt="" /></span>';
20
21document.write(b_txt);