margin-bottom disappearing on toggle of div/fieldset (Ffox)

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
The Monkey
Forum Contributor
Posts: 168
Joined: Tue Mar 09, 2004 9:05 am
Location: Arkansas, USA

margin-bottom disappearing on toggle of div/fieldset (Ffox)

Post by The Monkey »

Hello DevNetwork,

I have the following XHTML 1.1 (sent as Content-type: application/xhtml+xml, if that might have anything to do with it...):

Code: Select all

<div id=&quote;verification&quote; class=&quote;hidden&quote;>
<fieldset>
	<legend>Credential Verification</legend>
	
	<label for=&quote;current_password&quote; id=&quote;current_password_label&quote;>Current Password</label>
	<input type=&quote;password&quote; name=&quote;current_password&quote; id=&quote;current_password&quote; /> 
	<input type=&quote;submit&quote; name=&quote;verify&quote; value=&quote;Verify&quote; onclick=&quote;return personal(true);&quote; />
</fieldset>
</div>
However, when using javascript to remove the "hidden" class from the div, the margin-bottom immediately disappears.

The same thing happens if I place the verification id in the fieldset instead of the div.

My javascript code to unhide the div:

Code: Select all

document.getElementById( response.childNodesїi].getAttribute('maximize') ).className = &quote;&quote;;
Again, what happens when this code is executed is that the element reappears, but is right against the fieldset below it. Even if I explicitly set margin-bottom (with a class, or with javascript code after removing the hidden class), Firefox ignores it. Any ideas on a solution (preferably non-hacky...) or why this is happening?

- Monkey
User avatar
Ambush Commander
DevNet Master
Posts: 3698
Joined: Mon Oct 25, 2004 9:29 pm
Location: New Jersey, US

Post by Ambush Commander »

I don't know why this is happening, but if hidden is just an analog for display:none, why don't you edit the CSS directly?

Code: Select all

itm.style.display = &quote;none&quote;;
The Monkey
Forum Contributor
Posts: 168
Joined: Tue Mar 09, 2004 9:05 am
Location: Arkansas, USA

Post by The Monkey »

I was doing that, no difference in the result. I'm just a seperation of markup / presentation freak. :)
User avatar
Ambush Commander
DevNet Master
Posts: 3698
Joined: Mon Oct 25, 2004 9:29 pm
Location: New Jersey, US

Post by Ambush Commander »

What's the CSS? And can you show us the link the Javascript is being executed from?
The Monkey
Forum Contributor
Posts: 168
Joined: Tue Mar 09, 2004 9:05 am
Location: Arkansas, USA

Post by The Monkey »

Code: Select all

.hidden
{
	display:none;
}

Code: Select all

document.getElementById(id).appendChild( document.createTextNode( ' - ' + response.childNodesїi].firstChild.data ) );
document.getElementById(id).style.color = response.childNodesїi].getAttribute('color');
						
if ( response.childNodesїi].hasAttribute('minimize') )
{
	date = new Date();
	var curDate = null;
	/* cheap wait until hack */			
	do { var curDate = new Date(); }
	while(curDate-date < 1400);

	document.getElementById( response.childNodesїi].getAttribute('minimize') ).className = &quote;hidden&quote;;
}
else if ( response.childNodesїi].hasAttribute('maximize') )
{
	document.getElementById( response.childNodesїi].getAttribute('maximize') ).className = &quote;&quote;;
	document.getElementById( response.childNodesїi].getAttribute('maximize') ).style.padding = &quote;0 0 1px 0&quote;;
}
Post Reply