Velocity Reviews

Velocity Reviews (http://www.velocityreviews.com/forums/index.php)
-   HTML (http://www.velocityreviews.com/forums/f31-html.html)
-   -   Re: Cannot use more than one link tag? (http://www.velocityreviews.com/forums/t961423-re-cannot-use-more-than-one-link-tag.html)

JJ 06-05-2013 01:37 AM

Re: Cannot use more than one link tag?
 
On 04 Jun 2013 22:34:57 GMT, Marty wrote:
> 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?


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.

Jukka K. Korpela 06-05-2013 04:26 AM

Re: Cannot use more than one link tag?
 
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 06-05-2013 04:27 AM

Re: Cannot use more than one link tag?
 
On 05 Jun 2013 03:09:31 GMT, Marty wrote:

> On Wed, 05 Jun 2013 08:37:59 +0700, JJ wrote:
>
>> On 04 Jun 2013 22:34:57 GMT, Marty wrote:
>>> 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?

>>
>> 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.

>
> 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?


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.

Tim Streater 06-05-2013 08:35 AM

Re: Cannot use more than one link tag?
 
In article <51aeabeb$0$64491$c3e8da3$5e5e430d@news.astraweb.c om>,
Marty <martyfl@aol.com> wrote:

> On Wed, 05 Jun 2013 08:37:59 +0700, JJ wrote:
>
> > On 04 Jun 2013 22:34:57 GMT, Marty 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.


> 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.


I've never heard of that, I use TextWrangler. This is an editor which
allows me to display any invisible characters in the file. I suggest you
use an editor which can do that, and then edit out the one or two
invisible characters that JJ reported as being present.

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

--
Tim

"That excessive bail ought not to be required, nor excessive fines imposed,
nor cruel and unusual punishments inflicted" -- Bill of Rights 1689

Jukka K. Korpela 06-05-2013 08:56 AM

Re: Cannot use more than one link tag?
 
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 06-05-2013 08:57 AM

Re: Cannot use more than one link tag?
 
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.

Tim Streater 06-05-2013 10:39 AM

Re: Cannot use more than one link tag?
 
In article <komu74$dov$1@dont-email.me>,
"Jukka K. Korpela" <jkorpela@cs.tut.fi> wrote:

> 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.


Yes :-)

But even if I c/p, I usually reformat it anyway and check for weird
characters and remove tabs.

> 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.


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

--
Tim

"That excessive bail ought not to be required, nor excessive fines imposed,
nor cruel and unusual punishments inflicted" -- Bill of Rights 1689

Jukka K. Korpela 06-05-2013 11:29 AM

Re: Cannot use more than one link tag?
 
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.ht...acter-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/

Tim Streater 06-05-2013 12:12 PM

Re: Cannot use more than one link tag?
 
In article <kon767$ood$1@dont-email.me>,
"Jukka K. Korpela" <jkorpela@cs.tut.fi> wrote:

> 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).


Bring back Apple's resource fork, is what I say.

Such info ought to be in the file's metadata along with file type - in
the ideal world, or course.

--
Tim

"That excessive bail ought not to be required, nor excessive fines imposed,
nor cruel and unusual punishments inflicted" -- Bill of Rights 1689

Denis McMahon 06-05-2013 01:23 PM

Re: Cannot use more than one link tag?
 
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, denismfmcmahon@gmail.com


All times are GMT. The time now is 08:56 AM.

Powered by vBulletin®. Copyright ©2000 - 2014, vBulletin Solutions, Inc.
SEO by vBSEO ©2010, Crawlability, Inc.