CSS - Cursor Color

I'm trying to change the cursor when a user mouses over an image.

Code:

cursor:hand

Works perfect in IE, but the cursor tag doesn't respond at all in Firefox.

I've been able to "trick" Firefox when using onClick JS links by putting href="#".

hello,

i'm placing a custom cursor on a stylesheet like so:

body { cursor: url(normal.cur), default; }

and a weird effect appeared on internet explorer... when the cursor is over any layers or images (i guess, over any actual elements), the custom cursor appears. but when it's on an empty area, say the page background, the default cursor appears instead. how can i fix this (while trying to maintain the default cursors for every other browser)?

thanks for any help!

I have a navigation list over which I want the cursor to change from vertical line to a hand. Has the hand cursor been deprecated? I tried
Code:

style.cursor='hand'

with both onmouseover and onmousehover. Neither works.

Hi

I've got a testpage, with everything removed except the problem which occurs in Firefox
http://ied.gospelcom.net/tester.php

There is a mouseover popup, which is toggled from hidden to visible by onmouseover on some of the table cells. The CSS for this is
#reportalert {visibility:hidden;}

This is not a javascript problem because it happens with js disabled. I have removed the JS toggle script from this page, so you won't even see this happen.

As soon as I have the div with id="reportalert" anywhere on the page, its presence prevents a cursor appearing in the textarea. It does, in fact, have focus, because you can type in it. But it is disconcerting not to appear to have focus.

It is as if the 'visibility:hidden' of the div somehow leaks out to affect the cursor. I have tried all sort of things, such as putting visibility:visible on the text area, or its whole TD.

Any other ideas I could try?

thanks

Tony

When you go near a link the cursor flickers and then goes back to default, cant get it to show normally for any link. Works on my windows PC but not on my Mac

Even tried a{ cursor:pointer; } but the same thing happens...

http://pd-scammell.co.uk/site/

Any ideas?

Thanks.

When my cursor passes over the links on the top of my page (not clicking a link, just passing the cursor over the link), the title jumps from its position directly under the links to a position to the right of the links.

Since you are giving me help, I want to make this as easy for you as I can. I have posted a screen shot of exactly how my header looks before and after passing the cursor over the links.

www.middle-age-guy.com/forum-css-help_images.html


Here is the relevant css. I've separated and labeled the css so that you can see how it flows down the page.

___________________________________________

#header {
width: 998px;
margin: 0 auto;
}

#header .container {
background:url(images/head_pat.jpg) left top repeat-x;
height: 200px;
}

/* -- links along the top of the page (Home,

MAGman Lifestyles, etc. --*/

.topline {
}

ul.menu li.page_item {
float: left;
display: inline;
font-size:12px;
margin-top: 25px;
}


ul.menu li.page_item a {
color:#000!important;
text-decoration: none;
padding:25px 0 0px 0px;
margin-right: 15px;
list-style-type: none;
}

ul.menu li.page_item a:hover {
color: #fff!important;
text-decoration:none;
background:url(images/menu_hover.gif) left repeat-x;
}


ul.menu li.current_page_item a {
color: #fff!important;
text-decoration:none;
background:url(images/menu_hover.gif) left repeat-x;
}

/* -------------------- Image on right side of header ---------*/

#magmanheadshot {
padding:0;
margin:25px 50px 20px 0;
float:right;
width:160px;
color:#003e4f;
}

/*--------------- Title - Middle-Age-Guy.com --------------*/

#headline {
width:450px;
margin-top: 20px;
}


#headline h1 {
display: block;
clear:left;
font-size:30px;
margin-left: 20px ;
margin-bottom: 5px;
color:#FFFFFF;
font-weight:normal;
}


/* ------------- Tagline below the title --------------*/
.desc_l {
background:url(images/desc_l.gif);
width:10px;
height:27px;
float:left;
margin-left: 25px;

}


.desc {
background:url(images/desc_pat.gif);
height:27px;
float:left;
font-size:14px;
line-height:25px;
font-weight:normal;
color:#FFFFFF;
}



.desc_r {
background:url(images/desc_r.gif);
width:10px;
height:27px;
float:left;
}



.magmandatingsystem {
margin: 10px 0 0 0;
font-size: 12px;
padding: 0 0 0 23px;
float: left;
width: 400px;
}

/* --------------------- Membership login link -----*/

.login {
font-size: 18px;
color:#FFFFFF;
text-decoration: none;
float: right;
margin-top: -80px;
margin-right: 50px;
list-style-type: none;
}

.login a {
color:#FFFFFF!important;
text-decoration: none;
}

.login a:hover {
color:#FF0000!important;
text-decoration:none;

}

.join {
font-styleblique;
font-size: 9px;
font-weight: bold;
}

.join a {
text-decoration:underline !important;
color:#ff0000!important;
}

.join a:hover {
color:#0099FF!important;
}

/* ------------ End of Header -*/

_______________________________________

Here is the relevant html from header.php

<div id="header">

<div class="container">

<div class="topline">

<ul class="menu">
<li class="page_item"> <a href="(URL address blocked: See forum rules)">Home</a></li>

<li class="page_item">
<a href="(URL address blocked: See forum rules)/?page_id=89"
title="General information foundational to success in all other areas">MAGman Lifestyle</a>
</li>

<li class="page_item">
<a href="(URL address blocked: See forum rules)/?page_id=89"
title="One of the three Pillars of any man's life - his relationships with others">Women & Relationships</a>
</li>

<li class="page_item">
<a href="(URL address blocked: See forum rules)/?page_id=89"
title="The Pillar of a sound body is a middle age guy's call to reality">Health & Fitness</a>
</li>

<li class="page_item">
<a href="(URL address blocked: See forum rules)/?page_id=89"
title="A man's third Pillar is his ability to do battle in the business world.">Business & Wealth</a>
</li>

<li class="page_item">
<a href="(URL address blocked: See forum rules)/magman-blog"
title="MAGman's Blog">Blog</a>
</li>

<li class="page_item">
<a href="<?php if($db_feedburner_address) { echo $db_feedburner_address; } else { bloginfo('rss2_url'); }?>">Subscribe to RSS</a>
</li>


</ul>
</div> <!-- end #topline -->



<div id="magmanheadshot">
<img src="/wp-content/themes/blog-design-studio-newblue/images/mag_man4-Head-shot.gif" />
</div>


<div id="headline">


<h1><?php bloginfo(''); ?></h1>

<div>

<div class="desc_l"></div>
<div class="desc">The #1 Personal Development Website for Middle Age Guys</div>
<div class="desc_r"></div>


<div class="magmandatingsystem"><a href="(URL address blocked: See forum rules)/?page_id=176">Read more</a> about the <a href="(URL address blocked: See forum rules)/?page_id=176"><span style="color:#FF0000!important">MAGman Dating System</span></a> for Middle Age Guys</div>


<!-- end #headline -->

<div class="login"><a href="(URL address blocked: See forum rules)/?page_id=89">Members' Login</a>

<p class="join"><a href="(URL address blocked: See forum rules)">Click here</a> to become a member.</p>
</div>

</div> <!-- end .container -->

</div> <!-- end .header -->
______________________________________________

Finally, this is the source code

________________________________________________

<div id="header">

<div class="container">

<div class="topline">

<ul class="menu">
<li class="page_item"> <a href="(URL address blocked: See forum rules)">Home</a></li>

<li class="page_item">
<a href="(URL address blocked: See forum rules)/?page_id=89"
title="General information foundational to success in all other areas">MAGman Lifestyle</a>
</li>

<li class="page_item">
<a href="(URL address blocked: See forum rules)/?page_id=89"
title="One of the three Pillars of any man's life - his relationships with others">Women & Relationships</a>
</li>

<li class="page_item">
<a href="(URL address blocked: See forum rules)/?page_id=89"
title="The Pillar of a sound body is a middle age guy's call to reality">Health & Fitness</a>
</li>

<li class="page_item">
<a href="(URL address blocked: See forum rules)/?page_id=89"
title="A man's third Pillar is his ability to do battle in the business world.">Business & Wealth</a>
</li>

<li class="page_item">
<a href="(URL address blocked: See forum rules)/magman-blog"
title="MAGman's Blog">Blog</a>
</li>

<li class="page_item">
<a href="(URL address blocked: See forum rules)/feed/">Subscribe to RSS</a>
</li>


</ul>
</div> <!-- end #topline -->



<div id="magmanheadshot">
<img src="/wp-content/themes/blog-design-studio-newblue/images/mag_man4-Head-shot.gif" />
</div>


<div id="headline">


<h1>Middle-Age-Guy.com</h1>

</div>

<div class="desc_l"></div>
<div class="desc">The #1 Personal Development Website for Middle Age Guys</div>
<div class="desc_r"></div>


<div class="magmandatingsystem"><a href="(URL address blocked: See forum rules)/?page_id=176">Read more</a> about the <a href="(URL address blocked: See forum rules)/?page_id=176"><span style="color:#FF0000!important">MAGman Dating System</span></a> for Middle Age Guys</div>


<!-- end #headline -->

<div class="login"><a href="(URL address blocked: See forum rules)/?page_id=89">Members' Login</a>

<p class="join"><a href="(URL address blocked: See forum rules)">Click here</a> to become a member.</p>
</div>

</div> <!-- end .container -->

</div> <!-- end .header -->


Thanks for any help you can bring.

Scott

I am trying to use CSS so that when a user hovers their mouse over a submit button, they get a "hand" or "pointer" instead of the default arrow. Below is an example page to demonstrate what I am doing. It works fine in the latest version of Internet Explorer and Mozilla Firefox, but not in Opera 7.54. In Opera 7.54, the cursor changes when I hover over the border of the button, but when I move to the center of the button it goes back to an arrow. Does Opera 7.54 support this style properly or am I doing something wrong?

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="author" content="dr0n3" />
<style type="text/css">

/* I have read that I should use pointer, then hand so it is compatible across a range of browsers, but this still doesn't work properly in Opera 7.54 */

.button
    {
    cursor: pointer;
    cursor: hand;
    }

</style>
</head>

<body>
<form action="page.php" method="post">
<p><input type="submit" name="submit" value="Test" class="button" /></p>
</form>
</body>

</html>

Is it possible to change the mouse cursor to a "hand" when hovering over a <input type="submit" /> ?

Thank you

Code:

<style>
<!--
BODY{
	cursor:url("Hand.USA.cur");
	}

a, a:hover {
	cursor:url("Hand.USA.cur");
	}

-->
</style>

I'm using the above code to display an icon that is replacing the default arrow. This only seems to work in Internet Explorer 6+. Would anyone know another way to display an image or icon either through a url (http://www.blah.com/img.jpg) or .cur or .ani that will work in Mozilla, and Netscape ?

Thanks,

Shawn

Hi im new, I've got a problem and I'm stumped as to why it's happening. I've got several lists on my page with link items. They all work fine, but when I hover over the links in my navbar in chrome and safari, the cursor turns to a text one rather than a hand. This means I can't actually click on the link. However, there are other lists on the page that work fine, and they all work in Firefox. Does anyone know why this is occurring?

You can view the pages he

andrewcharlton.co.uk/gaming_and_gambling2/ggbusinessplans.html

(Can't seem to post a proper link as I am a new user)

It's the about, contact links in the header that dont work.

hmm.

Would be grateful if anyone knows the answer. Thanks!

Real odd one here. Take a look at http://www.moxiegirlz.com/?section=moxiegirlz

Note that you can click on one of the characters at the bottom to see their info. But when you do so, the characters no longer get the "hand" pointer icon (in FF and Safari, haven't tested IE). I've tried applying cursor:pointer directly to the a tags, though one shouldn't need to, and still nada. Somehow, calling a jscript in the href is killing the hand pointer. Anyone know why?

hello,

about the well-known color warnings (and in the best interest of good accessibility practices) is setting "background-color: inherit" a proper solution? it supresses the errors, but does it solve the problem of having good contrast between different elements/the use of custom stylesheets?

i'm asking because i have a stylesheet with different classes for text which are used over different background-colors (from the parent elements). so unless i make a class for each possible application of these text styles, i don't see a way to specify a fixed background-color...

i hope i explained my issue properly...
thanks for any thoughts or suggestions on this

I'm making a game that revolves around four teams. For developmental purposes, I made the team colors blue, red, green, and yellow. And now I'm at the stage where I'm designing a layout. The theme is set in the 1800's, and my first idea was to have a different color scheme for each team (in accordance with their team color,) but my layouts ended up having nothing to do with the 1800's -- just colors (I want to give a very real effect to this website.) So I tried making a universal layout with a sort of tea-stained, burnt edges, parchment look, with a black background, but I had trouble making it tile nicely (partly the burnt edges, partly the stains in the paper.) So this is where I am. I need help designing a layout! I can change the team colors to whatever, I have beginner/intermediate photoshop skills (though, I'm quite competent,) and all suggestions are warmly welcomed!

Hi,
Im trying to validate with CSS 3, but am getting one warning, which I really want to get rid of:

Code:

body {
  color: #000000;
  background-color: #ffffff;
  font-family: sans-serif;
  font-size: 15px;
}
#header {
  clear: both;
}
#topmenu {
  width: 100%;
  height: 30px;
  color: #ffffff;
  background-color: #990000;
  font-family: sans-serif;
  font-size: 20px;
  font-weight: normal;
  padding-top: 1px;
  padding-bottom: 1px;
  padding-left: 1px;
  clear: both;
}
#topmenu a {
  width: 150px;
  height: 28px;
  color: #ffffff;
  background-color: #990000;
  text-align: center;
  text-decoration: none;
  border-right: 1px solid #ffffff;
  padding-top: 2px;
  float: left;
}
#topmenu a:hover {
  width: 150px;
  color: #990000;
  background-color: #ffffff;
  text-align: center;
  text-decoration: none;
  border-right: 1px solid #990000;
  float: left;
}

#body {
  color: #000000;
  background-color: #ffffff;
  margin: 10px 0px 10px 0px;
  clear: both;
}
#footer {
  width: 100%;
  color: #000000;
  background-color: #ffffff;
  font-family: sans-serif;
  font-size: 12px;
  font-weight: normal;
  text-align: center;
  border-top: 2px solid #990000;
  padding-top: 5px;
  clear: both;
}
#footer a {
  color: #990000;
  background-color: #ffffff;
  font-weight: normal;
  text-decoration: none;
}
#footer a:hover {
  color: #990000;
  background-color: #ffffff;
  font-weight: normal;
  text-decoration: underline;
}








#leftmenu {
  color: #000000;
  background-color: #ffffff;
  width: 19.5%;
  padding-right: 0.5%;
  float: left;
}
#contents {
  color: #000000;
  background-color: #ffffff;
  width: 58.5%;
  padding-left: 0.5%;
  padding-right: 0.5%;
  float: left;
}
#rightmenu {
  color: #000000;
  background-color: #ffffff;
  width: 19.5%;
  padding-left: 0.5%;
  float: right;
}




.contentbreaker {
  color: #000000;
  background-color: #ffffff;
  width: 100%;
  height: 10px;
  clear: both;
}


.menubreaker {
  color: #000000;
  background-color: #ffffff;
  width: 100%;
  height: 10px;
  clear: both;
}



.footerbreaker {
  color: #000000;
  background-color: #ffffff;
  width: 100%;
  height: 2px;
  clear: both;
}


.menutoptitle {
  width: 100%;
  height: 26px;
  color: #ffffff;
  background-color: #990000;
  font-family: sans-serif;
  font-size: 19px;
  font-weight: bold;
  text-align: center;
  border-bottom: 1px solid #ffffff;
  padding-top: 1px;
  padding-left: 1px;
  padding-right: 1px;
}
.contenttoptitle {
  width: 100%;
  height: 26px;
  color: #ffffff;
  background-color: #990000;
  font-family: sans-serif;
  font-size: 19px;
  font-weight: bold;
  text-align: center;
  border-bottom: 1px solid #ffffff;
  padding-top: 1px;
  padding-left: 1px;
  padding-right: 1px;
}


.menu {
  width: 100%;
  color: #000000;
  background-color: #eeeeee;
  font-family: sans-serif;
  font-size: 15px;
  border-left: 1px solid #990000;
  border-right: 1px solid #990000;
  float: left;
}
.menu a {
  width: 98%;
  height: 19px;
  color: #000000;
  background-color: #eeeeee;
  font-weight: normal;
  text-decoration: none;
  border-bottom: 1px solid #990000;
  padding-left: 2%;
  float: left;
}
.menu a:hover {
  width: 98%;
  height: 19px;
  color: #ffffff;
  background-color: #990000;
  font-weight: normal;
  text-decoration: none;
  border-bottom: 1px solid #990000;
  padding-left: 2%;
  float: left;
}




.menucontent {
  width: 96%;
  color: #000000;
  background-color: #eeeeee;
  font-family: sans-serif;
  font-size: 15px;
  border-left: 1px solid #990000;
  border-right: 1px solid #990000;
  border-bottom: 1px solid #990000;
  padding-bottom: 5px;
  padding-left: 2%;
  padding-right: 2%;
  float: left;
}
.menucontent a {
  color: #990000;
  background-color: #eeeeee;
  font-weight: bold;
  text-decoration: underline;
}
.menucontent a:hover {
  color: #990000;
  background-color: #eeeeee;
  font-weight: bold;
  text-decoration: none;
}




.subcontentright {
  color: #000000;
  background-color: #ffffff;
  text-align: right;
}

.content {
  width: 98%;
  color: #000000;
  background-color: #eeeeee;
  font-family: sans-serif;
  font-size: 15px;
  border-left: 1px solid #990000;
  border-right: 1px solid #990000;
  border-bottom: 1px solid #990000;
  padding-left: 1%;
  padding-right: 1%;
  padding-bottom: 5px;
  float: left;
}
.content a {
  color: #990000;
  background-color: #eeeeee;
  font-weight: bold;
  text-decoration: none;
}
.content a:hover {
  color: #990000;
  background-color: #eeeeee;
  font-weight: bold;
  text-decoration: underline;
}



.input {
  color: #000000;
  background-color: #ffffff;
  width: 100%;
  height: 13px;
}


.menuformcontainer {
  color: #000000;
  background-color: #ffffff;
  width: 100%;
  padding-top: 5px;
  padding-bottom: 5px;
  clear: both;
}

.menuformsubcontainer {
  color: #000000;
  background-color: #ffffff;
  width: 100%;
  clear: both;
}

.menuformlabels {
  color: #000000;
  background-color: #ffffff;
  width: 50%;
  padding-top: 2px;
  padding-bottom: 2px;
  float: left;
}
.menuformfields {
  color: #000000;
  background-color: #ffffff;
  width: 48%;
  text-align: right;
  padding-top: 2px;
  padding-bottom: 2px;
  padding-right: 2%;
  float: left;
}


.menuformsubmit {
  color: #000000;
  background-color: #ffffff;
  width: 100%;
  text-align: right;
  padding-top: 2px;
  padding-bottom: 2px;
  clear: both;
}

http://jigsaw.w3.org/css-validator/...ut+with_options

Please make sure you select CSS 3 and Warnings = ALL in order to see the 32 warnings...

Thanks!
Yours sincerely,
speedbooster!

Hey everyone,

I am using a template, and I thought i changed all of the colors, however, i am still getting blues and i want them gone. Help me please!

Sarah

CSS:
/* Global Styles */

body {
margin:0px;
}

td {
font:11px arial;
color:#333333;
}

a {
color: #cc0000;
text-decoration:none;
font-weight:bold;
}

a:hover {
color: #990000;
text-decoration:underline;
}

/* ID Styles */

#navigation a {
font:10px arial;
color: #ffffff;
text-decoration:none;
letter-spacing:.1em;
}

#navigation a:hover {
color: #99CCFF;
}

#padding {
padding:20px 5px 20px 5px;
}

#calendar td {
border: 1px solid rgb(0,51,153);
}

#noborder td {
border: 0px;
}

#weekdays th {
font:11px arial;
color: #ffffff;
font-weight:bold;
border: 0px;
padding:2px;
}

#calheader td {
font-weight:bold;
}

/* Class Styles */

.logo {
font:18px times new roman;
color: #990000;
letter-spacing:.3em;
font-weight:bold;
line-height:22px;
}

.tagline {
font:11px times new roman;
color: #CC3300;
letter-spacing:.2em;
}

.smallText {
font:12px times new roman;
color: #CC3300;
line-height:18px;
}

.pageHeader {
font:30px times new roman;
color: #CC3300;
letter-spacing:.1em;
line-height:38px;
}

.bodyText {
font:11px arial;
color:#333333;
line-height:24px;
}

.pageName {
font:20px georgia;
color: #8F0000;
letter-spacing:.1em;
line-height:26px;
}

.subHeader {
font:14px times new roman;
color: #990000;
font-weight:bold;
line-height:20px;
letter-spacing:.1em;
}

.navText {
font:10px arial;
color: #333300;
letter-spacing:.1em;
}