Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    Regular Coder
    Join Date
    Nov 2010
    Posts
    390
    Thanks
    48
    Thanked 1 Time in 1 Post

    Cursor Pointer Not Working

    Live Demo: Untitled Document

    Where?
    Code:
    #Fundraiser_Categories .button {
    	cursor: pointer;
    	float:left;
    	background:#09C;
    	border-radius: 10px;
    	-moz-border-radius: 10px;
    	-webkit-border-radius: 10px;
    }
    I've tried in a couple of places, I just cannot seem to get a different pointer to show on my page... Any help please?

    Best Regards,
    Tim

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello MrTIMarshall,
    That bit you posted should work fine, there must be some other problem you don't show us.
    Try validating your code, maybe that will find the error. See about validation in my signature line below.

    Demo:
    Code:
    <!DOCTYPE HTML>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Untitled Document</title>
    <style type="text/css">
    html, body {
    	margin: 0;
    	font: 100% "Trebuchet MS", Arial, Helvetica, sans-serif;
    	color: #000;
    	background: #fc6;
    }
    #Fundraiser_Categories {
    	height: 600px;
    	width: 800px;
    	margin: 30px auto;
    	background: #999;
    }
    #Fundraiser_Categories .button {
    	cursor: pointer;
    	margin: 30px; /*for demo*/
    	float: left;
    	background: #09C;
    	border-radius: 10px;
    	-moz-border-radius: 10px;
    	-webkit-border-radius: 10px;
    }
    </style>
    </head>
    <body>
        <div id="Fundraiser_Categories">
    		<div class="button">Button</div>
        <!--end Fundraiser_Categories--></div>
    </body>
    </html>
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    Regular Coder
    Join Date
    Nov 2010
    Posts
    390
    Thanks
    48
    Thanked 1 Time in 1 Post
    Problem has been found, however I do not know how to resolve...

    My overlay image:


    is over the content area, however I want the content area to be behind the curtains... Is there a way to allow where is is no graphics to be selectable and whatnot?

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by MrTIMarshall View Post
    is over the content area, however I want the content area to be behind the curtains... Is there a way to allow where is is no graphics to be selectable and whatnot?
    Give your anchor a size (height/width) and absolute position it where you want.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #5
    Regular Coder
    Join Date
    Nov 2010
    Posts
    390
    Thanks
    48
    Thanked 1 Time in 1 Post
    Quote Originally Posted by Excavator View Post
    Give your anchor a size (height/width) and absolute position it where you want.
    Set Styles
    Code:
            .Overlay {
                position: absolute;
                min-width: 100%;
                background-image: url(images/Overlay.png);
                background-size: cover;
                background-repeat: no-repeat;
                z-index: 10;
            }
    JQuery
    Code:
    $('.Overlay').css('min-height', BodyImageHeight + 'px');
    It does have a height and width and is set to be absolute

  • #6
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    .Overlay is not an anchor.
    Please explain exactly what you want to be clickable, I'm assuming "selectable and whatnot" means a link to somewhere or something.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #7
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    If you change the stacking order with z-index to bring .button to the top, the cursor will change to pointer but that's kind of misleading since it is not a link.
    See what I mean with this -
    Code:
    #Fundraiser_Categories .button {
        background: none repeat scroll 0 0 #0099CC;
        border-radius: 10px;
        cursor: pointer;
        float: left;
        position: relative;
        z-index: 10;
    }
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #8
    Regular Coder
    Join Date
    Nov 2010
    Posts
    390
    Thanks
    48
    Thanked 1 Time in 1 Post
    It is going to be a link and I know this is a way but is there not a way to allow anything which is transparent to be selectable through my overlay?

  • #9
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by MrTIMarshall View Post
    It is going to be a link and I know this is a way but is there not a way to allow anything which is transparent to be selectable through my overlay?
    You should Google around a bit to see how z-index works and get a better understanding of the stacking order.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •