SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Jan 2010
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question How can I fix IE 8's goofy handling of anchor tags

    I've been using <div> tags to create boxes that are links. I had a series of links in an unordered list like this:


    Code:
    <ul>
    <li><a href><div>Link Text</div></a></li>
    </ul>
    That worked ok but IE seems to be buggy with respect to borders inside <ul> tags. So I switched to just this:

    Code:
    <a href><div>Link Text</div></a>
    Now IE doesn't transform the cursor to indicate it's over a hyperlink although the link will still work. Is this a known issue and does anyone know how I can get IE to behave?

  2. #2
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That's completely invalid markup and you can't say that it 'works' or doesn't work, because the behaviour is undefined. Relying on contemporary browser error handling is not conducive to a good night's sleep.

    A block-level <div> can never be a child of an inline-level <a>.

    Use a <span> instead of a <div> and style it with display:block if necessary.
    Birnam wood is come to Dunsinane

  3. #3
    SitePoint Member
    Join Date
    Jan 2010
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Gotcha. We'll I've tried with span tags too but the problem still persists. Actually it looks like by commenting out the width and height properties this will work but I need both of those.

  4. #4
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,789
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Use display:block on the <a> tag so you can assign the sizes directly to it without needing the other tags.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">


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
  •