tags:

views:

37

answers:

2
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js" type="text/javascript"></script>
<style type="text/css">
.user-bg {
background:-moz-linear-gradient(center bottom , #0E0E0E 70%, #9B9B9B 100%) repeat scroll 0 0 transparent !important;
}
.user {
    display:block;
    padding:5px;
    position:absolute;
    width:auto;
    z-index:5;
}

.ui-corner-all {
    -moz-border-radius:4px 4px 4px 4px !important;
}
.ui-corner-all {
    -moz-border-radius:6px 6px 6px 6px;
}
</style>
</head>
<body>
<img src="4cc7ea9c6daee.jpg">
<div class="user ui-corner-all user-bg" id="user-1" style="left: 288px; top: 299px;">   
    <div class="user-avatar-text ui-widget ui-corner-all" id="user-avatar-text-1" style="visibility: visible;">      
        <span class="user-name">Rahul</span><br>      
        <button id="user-info-1" class="ybutton user-info">Details</button>    
    </div>   
    <div class="ui-corner-all user-avatar user-active" id="user-avatar-1" style="visibility:visible;">   
        <div class="ui-corner-all user-avatar-image-bg">    
            <div id="user-avatar-image-1" style="background:url('4cc7ea9c6daee.jpg') no-repeat scroll center center rgb(0, 0, 0);" class="ui-corner-all user-avatar-image">      </div>  
        </div>   
    </div>        
        <div class="user-halo ui-corner-all ui-resizable ui-resizable-autohide" id="user-halo-1" style="visibility: hidden;">
        <div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se" style="z-index: 1001; -moz-user-select: none; display: none;" unselectable="on"></div>
        </div>    
        <div class="user-chat ui-state-error ui-corner-all" id="user-chat-1" style="visibility: hidden;"></div>  
    </div>
</body>
</html>
<script  type='text/javascript'>
$(document).ready(function(){
    var popup_pos=$('#card-208').offset();
    var timer;
    $("#card-208").bind('mouseover',{},function() {

         setTimeout(function() {
            $("#divtoshow").show();
        }, 1000);
     });    
    $("#card-208").bind('click',{},function() {
        $("#card-208").unbind('mouseover');
            alert('click event is triggered');





     });    

    $("#divtoshow").bind('mouseleave',{} ,function() { 
            $("#divtoshow").hide();
     });
});
</script>

hi in this div

my background image is not showing means this div is not visible .

why? please tell me ..

regards

rahul

A: 

Because the div has no content, no height and no width it is rendered as being 0x0 pixels so there is no space to display the image in.

The image is, however, content (the avatar conveys information to visitors) so you should be using an <img> element and not a CSS background-image property for this.

David Dorward
A: 

It works but only in Firefox, because the -moz prefix is a firefox specific vendor prefix.

also you have your <script> block outside <html>. Move it inside.

See your sample code working here: http://jsbin.com/urupu3

Moin Zaman