Multiple Fieldset Classes. Applying a Legend for each.

[chunkee]

Hello,
I have created some separate fieldset classes to distinguish them. For some reason they do not show up in the formatting window or the other combo box to apply them. Below is what I have in the CSS. Each is placed under the Fieldset class in the Flare editor, however none show up as usable. Should I have created a pseudo class instead? Also, Flare has the inherent fieldset class, why is there no legend ? Any way to put them together and utilize in the Styles format window?

Flare 7
Windows XP Pro


fieldset.note
{
border: dashed 1px #ffa500;
padding: 3px;
}

fieldset.tip
{
padding: 3px;
border: dashed 1px #6b8e23;
}

fieldset.fieldsetcaution
{
padding: 3px;
border: dashed 1px #ac1a2f;
}

fieldset.example
{
padding: 3px;
border: dashed 1px #4169e1;
}

[LTinker68]

I've never used that tag, but a quick search on w3schools.com indicates it's related to forms, so if it were to show up in the Styles pane at all, it would be when you were inside a form tag. Are you not seeing it after adding a form, or are you trying to use it outside of a form?

[chunkee]

Thanks for the reply Lisa. They actually did finally show up after closing the project and reloading it...?

fieldsetshowingup.png

However, i am having a doozy of a time getting them to utilize the legend class. I would like to separate them to use with each to match the color of the border, but for some reason, Madcap left that attribute out on their editor and I am having difficulty adding in the internal text to display properly.

fieldset
{
padding: 2px;
font: verdana;
font-size: 10pt;
border: solid 1px;
}

+

legend
{
border: none;
padding: 0.2em 0.5em;
font-size: 80%;
color: #000000;
left: 4px;
}

Gets me

legend.png

The legend is too far to the left in the preview. I am trying to get a legend for each of the classes I created to match in color as well as be able to associate the legend with the fieldset. Example: fieldset.note utilizes legend.note..? Not sure how to get that one in place...?

[LTinker68]

I would like to separate them to use with each to match the color of the border, but for some reason, Madcap left that attribute out on their editor and I am having difficulty adding in the internal text to display properly.

What view do you have the Stylesheet Editor set to? If you have it set to Advanced view and "Show:Property Groups", then you'll see all the CSS attributes available. Those are ALL the attributes, not ones specifically designed for the selected tag. Any attribute that isn't easily categorized is in the "Unclassified" group.

fieldset
{ ... }

+

legend
{ ... }

Is that plus sign in the stylesheet file? That's not the normal way to do complex selectors using the plus sign. And anyway, legend isn't a tag -- it's an attribute, so you wouldn't set it up this way anyway. What you want to do is probably something like that shown in the last example on this page ("Styling Forms") --> http://www.w3schools.com/css/css_attrib ... ectors.asp. You can't do that type of editing through the Stylesheet Editor, though, so you'll have to open the stylesheet file in the Internal Text Editor and add it manually. It may not necessarily work in Flare either (in which case it's a bug), but give that a shot and see if it'll work.

[chunkee]

Sorry Lisa for the confusion, there is no plus sign, I was just showing the class and the attribute definition. I am using the internal text editor to define. I have been looking all over the web on how to do this properly, and perhaps then there is a bug in Flare in the way it renders the class....?

[LTinker68]

... perhaps then there is a bug in Flare in the way it renders the class....?

What class? The snippet of stylesheet you posted above doesn't specify any classes.

Did you try the method mentioned at the bottom of the page I provided the link to in the previous post?

BTW, you didn't specify a color for your borders in the styles. In most cases the default border color is black, but that specific tag (fieldset) may have a different default color, so make sure you specify a border color.

[NorthEast]

The legend is too far to the left in the preview.

Use the margin-left property to add spacing.

I am trying to get a legend for each of the classes I created to match in color as well as be able to associate the legend with the fieldset. Example: fieldset.note utilizes legend.note..? Not sure how to get that one in place...?

Match the colour of what? If you set a color for the fieldset, the legend inside the fieldset will inherit that colour.

As you've set your legend colour to black (#000000), all legends will be black. If you remove that, legends will inherit the colour of their parent fieldset.


Alternatively, if you want to have different properties for the legend, which depend on which class of fieldset they are contained in; you would use something like this:

Code: Select all

fieldset.a legend
{
color: #ff0000;
}

fieldset.b legend
{
color: #0000ff;
}

[chunkee]

Hi all.
Sorry, had some Spring Break with the kids. I was able to complete the look and feel i was looking for. I was unable to create a snippet of the combination for a selected part of the body. It would be nice to be able to combine the styles though to have done in one step rather than two.

If anyone finds these useful, here they are. I separate my notes, tips, cautions and examples using this formatting. Not for everyone, but I thought I would share. Thanks for the help. I enjoy learning. Now to troubleshoot a search problem with webhelp plus...

fieldset.note
{
padding: 3px;
font-size: 10pt;
font: verdana;
border: solid 1px #ffa500;
}

legend.note
{
font-size: 85%;
color: #ffa500;
text-align: right;
margin: 0px 0px 3px 0px;
top: 2px;
position: relative;
right: -5px;
}

fieldset.tip
{
font: verdana;
font-size: 10pt;
padding: 3px;
border: solid 1px #6b8e23;
}

legend.tip
{
font-size: 85%;
color: #6b8e23;
text-align: left;
margin: 0px 0px 3px 0px;
top: 2px;
position: relative;
right: -5px;
}

fieldset.caution
{
padding: 3px;
border: solid 1px #ac1a2f;
font-size: 10pt;
font: verdana;
}

legend.caution
{
font-size: 85%;
color: #ac1a2f;
text-align: right;
margin: 0px 0px 3px 0px;
top: 2px;
position: relative;
right: -5px;
}

fieldset.example
{
padding: 3px;
border: solid 1px #4169e1;
font: 10pt;
font: verdana;
}

legend.example
{
font-size: 85%;
color: #4169e1;
text-align: left;
margin: 0px 0px 3px 0px;
top: 2px;
position: relative;
right: -5px;
}

[NorthEast]

The legend color can be inherited from the fieldset; so if the color is the only difference in each legend class, then you could remove all of the legend classes and just set the color in the fieldset.

[chunkee]

Thanks Dave!