テキストにマウスオーバーしたら任意の場所に画像表示させる方法で、

テキストにマウスオーバーしたら任意の場所に画像表示させる方法で、
画像と一緒に文字を表記させたいのですが、添付画像のように文字が
折り返ししてしまい、一列表示出来ません。
記述的には以下の通りです。
>スタイルシート部
/*Credits: Dynamic Drive CSS Library */
/*URL: ******/style/ */

.thumbnail{
position: relative;
z-index: 0;
}

.thumbnail:hover{
background-color: transparent;
z-index: 50;
}

.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: #FFFFFF;
padding: 5px;
left: -1000px;
border: 1px solid gray;
visibility: hidden;
color: black;
text-decoration: none;
}

.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}

.thumbnail:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: 160px;
left: 450px;
}

>HTML部
<a class="thumbnail" href="" title="">ドゥカティGP9 No.27 CASEY STONER<span><img src="57197.jpg" /><br />ドゥカティGP9 No.27 CASEY STONER</span></a>

コピーして応用している為、問題点が分かりません。
教えて下さい。

No.1 回答者： ORUKA1951 回答日時： 2010/06/18 14:44

＞画像と一緒に文字を表記させたいのですが、添付画像のように文字が

折り返ししてしまい、一列表示出来ません。

　確かにCSSにいくつか？？？はありますが、添付画像の様になぜなるかはいまひとつ分かりません。示されたソースのままで折り返されずに表示されます。
　他の部分のspanにきちんと親要素を指定して他のspanに関するプロパティ指定を回避する必要があるような気がします。
　なお、spanは置換要素を含むインライン要素を絶対配置するのでdisplay:blockにしてブロック要素に変更するほうが良いでしょう。