Question

I added carousel in my rails application. Which is working fine in firefox.
But when i saw chrome, I came to know that the position of the “next” button has been changed. I didn’t found any fix till now.

Following is the css for all carousel

.proposal-section .carousel-previous {
  background: url("/assets//previous.png") no-repeat scroll 0 0 transparent;
  position: absolute;
  margin-left: 3px;
  margin-top: 70px;
  z-index: 1000;
}

Chrome shows next button at extreme left of page with this property value, “margin-left: -35;”, but ff is fine.
And ff shows this button out of view(on right hand side) on “margin-left: 950;” but fine in chrome. How do I fix this .

.proposal-section .carousel-next {
  background: url("/assets//next.png") no-repeat scroll 0 0 transparent;
  position: absolute;
  margin-left: -35px;
  margin-top: 71px;
}

.proposal-section .carousel-control {
  overflow:hidden;
  display:inline-block;
  vertical-align:middle;
  width:30px;
  height:32px;
  cursor:pointer;
  line-height:999px;
  zoom:1;
  border:0;
  text-indent:-9999px;
}

.proposal-section .carousel-control:hover {
  -moz-opacity:.7;
  opacity:0.70;
  filter:alpha(opacity=70);
}

.proposal-section .carousel-wrap {
  display: inline-block;
  vertical-align: middle;
  width: 99%;
  border: 3px solid #473161;
  border-radius: 5px;
  height: 174px !important
}

Answer 1

Try this, it will make buttons in both the browsers (may be to all):

.proposal-section .carousel-control {
  overflow:hidden;
  display:inline-block;
  vertical-align:middle;
  width:30px;
  height:32px;
  cursor:pointer;
  line-height:999px;
  zoom:1;
  border:0;
  text-indent:-9999px;
}

.proposal-section .carousel-control:hover {
  -moz-opacity:.7;
  opacity:0.70;
  filter:alpha(opacity=70);
}

.proposal-section .carousel-wrap {
  display: inline-block;
  vertical-align: middle;
  width: 99%;
  border-radius: 5px;
  height: 174px !important
}

.proposal-section .carousel-next {
  background: url("/assets//next.png") no-repeat scroll 0 0 transparent;
  position: absolute;
  margin-left: 5px;
  margin-top: 65px;
  height: 45px;
  width: 23px;
  opacity:0.4;
  filter:alpha(opacity=40);
  -moz-opacity: .4;
}

.proposal-section .carousel-previous {
  background: url("/assets//prev.png") no-repeat scroll 0 0 transparent;
  position: absolute;
  margin-left: -10px;
  margin-top: 65px;
  height: 45px;
  width: 23px;
  z-index: 1000;
  opacity:0.4;
  filter:alpha(opacity=40);
  -moz-opacity: .4;
}