Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

button cursor shows as I beam when used within twitter bootstrap environment

button cursor shows as I beam when used within twitter bootstrap environment

Problem

I have been using twitter bootstrap to build a small blog site for myself and I have recently had to introduce a third party fileupload app into my project. The file uploader has the relevant CSS files to style the "upload button" and a JS element creates the respective markups.

The problem is when I look at my HTML - when my Cursor points towards the "upload button" it looks like an I beam rather than a "hand" and also strangely enough, I see the "hand" cursor on the entire "row" of the upload button, but not on the upload button (over the upload button its an I beam).

I would like to add that on my "pure twitter bootstrap buttons" I do not have this problem, but rather only when I integrate this third party app. I have tried for example changing the cursor parameters, but nothing seems to work. Some relevant code follows:

So, In my HTML, I have:

and my CSS look like this:

.qq-uploader { position:relative; width: 100%; cursor: pointer;}

.qq-upload-button {
  font-family: Qlassik,'Qlassik Medium',fallback_Qlassik,sans-serif;

  display: inline-block;
  *display: inline;
  padding: 10px 10px 10px;
  margin-top:0px;
  margin-bottom: 0;
  *margin-left: .3em;
  font-size: 16px;
  line-height: 10px;
  *line-height: 20px;
  color: #ffffff;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  background-color: #0074cc;
  *background-color: #0055cc;
  background-image: -ms-linear-gradient(top, #0088cc, #0055cc);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0055cc));
  background-image: -webkit-linear-gradient(top, #0088cc, #0055cc);
  background-image: -o-linear-gradient(top, #0088cc, #0055cc);
  background-image: -moz-linear-gradient(top, #0088cc, #0055cc);
  background-image: linear-gradient(top, #0088cc, #0055cc);
  background-repeat: repeat-x;
  border-color: #0055cc #0055cc #003580;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  filter: progid:dximagetransform.microsoft.gradient(startColorstr='#0088cc', endColorstr='#0055cc', GradientType=0);
  filter: progid:dximagetransform.microsoft.gradient(enabled=false);
    -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
          border-radius: 4px;
  filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ffffff', endColorstr='#e6e6e6', GradientType=0);
  filter: progid:dximagetransform.microsoft.gradient(enabled=false);
  *zoom: 1;
  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
     -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
          box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);

}

.qq-upload-button-hover {background:#0055cc;cursor: default;}
.qq-upload-button-focus {outline:1px dotted black;cursor: default;}

.qq-upload-drop-area {
    position:absolute; top:0; left:0; width:100%; height:100%; min-height: 70px; z-index:2;
    background:#FF9797; text-align:center; 
}

.qq-upload-drop-area span {
    display:block; position:absolute; top: 50%; width:100%; margin-top:-8px; font-size:16px;
}

.qq-upload-drop-area-active {background:#FF7171;}

.qq-upload-list {margin:15px 35px; padding:0; list-style:disc;}
.qq-upload-list li { margin:0; padding:0; line-height:15px; font-size:15px;font-family: Qlassik,'Qlassik Medium',fallback_Qlassik,sans-serif;}
.qq-upload-file, .qq-upload-spinner, .qq-upload-size, .qq-upload-cancel, .qq-upload-failed-text {
margin-right: 7px;
}

.qq-upload-file {}
.qq-upload-spinner {display:inline-block; background: url("loading.gif"); width:15px; height:15px; vertical-align:text-bottom;}
.qq-upload-size,.qq-upload-cancel {font-size:15px;}

.qq-upload-failed-text {display:none;}
.qq-upload-fail .qq-upload-failed-text {display:inline;}

The relevant javascript is on here(https://github.com/GoodCloud/django-ajax-uploader/blob/master/ajaxuploader/static/ajaxuploader/js/fileuploader.js) - if that helps.

I would appreciate any tips or guidance you may have to solve the problem.

Problem courtesy of: JohnJ

Solution

try forcing the original cursor with an !important or the other option is overriding it in your global css file.

Seems like the following may be injected via JS as the previous .qq-upload-button has cursor: defined as well.

.qq-upload-button-hover {background:#0055cc;cursor: default;}
.qq-upload-button-focus {outline:1px dotted black;cursor: default;}

Hope that helps lead you...

Solution courtesy of: Disruptive Art

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

button cursor shows as I beam when used within twitter bootstrap environment

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×