Next Button Interference with Gear icon [#1596530]

I have a Calendar placed in a block, underneath another page. Unfortunately, there appears to be a case of dueling style rules: namely, the gear "edit" icon appears to be interfering with my next bar. This appears on Chrome, Firefox, and IE, and when not in administrator mode.

Gear and Next

My first thought was, "Maybe I could add something to the header to force the next button down a little so they're not on top of each other." Didn't quite work as planned.

Gear and Next with Whitespace

So my next thought is that this is a z-index conflict. But where would I go to edit the z-indices for either of the next button or the gear, or am I off base still?

Comment	File	Size	Author
	Gear and Next with Whitespace.png	11.66 KB	Chris_DWE
	Gear and Next.png	10.67 KB	Chris_DWE

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

Comment #1

Chris_DWE CreditAttribution: Chris_DWE commented 23 May 2012 at 15:40

I found calendar_multiday.php, and tried tweaking little things here and there, but nothing appears to be working. This is the style for the next button.

.view .date-nav-wrapper .date-next {
  -moz-border-radius: 0px 5px 5px 0px;
  border-radius: 0px 5px 5px 0px;
  background: none repeat scroll 0 0 #dfdfdf;
  float: right;
  padding: 5px 0;
  position: absolute;
  right: 0px;
  text-align: right;
  top: 0px;
  width: auto;
  z-index: 1;
  font-size: 12px;
}

Comment #2

alexanderpas CreditAttribution: alexanderpas commented 19 June 2012 at 12:25

This happens because absolute positioning is used (Which I consider a bug on it's own).

here's a style you might like, that goes around this issue.

.view .date-nav-wrapper .date-prev {
    float: left;
    left: 0;
    margin: 0;
    position: relative;
}

.view .date-nav-wrapper .date-next {
    float: right;
    margin: 0;
    position: relative;
}