Yes, Yes, I clicked. I swear.



  • This is probably all my fault, but I find it funny nonetheless...

    I will not bore you with what my task is today, but this it includes creating a link. I mean, like an <a> tag.
    The link is relatively simple, since all it does is specify the href you wish to link to. Hard to think a WTF might be hidden in it. Well, I open up the page in Firefox, click on the link and it works. Do same thing in IE and nothing happens. Weird - the correct link shows up in the status bar, but when you click it - nothing happens. So I add an onclick event that shows an alert sayng "IE SUCKS" and, sure enough, it works - but still won't go to the linked page. Just sits there. Next step: add onclick="this.click()". It works. Obviously I cannot leave this like this, so I'll have to waste my morning figuring out why it won't REALLY click the friggin thing, but I find it kind of funny - it's like saying "if I click the link, please pretend that it has been clicked".. This obviously has something to do with the css / javascript madness that surrounds my poor puny link, but... ARGH.

     



  • Are you by any chance working with image maps? IE has a problem where if you put an anchor tag around an image tag with a map, the anchor tag won't work properly. I discovered this while building a web app a while ago.



  • Unfortunately no image maps - just a simple a tag with a couple divs inside it. I think the problem lies in everything else around it :) It is a big app that has lots of stuff floating around - and a lot of it not under my control....



  • @ahf said:

    Unfortunately no image maps - just a simple a tag with a couple divs inside it. I think the problem lies in everything else around it :) It is a big app that has lots of stuff floating around - and a lot of it not under my control....

     <a> is an inline tag.

    <div> is a block tag.

    You can't put block tags inside inline tags.
     

    So this is invalid html: 

    <a href="something">

    <div>hi there</div>

    </a> 



  • Are you capturing onclick events on the divs inside the link? Betcha that's the problem -- they're not bubbling up.



  • @mhughes said:

    @ahf said:

    Unfortunately no image maps - just a simple a tag with a couple divs inside it. I think the problem lies in everything else around it :) It is a big app that has lots of stuff floating around - and a lot of it not under my control....

     <a> is an inline tag.

    <div> is a block tag.

    You can't put block tags inside inline tags.
     

    So this is invalid html: 

    <a href="something" mce_href="something">

    <div>hi there</div>

    </a> 

     

    Heh... excellent point!



  • There you go - as I said, it was probably my fault :)

    HTML is not what I do most of the time.. BUT I still find it kind of funny, that it will respond to the onclick event but NOT click... 



  • You might find this helpful, then: http://validator.w3.org/

    The W3 validator tells you if you wrote valid HTML or not. In Opera, it's in the right-click menu when you click a page (which is awful useful)



  • Ooh, ooh, I found 128 errors here! :)



  • Huh? You can change the type of an element with CSS display: property. Otherwise, there would be no way to legally implement i.e. a one-line search form in a table cell. So everything there is to be done is to change the the CSS for this anchor to display: block.



  • @Tweenk said:

    Huh? You can change the type of an element with CSS display: property. Otherwise, there would be no way to legally implement i.e. a one-line search form in a table cell. So everything there is to be done is to change the the CSS for this anchor to display: block.

    Err.. no. What you're suggesting still does not produce valid HTML. You'll still have block level elements inside inline level elements.

    The proper way would be to replace all block level tags within the anchor tag with their inline level equivalent (In the case of <div>, that would be <span>. Possibly <p>, but I'm not sure about that.) and then through css give all those inline level tags, including the anchor tag, the display:block property. However, I've had IE bug out before on anchor tags that get display:block. Their pseudoclasses would stop working and in some instances they lost the functionality of being a link as well, just as the OP describes.

    Probably the best way to solve all these problems at once is to change the anchor into a regular <div> element and just give that an onClick event that redirects to another page. Then again, that would shut out browsers that don't have javascript or have it disabled. Choices, choices...



  • I ended up doing the same sort of thing a while back when writing a Javascript demo disc application (in itself a WTF: boss didn't want to buy Flash.) The navigation links in the app worked while I was developing it, then one day just stopped working in IE for no reason I could ever figure out. Unfortunately, not knowing much Javascript, I just duplicated the link functionality using document.location. True to Sod's Law, this worked right up until it was time for me to give the final demo and hand in the completed project ... at which point the links started working normally again, so every time I clicked a link in IE it would open both in a new window and in the current one.

     
     


Log in to reply
 

Looks like your connection to What the Daily WTF? was lost, please wait while we try to reconnect.