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

problem with overlapping div

I have a footer in a div, and on 1 page, it's overlapping another div with clicks.
I don't have control over that div with the clicks, just the footer.

What can I add on that footer div, to allow me to click on the div under it?
0
rivkamak
Asked:
rivkamak
  • 3
  • 2
  • 2
  • +1
1 Solution
 
BlueMurderCommented:
you can try...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
                      "http://www.w3.org/TR/html4/strict.dtd">
<html><body>
<div style='background-color: yellow; width: 70%;
            height: 100px; position: relative;'>
    Outer
    <div style='background-color: green;
                position: absolute; left: 0; width: 100%; bottom: 0;'>
        <div style='background-color: magenta; width: 100px;
                    height: 30px; margin: 0 auto; text-align: center'>
            Inner
        </div>
    </div>
</div>
</body>
</html>

Open in new window

0
 
rivkamakAuthor Commented:
I don't understand how that will allow me to click on the lower div?
You can view my example here:
http://www.oorah.org/vsk2/audio/

you can see all the way on the bottom, the pagination number 1 2 3 -. can not be clicked except it you hit the tippy top of the number.
0
 
Hugh McCurdyCommented:
Overlap how?  Vertically or horizontally?

In CSS you could try the clear attribute.  Here's an example in context.  You don't need my color and text-align attributes.  Just showing you some context.

div.footer
{
  color			: black;
  clear			: both;
  text-align		: center;
}

Open in new window

0
Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

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

 
rivkamakAuthor Commented:
I tried clear both and it didn't help. I'll put it back on the page so that you can see.
0
 
BlueMurderCommented:
Do they have to overlap?  my point was to drive the footer to the actual bottom of the page.
0
 
LZ1Commented:
First the CSS for the footer is wrong.  2nd you have multiple duplicate styles for the same elements(#footer, #footerInt, etc.).  

You have z-index's on elements that don't need it.  The main problem is that you have margin and padding which is actually overlapping the pagination.  

Your going to have a lot to change in order to get it correct.
0
 
LZ1Commented:
But if you want a simple and quick fix you can do this:

.pagination_item {
    margin: 0 auto;
    padding: 4px 0;
    position: relative;
    text-align: center;
    z-index: 2147483647;
}
0
 
Hugh McCurdyCommented:
Yes, clear only works for horizontal.

I'm not sure.  I'd start by doing something that's not elegant.  I'd put one or two <br /> statements in front of your area.  That may not be the best solution but it might be good enough if it works.

You could also experiment with margin-top.  Say 20px just to start, to see what happens.

I also wonder why you have a div inside a div for the footer.  (But I don't think that's the problem.)
0
 
Hugh McCurdyCommented:
Thanks for the points.  Page looks fine in Firefox/Linux BTW.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Cloud Class® Course: Microsoft Exchange Server

The MCTS: Microsoft Exchange Server 2010 certification validates your skills in supporting the maintenance and administration of the Exchange servers in an enterprise environment. Learn everything you need to know with this course.

  • 3
  • 2
  • 2
  • +1
Tackle projects and never again get stuck behind a technical roadblock.
Join Now