312035 - :target does not fall back to display: none when another target is targeted

Status: RESOLVED WORKSFORME

(Core :: Layout, defect)

Description

[Isac Lagerblad (:icaaq)]

User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8b5) Gecko/20051006 Firefox/1.4.1
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8b5) Gecko/20051006 Firefox/1.4.1

In the page http://member.webforum.nu/1029/target.htm , the content area should
hide it self when another target is targeted.

Reproducible: Always

Steps to Reproduce:
1. Click on headlineLink1.
2. Click on headlineLink2.
3. Refresh the page and se what it should look like.

Actual Results:  
The display:none rule never take place after leaving the :target

Expected Results:  
The display:none rule should take place after leaving the :target

Comment 1

[Jesse Ruderman]

WFM Mozilla/5.0 (Macintosh; U; PPC Mac OS X Mach-O; en-US; rv:1.9a1)
Gecko/20051010 Firefox/1.6a1

Comment 2

[Jesse Ruderman]

Mozilla/5.0 (Macintosh; U; PPC Mac OS X Mach-O; en-US; rv:1.8b5) Gecko/20051006
Firefox/1.4.1

The text disappears, but the empty space remains instead of collapsing.  If I
alternate between clicking the first link and clicking the second link, the gaps
keep growing.

Comment 3

[Adam Guthrie]

Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9a1) Gecko/20051011
Firefox/1.6a1 ID:2005101104

This works exactly as expected for me, if I'm understanding it right. I don't
even see the growing space issue. 

Comment 4

[Isac Lagerblad (:icaaq)]

Attachment: A solution

If i use the correct display type: table-row the problem is no longer a problem....

Comment 5

[Andrew]

I am duplicating this behavior, my situation is this:

<tr id="priorAddressSection" style="display:none">
etc.

This js works fine in IE, and toggles the <tr> to show or not, but the empty space grows:

function togglePriorAddress(displayPriorAddressSection)
{
	var element = document.getElementById("priorAddressSection");
	if (element != null)
	{
		if (displayPriorAddressSection == "yes")
		{
			element.style.display = "table-row";
		}
		else if (displayPriorAddressSection == "no")
		{
			element.style.display = "none";
		}
	}
}

Comment 6

[Andrew]

BTW...this is FF 2.0.0.4.

Comment 7

[Adam Guthrie]

Can you reproduce the problem in Gran Paradiso alpha 5? http://www.mozilla.org/projects/firefox/3.0a5/releasenotes/

Comment 8

[Andrew]

No.  It appears to be fixed in Gran Paradiso alpha 5.  Thanks!

Just fyi, for anyone else needing a work-around in current/earlier production versions, the "table-row" display style works fine in 2.0.0.4, but not IE, so the following works for me across those 2 browsers:

try {
	element.style.display = "table-row";
}
catch (ignore) {
	element.style.display = "inline";
}

Comment 9

[Adam Guthrie]

Cool. I'm going to resolve as WORKSFORME, then, since we're not sure what fixed this and it's unlikely to get backported to 2.0.0.x. Thanks for the workaround.

->WORKSFORME