4 replies [Last post]
grimaldi
Offline
Enthusiast
Last seen: 2 years 16 weeks ago
Timezone: GMT+1
Joined: 2008-01-28
Posts: 74
Points: 46

Hi Guys

I have a form which contains a few fieldsets. The idea is the content in the fieldsets is hidden until the legend is clicked. Which then displays the options kinda like a dropdown.

I'm having an issue in Firefox, where when absolutely positioning an element, it doesn't seem to ignore the Legend. This appears fine in Chrome/Safari/Opera. When I position a div absolute with top:0 and left:0 is appears at the very top of the legend ...except in Firefox! Which still places the box below the legend still.

Anyone come across this issue or even better know how to resolve it?

Here is the html/css (stripped down). The anchor in the legend uses an image though I've swapped it out for a colour here, thats why heights are set etc.

<form id="filter">
	<fieldset>
	<legend><a class="link-1" href="#" title="TITLE TEXT.">Select</a></legend>
		<div class="dropdown panel-1">
			<p>Lorem ipsum</p>
			<label class="checkbox"><input type="checkbox" />Option One</label>
			<label class="checkbox"><input type="checkbox" />Option Two</label>
			<label class="checkbox"><input type="checkbox" />Option Three</label>
			<label class="checkbox"><input type="checkbox" />Option Four</label>
			<label class="checkbox"><input type="checkbox" />Option One</label>
			<label class="checkbox"><input type="checkbox" />Option Two</label>
			<label class="checkbox"><input type="checkbox" />Option Three</label>
			<label class="checkbox"><input type="checkbox" />Option Four</label>
		</div>								
	</fieldset>
</form>
 
<script type="text/javascript"> 
$(document).ready(function(){
$('.link-1').click(function(){
$('.panel-1').slideToggle(150);
});
$(".link-2").click(function(){
$(".panel-2").slideToggle(150);
});
$(".link-3").click(function(){
$(".panel-3").slideToggle(150);
});
});
</script>

#filter {
	clear: both;
	width: 100%;
	}
#filter fieldset {
	margin-left: 27px;
	float: left;
	position: relative;
	}
#filter fieldset.first {
	margin-left: 0;
	}
#filter legend {
	margin: 0;
	padding: 0;
	}
#filter legend a {
	background: #f00;
	color: #333;
	display: block;
	font-size: 12px;
	height: 26px;
	line-height: 24px;
	margin: 0;
	padding: 0 0 0 12px;
	position: relative;
	width: 190px;
	}
#filter .dropdown {
	background: #00f;
	display: none;
	left: -2px;
	position: absolute;
	top: -3px;
	width: 306px;
	z-index: 100;
	}

Senff
Senff's picture
Offline
Regular
Montreal, Canada
Last seen: 2 years 33 weeks ago
Montreal, Canada
Timezone: GMT-4
Joined: 2011-12-13
Posts: 16
Points: 19

Since the dropdown panel is

Since the dropdown panel is positioned absolute (in the relative positioned fieldset), it will be placed OVER the legend, covering it completely, I'm not sure if that's what you're trying to do, cause then you can't click the legend anymore to make the dropdown panel disappear again.

In my example I have positioned it a bit lower, so that you can still see/click the legend. I suspect the problem you're having with FF is because the legend is not positioned absolute. Once you do that, then both the legend AND the dropdowns will be positioned properly within the fieldset, neither will be disrupting the flow of the document.

See http://jsfiddle.net/MarkSenff/9t98D/2/

mS

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 18 min 56 sec ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9274
Points: 3280

Hi Mark, Why not put your

Hi Mark,

Why not put your code within the answering post? It would be simpler for everyone and it would be a permanent record of the answer. (You can't always depend on off-site repositories to be there.)

cheers,

gary/mod

UI design should be egoless; if you succumb to the temptation to show off, you’re probably doing it wrong. (from ESR)

There are enough html & css demos and tutorials to be interesting. Please visit.

Senff
Senff's picture
Offline
Regular
Montreal, Canada
Last seen: 2 years 33 weeks ago
Montreal, Canada
Timezone: GMT-4
Joined: 2011-12-13
Posts: 16
Points: 19

Sure, no problem! Does this

Sure, no problem! Does this board not have a feature to edit previous posts?

Well either way, here's the HTML:

<form id="filter">
    <fieldset>
    <legend><a class="link-1" href="#" title="TITLE TEXT.">Select</a></legend>
        <div class="dropdown panel-1">
            <p>Lorem ipsum</p>
            <label class="checkbox"><input type="checkbox" />Option One</label>
            <label class="checkbox"><input type="checkbox" />Option Two</label>
            <label class="checkbox"><input type="checkbox" />Option Three</label>
            <label class="checkbox"><input type="checkbox" />Option Four</label>
            <label class="checkbox"><input type="checkbox" />Option One</label>
            <label class="checkbox"><input type="checkbox" />Option Two</label>
            <label class="checkbox"><input type="checkbox" />Option Three</label>
            <label class="checkbox"><input type="checkbox" />Option Four</label>
        </div>                                
    </fieldset>
</form>

The CSS:

#filter {
    clear: both;
    width: 100%;
    }
#filter fieldset {
    margin-left: 27px;
    float: left;
    position: relative;
    }
#filter fieldset.first {
    margin-left: 0;
    }
#filter legend {
    margin: 0;
    padding: 0;
    position:absolute;
    }
#filter legend a {
    background: #f00;
    color: #333;
    display: block;
    font-size: 12px;
    height: 26px;
    line-height: 24px;
    margin: 0;
    padding: 0 0 0 12px;
    position: relative;
    width: 190px;
    }
#filter .dropdown {
    background: #00f;
    display: none;
    left: -2px;
    position: absolute;
    top: 10px;
    width: 306px;
    z-index: 100;
    }

The jQuery:

$(document).ready(function(){
$('.link-1').click(function(){
    $('.panel-1').slideToggle(150);
});
 
$(".link-2").click(function(){
    $(".panel-2").slideToggle(150);
});
 
$(".link-3").click(function(){
    $(".panel-3").slideToggle(150);
});
});

mS

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 18 min 56 sec ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9274
Points: 3280

Senff wrote: Sure, no

Senff wrote:

Sure, no problem! Does this board not have a feature to edit previous posts?

We did at one time, but spammers were going back to their old legitimate looking post and editing to add spam links. We put some time limits on the feature, but through subsequent upgrades and refactoring, we dropped the feature; whether by accident or purpose, I don't recall now. The additional post to add to or correct a posting does not seem burdensome; especially not to us mods and admins as we sit our thrones on Olympian heights and look down upon the hoi-poloi, the great unwashed masses, the …. Oops, wasn't supposed to let that cat out of the bag.Wink

cheers,

gary

UI design should be egoless; if you succumb to the temptation to show off, you’re probably doing it wrong. (from ESR)

There are enough html & css demos and tutorials to be interesting. Please visit.