Hi this is probably something that is mentioned a lot .. but even with reading some of the tutorials I'm stuck ..

I have some HTML and css below..

The problem is that it works in IE but in Firefox it only works in the first box but after that the word "details" gets lower and lower and shifts out of the box..

I should know better but I'm stuck and can't find it anymore....

thanks
peanuts

HTML Code:
<div class="box" >
<div class="legend">title1</div>
<div class="boxcontent">
<div class="floatright">
<a href="somewhere">
<img src="someimg"   border=0 class="product_img"  />
       <br /> Details</a></div>
<p class="product_description">description</p>
    </div></div>
 
<div class="box" >
<div class="legend">title2</div>
<div class="boxcontent">
<div class="floatright">
<a href="somewhere">
<img src="someimg"   border=0 class="product_img"  />
       <br /> Details</a></div>
<p class="product_description">description</p>
    </div></div>
 
 
and ofcourse some css to do layout and styling

Code:
            .box {
            font-family:verdana,sans-serif;
            border-width:1px; 
            border-style:solid; 
            border-color:white;
            padding: 0px 10px 10px 10px;
            margin-top:15px;
            margin-right:10px;
            font-size: 14px;
            }
            .box h1{
            margin-top:25px;
            margin-bottom:15px;
            font-size: 12px;
            font-family:verdana,sans-serif;
            font-weight:bold;
 
            }
 
            .product_detail {
             font-family:verdana,sans-serif;
             font-size:10px;
             padding:0px;
             margin-top: 1px; 
             margin-left: 0px; 
             margin-right: 0px; 
             margin-bottom: 0px;
            }
            .product_description {
                font-family:verdana,sans-serif;
             font-size:10px;
             padding:10px;
             margin-top: 0px; 
             margin-left: 0px; 
             margin-right: 0px; 
             margin-bottom: 0px;
            }
 
            .product_img {
            float: right;
   font-family:verdana,sans-serif;
            font-size:60&#37;;
            width: 90px;
   margin: 0 0 10px 10px;
   background-color: transparent;
   padding: 10px;
   }
.floatright
{
float: right;
width:20%;
background-color: transparent;
display:block;
font-size:60%;
color:inherit;
font-family:verdana,sans-serif;
text-align:center;
}
 
 
            .legend {
            font-family:verdana,sans-serif;
            display:inline;
            padding:5px;
            font-weight:normal;
            font-size:13px;
            height:20px;
            position:relative;
            z-index:101;top:-12px;
            background-color:#fff;
            color:inherit;
            }
 
            .boxcontent
            {
            font-family:verdana,sans-serif;
 
            min-height:100px;
     height:auto !important;
     height:0px;
            }