Solved

Div element overlaps in Firefox

Posted on 2013-01-08
2
314 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
Comment Utility
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

Maximize Your Threat Intelligence Reporting

Reporting is one of the most important and least talked about aspects of a world-class threat intelligence program. Here’s how to do it right.

Join & Write a Comment

CSS3 Custom checkboxes This article shows how to style the checkbox form element using only CSS. Works in: Chrome, FF, Safari, Opera, IE9+ Uses modernizr.js to check for :checked pseudo class, falling back to plain old checkboxes (IE8 and bel…
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
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 position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…

771 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

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now