買い物かご近くにiframeで「お茶うけにおすすめ」としてスイーツを表示させようと
していますが、ボックスの右側が切れてしまいます。
何が原因でしょうか。
https://item.rakuten.co.jp/SHOP-URL/ITEM-URL/iframe内のソースは以下の通りです。
<html>
<head>
<base target="_top">
<style type="text/css">
<!--
.box26 {
position: relative;
margin: 2em 0;
padding: 0.5em 1em;
border: solid 3px #76421B;
border-radius: 8px;
width:380px;
}
.box26 .box-title {
position: absolute;
display: inline-block;
top: -13px;
left: 20px;
padding: 0 9px;
line-height: 1;
font-size: 19px;
background: #F9F5EC;
color: #76421B;
font-weight: bold;
}
.box26 p {
margin: 0;
padding: 0;
}
-->
</style>
</head>
<body style="margin:0px;padding:0px;">
<div class="box26">
<span class="box-title">お茶うけにおすすめ</span>
<p><a href="
https://item.rakuten.co.jp/SHOP-URL/ITEM-URL/ITEM-URL/"><img src="https//www.rakuten.ne.jp/gold/SHOP-URL/images/parts/doraosusume.jpg"></a></p>
<br>
<p><a href="
https://item.rakuten.co.jp/SHOP-URL/ITEM-URL/ITEM-URL/"><img src="https//www.rakuten.ne.jp/gold/SHOP-URL/images/parts/youkanosusume.jpg"></a></p>
<br>
<p><a href="
https://item.rakuten.co.jp/SHOP-URL/ITEM-URL/ITEM-URL/"><img src="https//www.rakuten.ne.jp/gold/SHOP-URL/images/parts/kasuteraosusume.jpg"></a></p>
</div>
</body>
</html>
宜しくお願い致します。