CODEWITHSUNDEEP
javascripthtmlcssjspdhtmlx
lukegf
lukegf

Reputation: 2237

DIV element cursor behaves inconsistenly

I have a DIV element on a JSP page whose behavior is defined in the following CSS class:

.toolbarRight .shortcut {
background-position: left center;
background-repeat: no-repeat;
width:16px;
height:16px;
margin:0 8px 0 0;
display:inline;
cursor:pointer;
position:relative;
top:6px;
float:left;
border:none;
}

span.toolbarRight .export {
background-image: url('/images/excel.gif');
}

So basically when you hover over it with the mouse it should change into a pointer. The problem is that it only changes into a pointer over the bottom 1/4 of the element, over the top 3/4 it doesn't. Look at pictures below for illustration of the problem.

Pic 1: mouse cursor is over bottom 1/4 of Excel icon (changes into pointer):

enter image description here

Pic 2: mouse cursor is over top 3/4 of Excel icon (does not change into pointer):

enter image description here

Another thing that's strange is that it only happens in my current screen configuration which includes two DHTMLX grids, one in the top half of the screen, the other on the bottom (look at picture below; Excel icon where problem occurs is circled in yellow):

enter image description here

If I have three grids (two horizontal and one vertical) the problem does not occur:

enter image description here

Anybody know what the reason for this is?

Upvotes: 0

Views: 724

Answers (3)

stephenmurdoch
stephenmurdoch

Reputation: 34613

The other answers might be right, but you might also have a float issue here.

You can force parent containers to wrap their floated children by applying overflow: hidden;. Try that out. If it fails, use a clearfix.

Also, I don't know if the width and height of your .toolbarRight .shortcut class will stick because you have it set to display: inline. Try inline-block or just plain old block when you need to apply width and height to things.

Upvotes: 1

Scott
Scott

Reputation: 706

It is your

position:relative; top:6px;

combo - the element sits 6px lower than where you think. The image may be up higher but the container isn't. Move your pointer to the image, not the container for the image

Upvotes: 0

Joe
Joe

Reputation: 63424

Usually when I have this problem, it's because you have another item's padding overlapping the toolbar (or something else). Since the bottom 1/4 is visible, then odds are something above it is overlapping below slightly.

Upvotes: 1

Related Questions