Space after <ol> in <frameset>

I have tried just about every combination of padding and margin to add extra space after the <ol> before the end of the </frameset> for the ‘sector’, ‘skills’ and ‘regions’ framesets at http://gandalf458.co.uk/assoc-add.htm

Can anyone help please? Thanks G :slight_smile:

Hi, have you also tried bottom padding on the fieldsets?

Looks like that’s one thing I didn’t try - guess I thought that would add padding outside the border. I was wrong!

Many thanks, Erik

AFK :slight_smile:
I saw you used lists to contain the items, but all items were put in one list-item in each list. And the inputs were wrapped in their labels. That works, but I think it’s better to wrap each label-input pair in a list-item of their own.

Something like this:

<form action="#" method="post">
	<fieldset>
		<legend>Skills</legend>
		<ul>
			<li><input id="skill-French" type="checkbox"> <label for="skill-French">French</label></li>
			<li><input id="skill-Health" type="checkbox"> <label for="skill-Health">Health</label></li>
			<li><input id="skill-Government" type="checkbox"> <label for="skill-Government">Government</label></li>
			<li><input id="skill-Sausages" type="checkbox"> <label for="skill-Sausages">Sausages</label></li>
		</ul>
	</fieldset>
</form>

form{
	margin:0;
	padding:0;
}
fieldset{
	margin:.4em 0 0;
	padding:10px;
	width:780px;
}
ul{
	margin:0;
	padding:0;
	list-style:none;
}
ul li{
	float:left;
	float:left;
	width:195px;
	white-space:nowrap;
}

Yes, I noticed that the other day. The list is created from a MySQL database using PHP - I don’t know if there was method in my madness when I wrote it that way!

Many thanks for rewriting it for me… G :slight_smile:

Uhm, silly question - why are you making those an unordered list? ESPECIALLY when you only have one LI per OL - that’s like having only one TD per TABLE - at that point why use it in the first place?

My advice? Lose the OL, and make sure your fieldsets are set up to wrap floats (overflow:hidden and a haslayout trigger good as always) then bottom padding on the fieldset should work just fine.

Oh, and you might want to add FOR to your labels and ID to your inputs, and while at it move that hidden input into one of the fieldsets (submit looks good) so you have a valid/well-formed form.

Not a silly question, DS. An <ol> was how I learned to make a form. The single <li> is a mistake in my PHP coding (I think!)

Thanks G :slight_smile:

Is certainly easier without the <ol> and <li>. Only thing, now I have too much space between the <fieldset>s in IE8. And I feel I should know the answer…

By default fieldsets have both top and bottom margins - and they are NOT predictable cross-browser as to which one is applied.

Try adding margin:0.25em 0; to the fieldsets - and keep decreasing the number until happy.

Thanks DS. I’ll have to take a look in the morning now but from memory I have set margin and padding on all elements (except labels). My problem is there’s more margin between the fieldsets in IE8 than in FF3…

Hopefully you meant except inputs.

I’d say the reset isn’t being applied or it’s being overridden somewhere, because in IE8 and Opera here your fieldsets appear to have 1EM of top and bottom margin applied.

labels AND inputs! :wink:

Well, I have removed the bottom margin on the legends and reduced the top margin on the fieldsets to 1em - it was 1.3em - and the bottom margin remains at 0. The page now looks the same in FF, Opera and Chrome but IE8 seems to apply top padding on the fieldset strangely…

Could be (and this is a wild, wild guess) a vertical-alignment issue. I’d try throwing vertical-align:top; middle or bottom in there on a bunch of things and see which one if any helps. Could be as simple as the alignment in your line-height - I’ve had IE8 be a bit wierd about those in the past.

Thanks, DS. I’ll give it a go…