Div element overlaps in Firefox

On http://navilleauction.auctionserver.net/view-auctions/live-sale/id/16/

The div element at the bottom that says "Catalog" shows up below everything else on Chrome. But in Firefox it overlaps with the "Message Center".

I can only edit the CSS styles not the HTML.

What can I do to make it show up as expected in FF?
SWB-ConsultingAsked:
Who is Participating?
 
wadehultsConnect With a Mentor Commented:
Using FF inspection tool, I found that you need to remove the float element from that region (see below)

.customer-rtb-form .lot-messages {
    margin-top: 3px;
    width: 400px;

}

Open in new window

The extra gap in the code at line 4 was where the float:right was originally. Removal of this attribute presents the 3 boxes as 1 box on top of 2 boxes. Since you aren't able to modify the HTML, this appears to be the easiest solution.

Alternatively, you can add a clear:both element (see below) to the .customer-rtb-form .lot-upcoming CSS:
.customer-rtb-form .lot-upcoming {
    margin-top: 5px;
    clear: both;
}

Open in new window

This method makes FF appear similarly to IE. with 2 boxes over 1 box
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.