css browsers show different...

[peanuts]

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

<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

            .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%;
            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;
            }

[loathsome]

Do you have a link we could check out?

[Centauri]

You aren't clearing your floats :

.boxcontent {
	font-family:verdana,sans-serif;
	min-height:100px;
	overflow: hidden;
}
* html .boxcontent {
	height: 100px;
	overflow: visible;
}

[peanuts]

Hi .. sorry no link .. it's on my test environment

I knew I was forgetting something.. THanks Centauri...