Solved

Div element overlaps in Firefox

Posted on 2013-01-08
2
325 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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

On Demand Webinar: Networking for the Cloud Era

Did you know SD-WANs can improve network connectivity? Check out this webinar to learn how an SD-WAN simplified, one-click tool can help you migrate and manage data in the cloud.

Question has a verified solution.

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

When writing CSS, there are a few simple rules that will make your life easier.    1. Using ‘* {box-sizing:border-box;}’. Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this tutorial viewers will learn how to define a gradient in CSS. Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Gradient. Define the background as "linear-gradient(to right, #ee3668, black)". Ensure you …
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
Suggested Courses

624 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