SitePoint Sponsor

User Tag List

Results 1 to 20 of 20
  1. #1
    SitePoint Enthusiast
    Join Date
    Feb 2009
    Posts
    31
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Rollover effects inside inline-elements (DIV inside an A)... not allowed!

    I want to make a link that is built up of an icon and a text, like so:

    [X] Cancel

    The [X] represents a 12x12 pixel image. This is done by giving a DIV a background image, so I can change it when you hover over it. My XHTML code looks like this:

    Code:
    <a href="#"><div id="cancel_icon"></div> Cancel</a>
    I'm using a DIV so I can set its height and width, and its background image. But when I validate my XHTML, I get this error:

    document type does not allow element "div" here; missing one of "object", "applet", "map", "iframe", "button", "ins", "del" start-tag.

    Ok, so I know I can't put a block element inside an inline element, but how else can I get my link?

  2. #2
    Follow: @AlexDawsonUK silver trophybronze trophy AlexDawson's Avatar
    Join Date
    Feb 2009
    Location
    England, UK
    Posts
    8,111
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)
    Place the anchor link within the div, offset the anchor using padding-left and have your image as background-image on the anchor set to middle left.

  3. #3
    SitePoint Enthusiast
    Join Date
    Feb 2009
    Posts
    31
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    *slaps himself*

    Well, ofcourse! Thanks, that is obviously the proper solution. Sometimes its so simple

  4. #4
    Follow: @AlexDawsonUK silver trophybronze trophy AlexDawson's Avatar
    Join Date
    Feb 2009
    Location
    England, UK
    Posts
    8,111
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)
    lol don't worry about it, I have those kind of days too

  5. #5
    SitePoint Enthusiast jmp($fffc)'s Avatar
    Join Date
    Nov 2008
    Posts
    31
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Even simpler: leave the DIV's out altogether, and change the anchor to a block!

  6. #6
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,567
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Even then you can make it "seem" valid by giving it display:block; but the rules of HTML say that an <a> is an inline and it can't hold blocks. I'd remove the div and use a background image for the X.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  7. #7
    SitePoint Wizard silver trophybronze trophy
    Join Date
    Jul 2008
    Location
    New York, NY
    Posts
    1,432
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    An inline element may must be wrapped with a block level element when sitting beside another block level element.

    Code HTML4Strict:
    <div><a href="#">Close</a></div>
    <p>....</p>

  8. #8
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,276
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    If it's a button... you could give <button> or <input type="image"> a try.

    IE has issues with forms with more than one button but...

    http://particletree.com/features/red...utton-element/

    Just be aware of IE:
    http://www.mezzoblue.com/archives/20.../anchor_butto/
    (the comments, read)

    Quote Originally Posted by cooper
    An inline element may must be wrapped with a block level element when sitting beside another block level element.
    That's a Best Practice, but not in the specs. Meaning, if you didn't intend an inline to be next to a block but did it anyway, the validator won't point it out to you.

    Even then you can make it "seem" valid by giving it display:block; but the rules of HTML say that an <a> is an inline and it can't hold blocks. I'd remove the div and use a background image for the X.
    But you can have
    <a href="whatever" class="blah">Cancel</a>

    a.blah {
    display: block;
    padding-left: room for the image;
    min-height: needed for a tall image;
    width: whatever is nice;
    background: url(X.gif) 0 50% no-repeat;
    }

    I think that's what jmp($fffc) meant.

  9. #9
    SitePoint Enthusiast jmp($fffc)'s Avatar
    Join Date
    Nov 2008
    Posts
    31
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by RyanReese View Post
    Even then you can make it "seem" valid by giving it display:block; but the rules of HTML say that an <a> is an inline and it can't hold blocks. I'd remove the div and use a background image for the X.
    What can I say, I like to break the rules if it gets things done quicker and still reliable

    The button-suggestion by Stomme Poes is a good way to accomplish the same thing, and the Particletree-article mentioned in Stomme Poes' post is a must-read!

  10. #10
    SitePoint Wizard silver trophybronze trophy
    Join Date
    Jul 2008
    Location
    New York, NY
    Posts
    1,432
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The HTML validator looks for well formed pages, not semantically correct pages

  11. #11
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,567
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    The CSS quizsticked at the top of the forum quiz b is a good way of trying to achieve what you want. I break the rules too-it gives the results and ONE little error (ok, well not a little one) won't hurt anything.
    Stick around until Friday afternoon and when Paul posts the answer to quiz b that is going to be a perfectly valid way .
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  12. #12
    SitePoint Wizard silver trophybronze trophy
    Join Date
    Jul 2008
    Location
    New York, NY
    Posts
    1,432
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Smart coding will eliminate errors altogether. I see no reason why an html document should not be well formed, ever.

  13. #13
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,276
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    The HTML validator looks for well formed pages, not semantically correct pages
    yeah... I wonder if such a thing could be built? Or would it basically need to be an AI and be able to understand a natural language?

    Smart coding will eliminate errors altogether. I see no reason why an html document should not be well formed, ever.
    cooper++ !

  14. #14
    SitePoint Enthusiast
    Join Date
    Feb 2009
    Posts
    31
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by cooper.semantics View Post
    Smart coding will eliminate errors altogether. I see no reason why an html document should not be well formed, ever.
    That is the best approach, I guess. So how would you fix this particular issue, for instance?

  15. #15
    Follow: @AlexDawsonUK silver trophybronze trophy AlexDawson's Avatar
    Join Date
    Feb 2009
    Location
    England, UK
    Posts
    8,111
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Stomme poes View Post
    yeah... I wonder if such a thing could be built? Or would it basically need to be an AI and be able to understand a natural language?
    It would require the validator to understand the content of the element and depending on the element, the way in which it is expressed (and even in what context). This may indicate the machine along with understanding language structure; formation and progression would also have to be able to understand any emotional or psychological emphasis (or relationship) which may exist. Long story short, the day we get a validator that can understand the semantics behind our language to a point in which it can tell apart for example what elements are considered important enough to require emotional or experience emphasis is the day that Skynet becomes self aware and your toaster strangles you with its cord while you sleep.

  16. #16
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,276
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    I never trusted toasters. I mean, they look all faithful in a chromey 1950's Father Knows Best sort of way... but it's all a ruse.

    That is the best approach, I guess. So how would you fix this particular issue, for instance?
    Simpler is usually better. Assuming you're going to put a Javascript event on that anchor, give it a class or id so your Javascript can keep iteself from butting into the HTML where it doesn't belong...

    and use what jmp($fffc) suggested:

    <a id="something" href="somewhere!">Cancel</a>

    with CSS making some space on the left of the text and placing a background image (and likely making the whole anchor a block element so's it can has widths and heights).

    Yesh, the href should go somewhere for those without JS-- your JS would override the href for those visitors who have JS on, best of both worlds. Non-JSers would be taken to some standalone page which can cancel stuff I guess. Depending on what this is in and what it's doing.

  17. #17
    SitePoint Wizard silver trophybronze trophy
    Join Date
    Jul 2008
    Location
    New York, NY
    Posts
    1,432
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

  18. #18
    Follow: @AlexDawsonUK silver trophybronze trophy AlexDawson's Avatar
    Join Date
    Feb 2009
    Location
    England, UK
    Posts
    8,111
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)
    Cooper, nice link, I visited it a long time ago but had forgotten about it, pretty useful thanks

  19. #19
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,276
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    Oooh! Didn't ever come across that one. Thanks, Cooper!

  20. #20
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,567
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by jmp($fffc) View Post
    What can I say, I like to break the rules if it gets things done quicker and still reliable

    The button-suggestion by Stomme Poes is a good way to accomplish the same thing, and the Particletree-article mentioned in Stomme Poes' post is a must-read!

    I don't mind breaking the rules either. It gets me the effect and has been stable for me.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work


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
  •