Sidebar widget image style over lap

Hello,

I have some understanding of HTML and CSS, but this has me stumped.
using text-widgets to populate the side-bar of my web site, (www.dchoc.com/mobile) #text-8 (above #6) over writes #text-6 image with “Featured Game” where it should have a different image (by smartphone).

When i use firebug to see the styles for the second text-widget, i can see that text-8’s image is there, i can block it, and text-6’s image appears as expected, but the text-widget #8 image disappears.

This is incredibly frustrating! I have included the styles from style.css here for reference (in a code box, because it’s the right thing to do with CSS issues, i’m sure the moderators would agree!)

#text-6 .widget-title {    background:url(images/by-smartphone.gif) no-repeat 0 0;    height:16px; margin-left:42px; margin-top:2px;}
#text-6 .widget-content {background:transparent url(images/widget-content-bg.gif);line-height:29px; overflow:hidden;}
#text-6 {margin-bottom:0px; margin-top:10px;}

(in the img here i tried to superimpose a style upon text-6)
#text-6 .textwidget img {background:url(images/by-smartphone.gif); margin-right:-2px; width:220px; margin-bottom:0px;}

#text-8 .widget-title {	background:url(images/featured-game.gif) no-repeat 0 0;	height:16px; margin-left:50px; margin-top:2px;}
#text-8 .textwidget img {width:220px; }

That’s the styles for these items.

Now firebug says that the li for text-6 is inside text-8 but this is out of my control, as far as i can tell. It also indicates that text-9 (who so far has behaved normally…) is unaffected by changes to text-8.

So i’m clear, my goal is to change the title image on text-6 from Featured game, to the one assigned to it in styles, by-smartphone.

Any help is welcome