• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 338
  • Last Modified:

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?
0
SWB-Consulting
Asked:
SWB-Consulting
1 Solution
 
wadehultsCommented:
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

Featured Post

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now