CODEWITHSUNDEEP
csshtmlhyperlinkfixed
Warz
Warz

Reputation: 333

Not being able to click a link next to a fixed div.

EDIT: Problem is solved.. I can't believe I didn't think about that to begin with. Solution:

#message-box{position:fixed;bottom: 29px;left:0px;width: 400px;}

---- Original message :

Hi,

Here is the image: http://i242.photobucket.com/albums/ff198/Warz/divchatproblemmodified.png

(it says id=footer there but its supposed to say id=footerbar. Also the bar in the very bottom (where you enter a message, with an id called "statusbar" ) should cover width: 100%; as it already does. )

I'm trying to create a bottom bar on my site with chat. The chat size should be possible to resize (change height). As you can see, I placed a div (msg-top) above the chat, which means, when chat is resized the msg-top should also be moved.

If you take a look at the following image you will see the problem. The <div id="footerbar"> has following settings and hence cover the entire area:

#footerbar {position: fixed;bottom: 0px;left: 0px;right: 0px;}

All the divs are children of #footerbar.

Because of this, if I resize the chat box to height 100% no links can be clicked. Even with small height like on the picture, all links to the right of chat box cannot be clicked...

What can I do to solve this?

Thanks!

The other divs:

/* background opacity */
#opacity-me,#msg-top,#msg-messages,#statusbar {
  background: black;
  color: white; 
  border-top: dotted 1px white;
  opacity: .90;    
  filter: alpha(opacity="90");
  z-index: 200;
  overflow: hidden;
  overflow-y: auto;
}
#statusbar {
  position: relative;
}
#message-box{
  position:relative; 
  width: 400px;
}
#msg-top {
  overflow: hidden;
  border: 0px;
  border: dotted 1px white;
}
#msg-messages {
  padding-left: 4px;    
  padding-right: 4px;    
  height: 100px;    
  border: 0px;
}

Upvotes: 0

Views: 3290

Answers (2)

flumingo
flumingo

Reputation: 513

The Element is below another Element, so you're not able to klick the Link, the Link is still working... just use z-index on footerbar or try to change the footerbar position...

Upvotes: 1

RSM
RSM

Reputation: 15118

give the div id=footer a height, so something like:

#footerbar {position: fixed;bottom: 0px;left: 0px;right: 0px; height:30px;}

this should fix it, just adjust the height accordingly. let me know if this works.

Upvotes: 0

Related Questions