Question

For the same markup, on two different pages, there’s a discrepancy where a hidden div will popup and show itself based on the position of the mouse cursor. Basically, div.blurb will popup way off in the corner on page 1, whereas on page 2 it shows up near the cursor where it’s supposed to. Page 2 is missing bolded elements below due to the different layout it has.

Markup hierarchy (bold indicate those that are present on page 1 but not page 2):

• html
• body
• div#cn-body-inner-2col
• div#cn-cols
• div#cn-centre-col
• div#cn-center-col-inner
• table.plainTable
• tbody
• tr
• td
• div#contact_sheet
• div.box
• a
• img

My markup:

<div id="contact_sheet">
    <div class="box">
        <a href=""><img /></a>
        <div class="blurb">
        </div>
    </div>
    <div class="box">
        <a href=""><img /></a>
        <div class="blurb">
        </div>
    </div>
    ... 
</div>

CSS for markup:

#contact_sheet{
    margin-top: 50px;
}

#contact_sheet .box {
  width: 150px;
  margin: 5px;
  padding: 5px;
  float: left;
  border: 1px solid #887767;
  text-align: center;
  background-color: #fff;
}

#contact_sheet .box a img{
    height: 100px;
}

#contact_sheet .box .blurb {
    position:absolute;
    display:none;
    z-index:9999;
    background-color: #fff;
    color:#000;
    border: 1px solid black;
    width: 300px;
    text-align: left;
}

jQuery:

$(document).ready(function(){
        $("#contact_sheet div.box").bind("mousemove", function(event) {
        $(this).find("div.blurb").css({
        top: (event.pageY) + "px",
        left: (event.pageX - 150) + "px"
        }).show();
    }).bind("mouseout", function() {
        $("div.blurb").hide();
    });
});

Is the following CSS (included within the layout) the problem to my popup hovering further away on page 1 than it should? I used Chrome to go through the hierarchy and grabbed all the styles related to positionning from the bolded items in the markup hierarchy mentionned above.

#cn-body-inner-2col #cn-centre-col {
    margin-right: -100%;
}

#cn-centre-col, #cn-centre-col-gap {
    float: left;
}

#cn-centre-col {
    width: 100%;
}

#cn-centre-col, #cn-head, #cn-foot, #cn-left-col, #cn-right-col {
    position: relative;
}

Bad:
https://i.stack.imgur.com/BAzwW.png

Good:
https://i.stack.imgur.com/YWCI9.png

What I’ve tried:

• Adding position: static to my contact_sheet ID – didn’t work

Answer 1

I think your problem is the

float:left; 

And the

position:relative;

in your #cn-centre-col ID

It make a huge difference for positioning a popup inside it