Cannot use more than one link tag?

[Marty]

This is driving me nuts.

In the CSS file I have:

a.blue { display:block ;
width:120px ;
height:120px ;
background:url("bluepicture.gif") no-repeat ;
}

a.blue:hover {

background:url("differentbluepicture.jpg") no-repeat ;
}​

a.red { display:block ;
width:120px ;
height:120px ;
background:url("redpicture.gif") no-repeat ;
}

a.red:hover {

background:url("differentredpicture.jpg") no-repeat ;
}​

In the code I use:

<td width="140px"><a class="blue" href="gotobluesite.php"></a></td>
<td width="140px"><a class="red" href="gotoredsite.php"></a></td>

The blue picture and the hover picture will work for blue but not for
red. If I reverse the order of the css, then the top one will work not
the second.

What stupid mistake am I making?

[JJ]

I can see a /zero-width space/ Unicode character after the end of ":hover"
rule blocks. You can't simply use keyboard to generate that special
character so, it's unlikely that you've made a mistake.

Either you're troll-posting, or whatever the program you're using to make
that CSS, is *NUTS*! If you're not trolling, then dump that stupid program.

[Marty]

I assume you tried your best to answer me but to be honest, I have no
idea what you mean. The original code I found online and pasted it into
my css file. Then I just modified it for my url's and images.

I then copy and pasted it into the post I put up here. I use Bluefish
editor which is fairly highly regarded and I have been using for a few
years.

What is a troll-post. Is that the thing my kid sister put on her erasers
when we were little?

By mistake, do mean it is unlikely there is anything wrong with my code
and there is a hidden character I can't see in it? Then why does it work
each time a flip them around?

I guess I should ask if you have a clue as to why this does not work. Why
does the first set of css rules literally block the second?

[Jukka K. Korpela]

2013-06-05 6:09, Marty wrote:

> On Wed, 05 Jun 2013 08:37:59 +0700, JJ wrote:

[...]

>> I can see a /zero-width space/ Unicode character after the end of
>> ":hover" rule blocks. You can't simply use keyboard to generate that
>> special character so, it's unlikely that you've made a mistake.

Actually, it is possible to enter the character from the keyboard, but
that does not normally happen.

> The original code I found online and pasted it into
> my css file.

Copy and paste causes all kinds of trouble. The problem might have been
in the fragment you copied.

> By mistake, do [you] mean it is unlikely there is anything wrong with my code

> and there is a hidden character I can't see in it?

The U+200B ZERO WIDTH SPACE character (ZWSP) *is* an error in your code.
It is hidden in the sense that it is zero-width, so you do not normally
see it, but in CSS code, it sits there like any other character and gets
parsed, or rather makes the CSS parser go wild.

> Then why does it work
> each time a flip them around?

If the order is changed so that the ZWSP is moved to the end of the
style sheet, it cannot really harm anyone.

> I guess I should ask if you have a clue as to why this does not work.

I must admit that the theoretical side of the matter is somewhat
obscure. The code has a ZWSP after a rule, after the "}" that terminates
the rule that starts with a.blue:hover. There is a ZWSP at the very end
of the style sheet, too. For some reason, the CSS Validator
http://jigsaw.w3.org/css-validator/ issues an error message, and a
cryptic one ("Parse Error [ ]"), about the first occurrence only.
Wait... let's start the CSS code with

@charset "utf-8";

Then we get:

17 a.blue:hover Lexical error at line 11, column 2. Encountered:
"\u200b" (8203), after : "" }​ a.red { display:block ; width:120px ;

height:120px ; background:url("redpicture.gif") no-repeat ; }

22 a.red:hover Lexical error at line 22, column 2. Encountered:
"\u200b" (8203), after : "" }​

This makes much more sense.

Anyway, you need to delete those ZWSP's. How you do that depends on the
editor you are using. Personally, I would use BabelPad, which lets me
see information about all the invisible characters, too.

On the other hand, the code you have copied is crap. To mention some bad
things about it, it uses px dimensions; it sets background without
setting background color and text color; it uses clueless class names
"blue" and "red"; it makes a gif image get replaced by a jpeg image on
mouseover; it has incorrect HTML syntax (values of the width attribute);
it has <a> elements (which you call "link tags") with no content; it has
crappy CSS coding style which uses spaces where none is needed, before
";", and does not use spaces after ":" where they should be used for
readability.

So the code is best thrown away. Write your own code when you have
learned HTML and CSS sufficiently.

--
Yucca, http://www.cs.tut.fi/~jkorpela/

[richard]

Have you run the code through a validator?
It may pick up something you miss entirely.
The thing about the space after the "hover" is pure horsehockey.
I do it all the time and have never had a problem with it.

when people read stuff they don't understand, they say it's a troll post.

post a link to the page and maybe you'll get better help on it.
as well one to the source page.

[richard]

On 04 Jun 2013 22:34:57 GMT, Marty wrote:

Just a thought.
Since this is a php page you have in the href, you may want to try the full
URL path. Include the http:// stuff.

[richard]

On 04 Jun 2013 22:34:57 GMT, Marty wrote:

I copied and pasted your css code and ran it through a CSS validator.
When you do this, you will find two hidden "?".
I use notepad++. It's an excellent tool for html and css.
it's free too.

[Jukka K. Korpela]

2013-06-05 11:35, Tim Streater wrote:

> That is a bit of cleanup you should always do when copy/pasting code
> from, particular, web pages.

Rrright, often so much that it would be faster not to copy and paste but
write the code directly, just applying some idea you found in someone
else's code.

It occurred to me that if code excerpts are presented as standalone
resources, linked to from some explanatory page, they might be in UTF-8
format with BOM (Byte Order Mark). This is fine - contrary to common
disinformation, a BOM is generally a good thing at the start of an UTF-8
encoded file - but if you just copy and paste such excerpts, you *might*
get the data with the BOM included.

Now, pasting such data in the midst of a CSS document creates the ZWSP
problem. The BOM is really just a ZWSP used at the start of a file or
datastream, where it has no meaning other than Byte Order Mark, which is
discarded in character-level processing of the data, But in any other
context, it is zero-width space and might therefore be disallowed,
processed in a special way, or just cause confusion.

--
Yucca, http://www.cs.tut.fi/~jkorpela/

[JJ]

On Wed, 05 Jun 2013 07:26:22 +0300, Jukka K. Korpela wrote:
> 2013-06-05 6:09, Marty wrote:
>> On Wed, 05 Jun 2013 08:37:59 +0700, JJ wrote:
> [...]
>>> I can see a /zero-width space/ Unicode character after the end of
>>> ":hover" rule blocks. You can't simply use keyboard to generate that
>>> special character so, it's unlikely that you've made a mistake.
>
> Actually, it is possible to enter the character from the keyboard, but
> that does not normally happen.

Oops, I forgot about that ALT-digits method. Regardless, if such character
exists, it's likely been put there deliberately, not by mistake.

>> The original code I found online and pasted it into
>> my css file.
>
> Copy and paste causes all kinds of trouble. The problem might have been
> in the fragment you copied.

It's a nice idea for a kind of simple code reuse protection, though.

[Jukka K. Korpela]

2013-06-05 13:39, Tim Streater wrote:

> Why are you so keen on the BOM? It shouldn't be needed in a UTF-8 file,
> I wouldn't have thought.

It lets programs infer that the data is UTF-8 encoded, with virtually
100% certainty, even if HTTP headers are missing (as they are especially
for locally saved files).

HTML5 people*) even think that a BOM in UTF-8 (that is, leading bytes
that constitute a BOM if interpreted as UTF-8) are such a strong
indication that it trumps explicit information in HTTP headers! They say
that this "is a willful violation of the HTTP specification, motivated
by a desire to be maximally compatible with legacy content"
(and, I would expect, with current browser behavior):
http://www.w3.org/TR/html5/syntax.html#determining-the-character-encoding

*) I might look like an HTML5 person, especially after authoring two
books on HTML5, but I'm really just in the hangaround gang.

--
Yucca, http://www.cs.tut.fi/~jkorpela/

[Denis McMahon]

On Wed, 05 Jun 2013 00:27:30 -0400, richard wrote:

> The thing about the space after the "hover" is pure horsehockey.
> I do it all the time and have never had a problem with it.

That's normal space. The OPs problem is that he has an invalid character
code for a unicode zero width space in the middle of his CSS, and that's
what's breaking the CSS rules.

This is a problem that you don't understand (obviously, or you wouldn't
call it horsehockey) and is a really good reason for why you specifically
should not try and offer advice about css, html, php or javascript to
anyone.

--
Denis McMahon, denismf...@gmail.com

[Marty]

On Wed, 05 Jun 2013 00:51:54 -0400, richard wrote:


>
> I copied and pasted your css code and ran it through a CSS validator.
> When you do this, you will find two hidden "?".
> I use notepad++. It's an excellent tool for html and css.
> it's free too.

I want to thank everyone who made an effort to help me. Even those who
focused on the perfection of the code and not the problem at hand.

I did find a parse error and all I had to do was type in the code once
again from scratch. I did not change a thing and it works perfectly now.

I unfortunately cannot see hidden characters in Bluefish. Maybe there is
a way that I have not learned about. But, in most other respects it does
the job. I might try another editor but it has to work with Ubuntu.

Again, thank you all.

[Denis McMahon]

On Wed, 05 Jun 2013 16:25:24 +0100, Tim Streater wrote:

> Glad it worked. But do look to see if there is some Bluefish feature to
> "show invisibles", or, failing that, see if you can find another editor
> which can - even if you only use it for that purpose.

The closest option I could find in bluefish was:

edit / preferences / visible whitespace mode -> all

gedit (which I use) usually shows weird characters as a square box
containing 4 miniaturised hex values, or refuses to load the file if it
finds character codes that are incompatible with what it thinks it should
be displaying.

--
Denis McMahon, denismf...@gmail.com

[123Jim]

Maybe it's there to prevent someone from easily copying the code.

I can't see that character though, how are you guys able to view it? I
have viewed it in notepad++ and of course Mozilla Thunderbird, but i
don't see the "/zero-width space/ Unicode character"

[123Jim]

OK found view > Show Symbol > show white space ... in Notepad++
This character shows up as a question mark.

[dorayme]

In article <51aeabeb$0$64491$c3e8da3$5e5e...@news.astraweb.com>,

Marty <mar...@aol.com> wrote:

> Why
> does the first set of css rules literally block the second?

If you have hidden characters and it does crazy things, it would be
pretty hard to unearth quite why the exact effects are such. Bit like
a bug in code. And if someone knew exactly, it would not be helpful to
you, though perhaps if you could be bothered about all the details and
having to possibly learn some arcane stuff, you would satisfy
curiosity.

Have a look at your editor, it has been mentioned a few times over the
years and is probably very good, see if there is a way to reveal
invisible characters.

If it has no way, try uploading your html (you can stick CSS in the
HEAD for the moment in an HTML style element) doc to a server for test
purposes, put it in a folder called "test" and then view source in a
browser and carefully inspect.

By the way, I assume you are going to the trouble of having your own
pictures as background because you are not happy with the ones
available like #f00, #00f etc

--
dorayme

[JJ]

On Wed, 05 Jun 2013 21:23:56 +0100, 123Jim wrote:
> On 05/06/2013 09:57, JJ wrote:
>> It's a nice idea for a kind of simple code reuse protection, though.
>
> Maybe it's there to prevent someone from easily copying the code.

That's what I thought, too.

> I can't see that character though, how are you guys able to view it? I
> have viewed it in notepad++ and of course Mozilla Thunderbird, but i
> don't see the "/zero-width space/ Unicode character"

Don't know about Thunderbird, but if you can override the encoding view of a
newsgroup message, set it to ASCII or ISO-8859-1. Unicode characters that
aren't in ASCII/ISO-8859-1 character set, each would show up as 2-3
gibberish characters.

[Jukka K. Korpela]

2013-06-06 12:46, JJ wrote:

>> I can't see that character though, how are you guys able to view it? I
>> >have viewed it in notepad++ and of course Mozilla Thunderbird, but i
>> >don't see the "/zero-width space/ Unicode character"
>
> Don't know about Thunderbird, but if you can override the encoding view of a
> newsgroup message, set it to ASCII or ISO-8859-1. Unicode characters that
> aren't in ASCII/ISO-8859-1 character set, each would show up as 2-3
> gibberish characters.

In this case, it would make the zero-width space appear as the
three-character string “​”.

--
Yucca, http://www.cs.tut.fi/~jkorpela/

[123Jim]

Thanks, got it in Thunderbird. View > Character Encoding > ISO-8859-1
Marty's hidden character shoe up as ​ as Jukka has mentioned below.