[EC-CUBE] V 2.4.3
[レンタルサーバ] infitoPLUS
[OS] Windows XP
[PHP] Version 5.2.9-2
[データベース] Mysql v 5.0.83
[ブラウザ] Firfox バージョン3.6.2

商品詳細ページのサブ画像を横並びにする。
サブタイトルは削除致しました。サブイメージのみを横並びにしようと試しています。既に質問された方がいたのですが、解決に至っておりません。
単純にdetail.tplに<ul>,<li>要素をたして、cssにてfloat:left;を指定すれば良いかと思いましたが、うまく反映されません。
＞detail.tplにて

<ul>
<li>
<a href="<!--{$arrFile[$lkey].filepath}-->" class="colorbox"rel="example1">
<!--{/if}-->
<!--サブ画像-->
<img src="<!--{$arrFile[$key].filepath}-->" alt="<!--{$arrProduct.name|escape}-->"
<!--{* width="<!--{$smarty.const.NORMAL_SUBIMAGE_WIDTH}-->" height="<!--{$smarty.const.NORMAL_SUBIMAGE_WIDTH}-->" />*}-->
<!--{if $arrFile[$lkey].filepath != ""}-->
</a>
</li>
</ul>

＞products.cssにて

div.subphotoimg ul li {
float: left;
display: inline;
width: 202px;
}

以上のように書いても左側に縦に表示されてしまいます。
sub_image1,sub_image2等を使用する方法もあるのかと思いますが、指定の仕方が良く分かりません。
実装されている方など、ﾄﾞの様に指定しているのでしょうか？
どなたか、良い方法など教えて下さい。お願いします。