SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Guru
    Join Date
    Oct 2010
    Location
    Portland, Or
    Posts
    634
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    having a problem with a button being a descendant of an element

    Line 153, Column 44: The element button must not appear as a descendant of the a element.
    HTML Code:
    <button class="btn primary readMore"><a href="">read more</button></a
    not sure how to fix this.
    has anyone run into this & how did you solve it please?
    thx
    D

  2. #2
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,734
    Mentioned
    31 Post(s)
    Tagged
    1 Thread(s)
    Line 153, Column 44: The element button must not appear as a descendant of the a element.
    I am not entirely sure what you mean as "appear". elements are/are not decedents. But you have a couple of other issues in your code as well.

    1) It's not good practice to have links inside or around your buttons.
    2) you didnt close your tags properly, that probably caused a bunch of unforeseen results.
    Code:
    <button class="btn primary readMore"><a href="#">read more</a></button>

    hope that helps.

  3. #3
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,233
    Mentioned
    47 Post(s)
    Tagged
    1 Thread(s)
    Don't use a button. Just have the anchor and style the anchor like a button.

    <button> is (mostly) for having a style-able thingie that when users click it, runs some script. If it goes somewhere then a plain link makes more sense.

    While I personally don't like loose inlines with block siblings, this *is* legal:

    <hx>Article title</hx>
    <p>article teaser...</p>
    <a class="button" aria-label="Article title">Read More </a>

    And set the .button { display: inline-block;} or float it or something.

    Quote Originally Posted by dresden
    you didnt close your tags properly,
    I'll bet that's why the validator said something about descendents: the tags are not well-formed and the closing </a> is outside the closing </button> so it may have assumed the button was a descendent here somehow.

    At work there was/is some crappy old code doing this
    <a href="somewhere"><input type="button" value="some text"></a>
    and I'd like to note that unless you add an onclick event on the anchor, IE (not sure about 10) won't work clicking on that thing. So I don't know but it wouldn't surprise me if there was a user agent who didn't like anchors inside a button (but I don't think there's a spec reason why it wouldn't work).

  4. #4
    SitePoint Guru
    Join Date
    Oct 2010
    Location
    Portland, Or
    Posts
    634
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Dresden, Stomme, thank you both.
    And Stomme thank you on the extra advice on fixing this. I was toying w/the idea of creating an div & styling for a button but will try your suggestion and style the <a href> first.
    D

  5. #5
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,233
    Mentioned
    47 Post(s)
    Tagged
    1 Thread(s)
    Using the anchor gives you automatially both the functionality of a link without extra scripting, and also it's already accessible natively (except if your link text is bad like "read more" then the aria-label will help, at least for users of newer AT).


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •