SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Wizard siteguru's Avatar
    Join Date
    Oct 2002
    Location
    Scotland
    Posts
    3,631
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    IE6 Doesn't Like <A> tags?

    Some HTML

    Code HTML4Strict:
    <div id="content">
    	<p>Click on a Tip Title to show/hide the details of that item.</p>
    	<div class="box">
    		<a name="tip2"></a>
    		<ul>
    			<li><a href="#tip2" onclick="toggleDiv ('tip2'); return false">Tip 2</a></li>
    		</ul>
    		<div id="tip2" class="tipboxshow">
    			<p>Tip text goes here.</p>
    		</div>
    	</div>
    	<div class="box">
    		<ul>
    			<li><a href="#tip3" onclick="toggleDiv ('tip3'); return false">Tip 3</a></li>
    		</ul>
    		<div id="tip3" class="tipboxshow">
    			<p>Tip text goes here.</p>
    		</div>
    	</div>
    </div>
    Some Javascript in the <head> (to swap the class names onload, and a show/hide toggle)

    Code JavaScript:
    <script type="text/javascript">
    function toggleDiv (div) {
    	var el = document.getElementById (div);
    	if (el.className == 'tipboxhide') {
    		el.className = 'tipboxshow';
    	} else {
    		el.className = 'tipboxhide';
    	}
    }
     
    window.onload = function () {
    	var content = document.getElementById ('content');
    	var divs = content.getElementsByTagName ('div');
    	for (i=0; i<divs.length; i++) {
    		if (divs[i].className == 'tipboxshow') divs[i].className = 'tipboxhide';
    	}
    }
    </script>
    The issue ... with JS enabled, clicking on Tip 3 allows the tip description to correctly appear. Clicking again hides it. In FF2 the same happens with Tip 2, but in IE6 nothing happens! (Can't test IE7 just now).

    As can be seen, Tips 2 and 3 are the same, except Tip 2 has an anchor tag <a name="tip2"></a>. I have also tried with this tag before the <div class="box"> but the issue remains.

    Any thoughts?

    PS - in case it is relevant, this is the doctype.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    Ian Anderson
    www.siteguru.co.uk

  2. #2
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Nelson BC
    Posts
    2,310
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    IE is confusing the tip div with the <a name="tip2"> element, change the name attribute of the a tag to fix that silly IE bug. Or reference the tip for each item structurally, something like:

    onclick="toggleDiv(this.parentNode.parentNode.nextSibling);"

    (and edit toggleDiv to take a DOM object instead of an id)

  3. #3
    SitePoint Wizard siteguru's Avatar
    Join Date
    Oct 2002
    Location
    Scotland
    Posts
    3,631
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Thanks Jim - now works perfectly.

    (I did a quick and dirty edit first. I'll look at the DOM method too).
    Ian Anderson
    www.siteguru.co.uk


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
  •