Re: Cannot use more than one link tag?

Discussion in 'HTML' started by JJ, Jun 5, 2013.

  1. JJ

    JJ Guest

    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.
     
    JJ, Jun 5, 2013
    #1
    1. Advertising

  2. 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/
     
    Jukka K. Korpela, Jun 5, 2013
    #2
    1. Advertising

  3. JJ

    richard Guest

    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.
     
    richard, Jun 5, 2013
    #3
  4. JJ

    Tim Streater Guest

    In article <51aeabeb$0$64491$c3e8da3$>,
    Marty <> 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
     
    Tim Streater, Jun 5, 2013
    #4
  5. 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/
     
    Jukka K. Korpela, Jun 5, 2013
    #5
  6. JJ

    JJ Guest

    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.
     
    JJ, Jun 5, 2013
    #6
  7. JJ

    Tim Streater Guest

    In article <komu74$dov$>,
    "Jukka K. Korpela" <> 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
     
    Tim Streater, Jun 5, 2013
    #7
  8. 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/
     
    Jukka K. Korpela, Jun 5, 2013
    #8
  9. JJ

    Tim Streater Guest

    In article <kon767$ood$>,
    "Jukka K. Korpela" <> 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
     
    Tim Streater, Jun 5, 2013
    #9
  10. 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,
     
    Denis McMahon, Jun 5, 2013
    #10
  11. JJ

    123Jim Guest

    On 05/06/2013 09:57, JJ wrote:
    > 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.
    >



    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, Jun 5, 2013
    #11
  12. JJ

    123Jim Guest

    On 05/06/2013 21:23, 123Jim wrote:
    > On 05/06/2013 09:57, JJ wrote:
    >> 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.
    >>

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


    OK found view > Show Symbol > show white space ... in Notepad++
    This character shows up as a question mark.
     
    123Jim, Jun 5, 2013
    #12
  13. JJ

    dorayme Guest

    In article <51aeabeb$0$64491$c3e8da3$>,
    Marty <> 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
     
    dorayme, Jun 6, 2013
    #13
  14. JJ

    JJ Guest

    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.
     
    JJ, Jun 6, 2013
    #14
  15. 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/
     
    Jukka K. Korpela, Jun 6, 2013
    #15
  16. JJ

    123Jim Guest

    On 06/06/2013 10:46, JJ wrote:
    > 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.
    >


    Thanks, got it in Thunderbird. View > Character Encoding > ISO-8859-1
    Marty's hidden character shoe up as ​ as Jukka has mentioned below.
     
    123Jim, Jun 7, 2013
    #16
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Merciadri Luca
    Replies:
    4
    Views:
    841
  2. richard
    Replies:
    0
    Views:
    500
    richard
    Jun 5, 2013
  3. richard
    Replies:
    2
    Views:
    502
    Denis McMahon
    Jun 5, 2013
  4. Steven D'Aprano
    Replies:
    0
    Views:
    131
    Steven D'Aprano
    Dec 23, 2013
  5. Replies:
    3
    Views:
    107
    Gary Herron
    Dec 23, 2013
Loading...

Share This Page