Solved

Div element overlaps in Firefox

Posted on 2013-01-08
2
318 Views
Last Modified: 2013-01-09
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
Comment
Question by:SWB-Consulting
2 Comments
 
LVL 3

Accepted Solution

by:
wadehults earned 500 total points
ID: 38757127
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

Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Error in script 11 56
would like the bottom of this page to be smaller 3 28
Border and image sizing 5 19
Changing Two Areas of a Page 5 17
Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
This is a how to build your own CSS3 slideshow and when I say CSS3 I mean just CSS with no javascript in sight! There a few examples online of how to do this but most just show you an example without any explanation, others make it more complicat…
In this tutorial viewers will learn how add a full-size background image to a webpage using CSS3. Create a new HTML document with an internal stylesheet.: In CSS, define the html element to have a background image. Use a high resolution image.: In t…
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …

777 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question