Solved

Div blocking content (CSS)

Posted on 2011-09-13
3
416 Views
Last Modified: 2012-06-21
Please visit www.mwebdev.com/hw.html. This site is a CMS site. The dropdown menu is contained in a DIV (240px height). The problem is that, depending on the browser being used, the DIV is blocking the content behind it.

On the page I liked to above:
In Firefox (6.0), you'll notice that you cannot click on the first 3 links because the dropdown menu DIV is blocking it.
In Internet Explorer (9.0), you can click on the links with no problem. The DIV does not block the content.

The funny thing is that on the site's home page, content at the top is not blocked by the DIV. For instance, regardless of the browser, you can click in the Search field in the upper right.

I've been wrestling with this problem for a while. I need some help... Thanks in advance!
0
Comment
Question by:isaacr25
  • 2
3 Comments
 
LVL 8

Accepted Solution

by:
PagodNaUtak earned 500 total points
ID: 36533716
Put display: inline in the .content class as shown below.

#block-superfish-1 .content {
    height: 240px;
    overflow: visible;
    padding: 0 0 0 13px;
    z-index: 100;
    display:inline;
}
0
 

Author Comment

by:isaacr25
ID: 36533775
Wow! This seems to have done the trick. So simple! Thanks!
0
 

Author Comment

by:isaacr25
ID: 36546639
PagodNaUtak,
I spoke too soon. I didn't realize it last night, but when I put in display:inline, the dropdown menus don't show anymore. When you place your mouse over the menu items, the dropdown menus don't expand. Please help. Thanks.
0

Featured Post

How Do You Stack Up Against Your Peers?

With today’s modern enterprise so dependent on digital infrastructures, the impact of major incidents has increased dramatically. Grab the report now to gain insight into how your organization ranks against your peers and learn best-in-class strategies to resolve incidents.

Question has a verified solution.

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

Suggested Solutions

This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
This article will inform Clients about common and important expectations from the freelancers (Experts) who are looking at your Gig.
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 …
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

807 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