Question

I have this problem I can’t solve,
I’m trying to add a zoom-in/out cursor to some divs on a site
the .l image has a nice zoom-in cursor, upon click, a new .esc div is loaded (as a lightbox)

.l{
cursor: -webkit-zoom-in; cursor: -moz-zoom-in;
}
.esc {
 cursor: -webkit-zoom-out; cursor: -moz-zoom-out;
}

#media{
 cursor:default;
}

suppose that the #media div is contained inside the .esc div. the #media div has some areas in which there’s literally nothing, and in those areas the mouse cursor is not :default, but -webkit-zoom-out.

I still haven’t found a way to override this problem, any idea?

-------------------------
|.esc                   |
|    ----------------   |
|   |  #media       |   |
|   | -----  ---    |   |
|   | |   | |   |   |   |
|   | |   | |   |   |   |
|   | |   | -----   |   |
|   | |   |    *    |   |
|   | |   |         |   |
|   | -----         |   |
|    ----------------   |
-------------------------

* here it should be cursor:default; but it’s -moz-zoom-out

here’s a jsfiddle for it: http://jsfiddle.net/mmbFu/

Answer 1

Ok check it out, look through your code and look for these lines:

               <a href="/random.php?media=media" style="color:#91BD09">RANDOM</a>
            </div>
         </div>
      </div>

Its very near the bottom, and that last div? Thats the closing tag for your #media.
Now do this:

               <a href="/random.php?media=media" style="color:#91BD09">RANDOM</a>
            </div>
         </div>
      </div>
<div style="clear:both"></div>

Insert that div and it will always clear other elements according to the normal flow of the page. Hope it works for you.