www.webdeveloper.com
Results 1 to 7 of 7

Thread: [RESOLVED] Absolutely Position Anchor Over Text Nodes in IE7/8

  1. #1
    Join Date
    Dec 2005
    Posts
    2,984

    resolved [RESOLVED] Absolutely Position Anchor Over Text Nodes in IE7/8

    Here's my HTML:

    HTML Code:
    					<ul>
    						<li class="user"><a title="Click to display logged events for this session" href="#">&nbsp;</a>stuff here</li>
    						<li class="time">stuff here</li>
    						<li class="time">stuff here</li>
    						<li class="ip">stuff here</li>
    					</ul>
    and the relevant CSS:

    Code:
    ul { position: relative; }
    ul a { position: absolute; display: block; width: 100%; height: 100%; z-index: 10; }
    All the LI's are floated left to make a row (not shown in the CSS) and I want to make the entire row clickable so I figured I'd absolutely position an anchor which is the entire width and height of the row....works great in FF, Opera, Safari, and Chrome. But in IE7/8, the entire row is clickable except for the text nodes ("stuff here").

    I realize there's no real point for the z-index declaration in the above css, but I was just trying random things at the point when I came up with it - it never helped. Does anyone know how to achieve this effect without putting the content in each li in separate <a> tags in addition to my absolutely positioned anchor?
    I've switched careers...
    I'm NO LONGER a scientist,
    but now a web developer...
    awesome.

  2. #2
    Join Date
    Jan 2004
    Location
    Washington DC
    Posts
    1,107
    Put a background color on the <a> tag. I know it will hide your text but see if it works when there is a background.
    Bittersweet web development.

  3. #3
    Join Date
    Dec 2005
    Posts
    2,984
    How much do I owe you crh3675? I saw a mention of this workaround online, but I thought it was the same as "add a border to the anchor"....and when I did that, I saw no difference, but background color does do something different.

    So the workaround was:

    Code:
    ul a { position: absolute; display: block; width: 100&#37;; height: 100%; background-color: #fff filter: alpha(opacity=0); }
    and bingo!

    Thanks a lot!
    I've switched careers...
    I'm NO LONGER a scientist,
    but now a web developer...
    awesome.

  4. #4
    Join Date
    May 2009
    Posts
    4
    But why?? I have the same problem. I add a background and the problem goes away. But keeping the background there isn't possible because there's content underneath.

    Wish you had gone into more depth two years ago, crh3675.

  5. #5
    Join Date
    Dec 2005
    Posts
    2,984
    mattalexx, I have good news for you, it's not two years ago!! The only reason I did it this way was to keep my HTML valid....HTML4 did not allow anchor tags around block level elements.

    HOWEVER, HTML5 does allow it!! Meaning the following is perfectly valid:

    HTML Code:
    <a href="#">
     <div>
       <h1>Click Me!</h1>
       <p>And all the gloriousness of HTML5 will shine through.....</p>
      </div>
    </a>
    I've switched careers...
    I'm NO LONGER a scientist,
    but now a web developer...
    awesome.

  6. #6
    Join Date
    May 2009
    Posts
    4
    Yes, I know. I never figured out the real problem but I know it has something to do with position: absolute, backgrounds, and :hover.

    Thanks

  7. #7
    Join Date
    Dec 2005
    Posts
    2,984
    Oh, if this is for learning sake, I'd move on, it was a bug in the CSS spec implementation of IE7/8.
    I've switched careers...
    I'm NO LONGER a scientist,
    but now a web developer...
    awesome.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles