Display none in css having issue with chrome browser

Discussion in 'CSS' started by cryoffalcon, Mar 3, 2011.

0
  1. #1
    Hi,
    well i am using quicksand and in it i wanted to use tootips but no one on internet helped me by telling how to do so. So, i am now using css technique, the method is very simple css trick, when you hover over the game icons its details appear, and when you hover over the details then the details disappear. The details disappear in IE and firefox but it is not the case with google chrome.
    here is the test page
    http://letseedrop.blogspot.com/2011/01/testing-8.html
    i don't know what i am doing wrong, i also tried to use !important in css but it didn't helped.
    well i am pasting css here too if you don't want to go into the source code

    .demosa {
    position:relative;
    top:0px;
    left:0px;
    margin:0px;
    padding:0px;
    }

    .gamedetailpara {
    text-decoration:underline;
    color:#000000;
    }

    ul.gamecolumns {
    min-height:300px;
    list-style: none;
    margin: 0px;
    padding: 0px;
    }
    ul.gamecolumns li {
    background:url('http://i51.tinypic.com/30v28bb.png') no-repeat;
    position:relative;
    display: inline;
    width: 114px;
    height:118px;
    float: left;
    margin: 8px;
    padding: 0px;
    }
    ul.gamecolumns li:hover {
    z-index: 99;
    }


    ul.gamecolumns li img {
    position:relative;
    top:12px;
    left:12px;
    filter: alpha(opacity=100);
    opacity: 1;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; /*--IE8 Specific--*/
    }
    ul.gamecolumns li:hover img{
    position:relative;
    top: 12px;
    left:12px;
    z-index: 999;
    filter: alpha(opacity=100);
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    }

    ul.gamecolumns li .gamedetails {
    position: relative;
    left: 0px; top: 0px;
    padding: 20px 4px 10px 10px;
    display:none;
    background:#ffffff;
    font:bold 13px "Times New Roman", Times,sans-serif;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    z-index: 99999;
    }

    ul.gamecolumns li .gamedetails:hover {
    display:none;
    }

    ul.gamecolumns li:hover .gamedetails {display: block;}

    ul.gamecolumns li:hover .gamedetails:hover {display: none;}

    thank you in advance.
     
    cryoffalcon, Mar 3, 2011 IP
  2. Cash Nebula

    Cash Nebula Peon

    Messages:
    1,197
    Likes Received:
    67
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Wow, that's a cool plugin. :eek:

    The details disappear in Chrome when I move away from the picture. Have you fix it already? :confused:
     
    Cash Nebula, Mar 16, 2011 IP
  3. cryoffalcon

    cryoffalcon Peon

    Messages:
    102
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    yah i used another method to solve the issue i would have used javascript, but as you can see i am using a plugin which doesn't accept everything easily, you have to add call backs for everything, so what i did is that i increased the distance between the image and details so when the mouse is off the picture it vanishes automatically.
    I am not happy with digital forum, and i stopped coming here to see replies as here people reply thousand years later, i came here as i saw your reply in my email, i am thankful that atleast you wrote something.
    take care
     
    cryoffalcon, Mar 27, 2011 IP