CSS - Stylizing Fieldset & Legend

Hi guys,
sorry if its newbie question, don't work with CSS so long. I've just read a nice article about styling CSS forms (Fancy Form Design) and it looked really nice, so I tried to apply it immediately. However, some problems occured, things are never so easy I guess .
First problems occurs with styling of group of form elements: they are dropped one line down (below its label, resp. legend) in IE 5.5/6.0 and also moved to the right (in IE 5.5-7.0) for some reason. Also, styling of fieldsets' legends works odd: first legend is styled differently than the others (one would guess that all of them will be styled in same way).
Could you give me pls a little hint on these problems?

Here's the test page with applied form styling: http://147.32.122.251/hsh2t/index.php.
General CSS: http://147.32.122.251/hsh2t/forms.css
IE (5.5-6.0) only CSS: http://147.32.122.251/hsh2t/forms-ie.css

does fieldset have a width attribute rather than having it spread across the whole screen or should i just put it inside a DIV tag?

Hello All,

I am having a bit of a problem with IE and fieldsets. I am not sure what exactly is going on. Take a look at this site in Firefox (I'm currently running version 3.5.2). You will see that it displays correctly. The site also displays correctly in IE8. I am now testing it against IE6/7. I have worked out most of the problems with it, but can not figure out what is causing this issue.

The pages to look at are Board Members, Tech News, and Association. The link is: http://209.159.189.187/index.html

One further, minor, issue that hopefully is simple involves the UL LI items on the About Us page. I used the reset css file to clear everything, and now whenever the LI item contains text that spans more than a single line, the second level does not indent itself to align with the first line. Like I said, it is a minor thing, but I would appreciate knowing what setting controls that.

Thanks everyone.

Hi,

I currently have the following layout in a fieldset:
[IMG]EDIT: I'll just go ahead and make some spam posts now so I can post an image link[/IMG]

Please ignore the language. What I basically want to achieve is making the radio buttons align to the right and the labels to the left.

The source for this is like this:
html4strict Code:
Original - html4strict Code <fieldset> <legend>Beantwoord a.u.b. met helemaal oneens tot helemaal eens</legend> <ol> <li> <label for="q0">Question1</label> <input type="radio" id="q0" name="q0" value="1">1</input> <input type="radio" id="q0" name="q0" value="2">2</input> <input type="radio" id="q0" name="q0" value="3" checked="true">3</input> <input type="radio" id="q0" name="q0" value="4">4</input> <input type="radio" id="q0" name="q0" value="5">5</input> <input type="hidden" name="qid0" value="4" /> </li> <li> <label for="q1">Question2</label> <input type="radio" id="q1" name="q1" value="1">1</input> <input type="radio" id="q1" name="q1" value="2">2</input> <input type="radio" id="q1" name="q1" value="3" checked="true">3</input> <input type="radio" id="q1" name="q1" value="4">4</input> <input type="radio" id="q1" name="q1" value="5">5</input> <input type="hidden" name="qid1" value="6" /> </li> <li> <label for="q2">Question3</label> <input type="radio" id="q2" name="q2" value="1">1</input> <input type="radio" id="q2" name="q2" value="2">2</input> <input type="radio" id="q2" name="q2" value="3" checked="true">3</input> <input type="radio" id="q2" name="q2" value="4">4</input> <input type="radio" id="q2" name="q2" value="5">5</input> <input type="hidden" name="qid2" value="7" /> </li> <li> <label for="q3">Question4</label> <input type="radio" id="q3" name="q3" value="1">1</input> <input type="radio" id="q3" name="q3" value="2">2</input> <input type="radio" id="q3" name="q3" value="3" checked="true">3</input> <input type="radio" id="q3" name="q3" value="4">4</input> <input type="radio" id="q3" name="q3" value="5">5</input> <input type="hidden" name="qid3" value="24" /> </li> <li> <label for="q4">Question5</label> <input type="radio" id="q4" name="q4" value="1">1</input> <input type="radio" id="q4" name="q4" value="2">2</input> <input type="radio" id="q4" name="q4" value="3" checked="true">3</input> <input type="radio" id="q4" name="q4" value="4">4</input> <input type="radio" id="q4" name="q4" value="5">5</input> <input type="hidden" name="qid4" value="40" /> </li> </ol> </fieldset>

  

 <fieldset>


                             <legend>Beantwoord a.u.b. met helemaal oneens tot helemaal eens</legend>


                             <ol>


                                     <li>


             <label for="q0">Question1</label>


             <input type="radio" id="q0" name="q0" value="1">1</input>


             <input type="radio" id="q0" name="q0" value="2">2</input>


             <input type="radio" id="q0" name="q0" value="3" checked="true">3</input>


             <input type="radio" id="q0" name="q0" value="4">4</input>


             <input type="radio" id="q0" name="q0" value="5">5</input>


             <input type="hidden" name="qid0" value="4" />


         </li>      <li>


             <label for="q1">Question2</label>


             <input type="radio" id="q1" name="q1" value="1">1</input>


             <input type="radio" id="q1" name="q1" value="2">2</input>


             <input type="radio" id="q1" name="q1" value="3" checked="true">3</input>


             <input type="radio" id="q1" name="q1" value="4">4</input>


             <input type="radio" id="q1" name="q1" value="5">5</input>


             <input type="hidden" name="qid1" value="6" />


         </li>      <li>


             <label for="q2">Question3</label>


             <input type="radio" id="q2" name="q2" value="1">1</input>


             <input type="radio" id="q2" name="q2" value="2">2</input>


             <input type="radio" id="q2" name="q2" value="3" checked="true">3</input>


             <input type="radio" id="q2" name="q2" value="4">4</input>


             <input type="radio" id="q2" name="q2" value="5">5</input>


             <input type="hidden" name="qid2" value="7" />


         </li>      <li>


             <label for="q3">Question4</label>


             <input type="radio" id="q3" name="q3" value="1">1</input>


             <input type="radio" id="q3" name="q3" value="2">2</input>


             <input type="radio" id="q3" name="q3" value="3" checked="true">3</input>


             <input type="radio" id="q3" name="q3" value="4">4</input>


             <input type="radio" id="q3" name="q3" value="5">5</input>


             <input type="hidden" name="qid3" value="24" />


         </li>      <li>


             <label for="q4">Question5</label>


             <input type="radio" id="q4" name="q4" value="1">1</input>


             <input type="radio" id="q4" name="q4" value="2">2</input>


             <input type="radio" id="q4" name="q4" value="3" checked="true">3</input>


             <input type="radio" id="q4" name="q4" value="4">4</input>


             <input type="radio" id="q4" name="q4" value="5">5</input>


             <input type="hidden" name="qid4" value="40" />


         </li>                     </ol>


                         </fieldset> 

I already tried making them float but this kinda messed everything up as some questions are multi-line.
Is the best way to do this separating the labels and inputs into two floating divs or is there a way that would look cleaner code-wise?

Tim

The border around the fieldset in IE7 is messed up. The right border is shifted to the left several pixels. It looks fine in IE6. In FF the border isn't shifted but there is less padding on the right side of the fieldset than the left. I can't figure that one out either. If I zero out all the padding & borders the input/textareas push a few pixels out the right side of the fieldset. Looks fine in IE6.

So has anyone seen either of these issues and might know how to correct them?

Here is the page in question

Thanks!

I can't seem to set any padding on the fieldset element with ie7

Has anyone else had these problems and is there a way I can fix this. I even set the fieldset element to a block level element but that didn't work either.

example
http://section31.us/scripts/testing/xhtml/fieldset.html

Hi I'm new to CSS and this site, so please excuse any stupidity in the code and presentation of this query!

The following CSS (error.css):
Code:

body {background-color: white;}
title {font-style: italic}
thead {font-weight: bold; border-bottom: thick double}
td {width: 5em; border-bottom: thin solid black; border-top: thin solid black; background-color: green}
table {border: hidden}
.Xaddress {border-left: thin solid black; font: 1em bold; color: yellow; text-align: left}
.title {border-left: thin solid black; text-align: center; border-bottom: thick double; border-top: hidden}
caption {font: 2em bold}
#intro {position: static; color: black; height: 20%; backXground: #cccccc;}
#addresses { position: relative; left: 5em; height: 60%; color: black; height: 10em;}
#table1 {position: absolute; top: 4em; left: 1em; z-index: 10; color: black; background: #cccccc;}
#table2 {position: absolute; top: 5em; left: 6em; z-index: 9; color: black; background: #ff00ff;}
#footer {position: static; z-index: 10; color: black; height: 20%; backXground: #00ff00;}

and xhtml (error.html):
Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

<html>
<head>
<link rel="stylesheet" type="text/css" href="error.css" />

<script type="text/javascript">
//Bring a span element and descendents to the front and send its span siblings and their descendents to the back
function bringToFront(id) 
{
	if (id != null) {
		if (document.getElementById(id)) {
			//Send all parent's descendents in spans to the back
			var span=document.getElementById(id).parentNode.getElementsByTagName("SPAN");
			var s=0;
			var c=0;
			while (span[s]) {
				setzIndexOfBranch(span[s],9);
				s++;
			}
			//bring id and descendants to the front
			setzIndexOfBranch(document.getElementById(id),10);
		}
	}
}

//Set the zIndex of a node and all of its descendants
function setzIndexOfBranch(node,value)
{
	if (node.style != undefined) {
		node.style.zIndex = value;
	}
	var c=0;
	while (node.childNodes[c]) {
		setzIndexOfBranch(node.childNodes[c],value);
		c++;
	}
}

function parseXML()
{
	text="<root>";
	text=text+"<heading>XML CSS HTML test</heading>";
	text=text+"<table1data>"+"<table>"+
	  "<caption>"+
	    "First table"+
	  "</caption>"+
	  "<thead>"+
	    "<td class="title">Column1</td>"+
	  "</thead>"+
	  "<tr>"+
	    "<td>row1</td>"+
	  "</tr>"+
	  "<tr>"+
	    "<td>row2</td>"+
	  "</tr>"+
	  "<tr>"+
	    "<td>row3</td>"+
	  "</tr>"+
	"</table><br/>Some text after table 1<br/>"+
	"</table1data>"+
	"<table2data>"+"<table>"+
	  "<caption>"+
	    "Second table"+
	  "</caption>"+
	  "<thead>"+
	    "<td class="title">Column1</td>"+
	  "</thead>"+
	  "<tr>"+
	    "<td>row1</td>"+
	  "</tr>"+
	  "<tr>"+
	    "<td>row2</td>"+
	  "</tr>"+
	  "<tr>"+
	    "<td>row3</td>"+
	  "</tr>"+
	  "<tr>"+
	    "<td>row4</td>"+
	  "</tr>"+
	"</table><br/>How can I make these 2 tables appear inside the addresses fieldset ?<br/>"+
	"<br/>How can I make the addresses fieldset always fill @60% of the height ?<br/>"+
	"<br/>Note the size of each table will vary but can assume to be less than 6 rows.<br/>"+
	"</table2data>";
	text=text+"</root>";

	try //Internet Explorer
	  {
	  xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
	  xmlDoc.async="false";
	  xmlDoc.loadXML(text);
	  }  
	catch(e)
	  {
	  try // Firefox, Mozilla, Opera, etc.
	    {
	    parser=new DOMParser();
	    xmlDoc=parser.parseFromString(text,"text/xml");
	    }
	  catch(e)
	    {
	    alert(e.message);
	    return;
	    }
	  }
	document.getElementById("table1").innerHTML=
	xmlDoc.getElementsByTagName("table1data")[0].childNodes[0].nodeValue;
	document.getElementById("table2").innerHTML=
	xmlDoc.getElementsByTagName("table2data")[0].childNodes[0].nodeValue;
	document.title=
	xmlDoc.getElementsByTagName("heading")[0].childNodes[0].nodeValue;
}
</script>
</head>

<body onload="parseXML()">
<h1>Positioning test script</h1>
<span>
	<fieldset id="intro">
		<legend>header</legend>
		<span id="to"></span><br/>
		Header text
	</fieldset>
	<br/><br/>
	<fieldset id="addresses">
		<legend>addresses</legend>
		<br>This is in the addresses fieldset</br>
		<span id="table1" onclick="bringToFront('table1')"></span>
		<span id="table2" onclick="bringToFront('table2')"></span>
		<br>This is in the addresses fieldset...................................................................................and I would hope for it to appear beneath the tables above. Table 2 may not exist.</br>
	</fieldset>
	<br/><br/>
	<fieldset id="footer">
		<legend>footer</legend>
		This is all
		<br/><br/><br/><br/><br/><br/><br/><br/>
		footer text<br/>
		<br/>Down to here.
	</fieldset>
</span>
</body>
</html>

produces overflow in the middle fieldset.
I would like the tables in this fieldset to be contained by the fieldset. It's prettier. That would also make the footer fieldset visible, so it's essential ! Can anybody help please ?

Also the text which should appear below these tables. Any idea why it isn't positioned inline after the tables end ?
Thanks.

Hey guys, I'm new to the forums and would appreciate any help...

I've never used fieldsets before, until now, and check out:
http://www.koofers.com/contact.php

A horizontal bar shows up in IE... and the globe in the top right of the screen goes off the monitor! And in FireFox, if I add bullet points to the content, the text actually goes outside of the fieldset.

I know now the more I read that fieldsets are pretty much just for forms and such, but I really like the cool effect they give! And yes, I know... I shouldn't be using tables for my design, I should be doing crazy sweet things in CSS, but I'm still learning and don't have the time to totally re-design it in CSS (even if I could get it working!)

Any help would be appreciated.

Hello,

Can I apply a top and bottom border to a fieldset but using an image to define a custom border line?

How can I do this?

Thank You,
Miguel

Hi, I am using fieldset to group checkboxes.
fieldset {
border:none;
autoHeight:true;
}
Several fieldset groups are used inside td (table). In firefox 3.6.17, the layout comes properly. The fieldset automatically adds a line break for every tr-td combination, the layout shows fine.
But in IE 8.0.6001, the fieldset does not add a line break for every td/tr. So I have to add an additional blank/empty tr/td to add a line break. Doing so adds 2 lines in FF.
How to overcome this problem? What is the ideal css style to be used so that the display comes properly in both IE and FF?

I know everyone who has tried designing emails for Outlook 2007 has had their share of headaches. But I encountered a bug recently where Outlook 2007 is not rendering my fieldset elements correctly. Based on Microsoft's own documents, Outlook 2007 should have full CSS support of the <fieldset> and <legend> elements.

Here is my html and css:
Code:

<fieldset style="border:1px solid #99CCFF; padding-left:10px; padding-right:10px; padding-bottom:10px;">
<legend style="font-weight:bold; text-transform:uppercase;">Warranty Items</legend>
 ** Content here ***
</fieldset>

In every other email reader it looks as it should. But in Outlook 2007 there is no border and no padding. Each <legend> element appears as if it were an inline element.

Has anyone had any luck with this sort of problem?
Thanks!

Greetings,

I'm trying to create a fieldset that has rounded corners and a solid border. From what I gather IE displays rounded corners by default, Firefox does not. The code below makes Firefox display rounded corners, but when a border is applied rounded corners won't display on IE.

Is there anything I can do to enable rounded borders?

Thanks,

fieldset
{
border:3px solid #000000;
-moz-border-radius: 8px;
border-radius: px;
background: #C4FC02;
margin: 0 0 1em 0;
position: relative;
}

This looks great in firefox1.5, but not ie6. It actually starts the picture a tad bit above the heading (legend). In firefox, it starts right below the fieldset border, and it's so clean... why not in IE?

Any ideas how it could be changed?
Code:

<fieldset style="  
			background-image:url(images/d.gif);
			background-repeat: no-repeat;
			background-position:  top right;">
<legend style="color: #0000CC;">Heading:</legend>
... html code...
</fieldset>

i really like the fieldset due to having the title in the middle of the border, but are there any cross-browser issues?
also what i'm finding is that if i set background styling.
IE sets the background colour to include the legend aswell, whereas Firefox sets the background colour to the confines of the border.

Ideas welcome and asked for
Effective Alternatives also welcomed