Cursor is now gone..?

[Cball]

Ok, Being new to css/web design I'm learning more and more about how to properly code but it seems as soon as I get one thing working then another stops.
Here's my problem today. Thanks in advance.


When I put in the code like this, the mouse over cursor works great but when I try to do what I think is the correct way then it stops working..

<p><a class="specialLink" style="CURSOR: url('img/test.ani')" href="tools/test.pdf" target="_blank">How to: "Test Test"</a href></p>


New way which (I think is correct)it stops working..

<p><a class="specialLink"
style="
CURSOR: url('img/test.ani')
font-family: 'Arial Black', Arial, sans-serif;
font-size: 140%;
"
href="tools/test.pdf"
target="_blank"
>
Test Test
</a>
</p>

[djr33]

linebreaks in html are usually ignored, but I think in the case above, it should be all on one line. That may be the whole issue.

That, or it might be an issue with having both a class, which sets a style, and literal style tag, which also sets a style.

[Twey]

No, that's fine. style overrides the class, and linebreaks are ignored. However, there is no property named CURSOR (CSS is case-sensitive) and you need to always separate properties with a semicolon (;).

<p>
  <a
    class="specialLink" 
    style="
      cursor: url('img/test.ani');
      font-family: 'Arial Black', Arial, sans-serif;
      font-size: 140&#37;;
    "
    href="tools/test.pdf" 
    target="_blank"
  >
    Test Test
  </a>
</p>

With regard to this:

<p><a class="specialLink" style="CURSOR: url('img/test.ani')" href="tools/test.pdf" target="_blank">How to: "Test Test"</a href></p>

<a href> is not a tag. href is an attribute of the <a> element.

[djr33]

Alright. I'd still recommend removing the linebreaks to stay standard.

[Cball]

Woohoo.. It worked great..


I just added the ; and it worked.

[Twey]

I'd still recommend removing the linebreaks to stay standard.

It's perfectly standard, and improves readability.

[djr33]

Making a tag last several lines improves readability?

Hmm... the better route is giving it a class and placing the CSS in the head, then, if it must be so long.

[Twey]

Agreed.

On the issue of readability, consider:

<a href="something.html" style="background-color: silver;color: black;border: 3px inset silver;display: block;width: 80&#37;;overflow: scroll;white-space: pre;margin: 1em;max-height: 50em;font-family: monospace;padding: 1em;	height: 5em;width: 90%;margin-left: 5%;margin-top: 1em;padding-top: 1em;text-align: center;font-size: 90%;font-style: italic;padding-bottom: 2em;margin-bottom: 2em;">Text</a>

Versus:

<a
  href="something"
  style="
	background-color: silver;
	color: black;
	border: 3px inset silver;
	display: block;
	width: 80%;
	overflow: scroll;
	white-space: pre;
	margin: 1em;
	max-height: 50em;
	font-family: monospace;
	padding: 1em;
	height: 5em;
	width: 90%;
	margin-left: 5%;
	margin-top: 1em;
	padding-top: 1em;
	text-align: center;
	font-size: 90%;
	font-style: italic;
	padding-bottom: 2em;
	margin-bottom: 2em;
  "
>
  Text
</a>

But you're right, generally it's better to use a class or a function when things get large enough to require this.

[djr33]

I think I would prefer the single line approach for skimmability.

I could quickly scroll through my code to find all <a tags, for example.

Once you start doing that, it becomes like CSS in the middle of the page which wouldn't be expected and would throw off the overall layout. Just imagine doing that within a tabbed section

I certainly can see your point, though.


Also, I'd say it should be placed at the end of the tag... like...

<img src="1.jpg" height="30" width="40" style="[500 characters can go here and you can still easily read all other attributes....">

[Twey]

You can still do that... note how the <a is at the highest level of indentation in the tag.