Re: [WSG] Styling of legend in Firefox
What's going on here is that all form elements, which includes fieldsets and labels, are replaced elements, which by the letter of the W3C specs, are not required to honor direct CSS styling. IE's ties into the operating system actually helps it here because IE simply exposes all the styling options on the controls available in the API to CSS and that is why IE has the richest form styling options of any browser. Other browsers will simply ignore any on principle, like Opera and Safari. Gecko at least tries, but can fail. The only cross-browser solution I've found is that if you want something displayed just so that to abandon styling the fieldset and produce the effect with different markup. Not the ideal solution but we can't complain they arn't complying with specs, just being inconsistent. -- Chris Griego ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
[WSG] Styling of legend in Firefox
I am having some difficulties to position the content of legend using CSS in Firefox. Firefox (and IE) default positions the legend so that it overlaps with the border of the fieldset. Which in general is quite nice, but in my particular case I want the content of the legend to be inside the fieldset's border, not overlapping it. IE behaves quite friendly in this case: I give the legend a padding-top and it moves down into the fieldset. But Firefox wrecks things by moving the fieldset at the same time as the padding. Another interesting thing is that I cannot give the legend a background-color that would run the entire length of the fieldset. Even if I give legend a display:block and a set width, these settings are being ignored in Firefox. I'd be interested to hear whether somebody else has found a way to solve this problem? To me it seems that Firefox forces a certain layout on the legend and there's no possibility to move away from that. Thanks for the feedback! Andreas Boehmer User Experience Consultant Phone: (03) 9386 8907 Mobile: (0411) 097 038 http://www.addictiveMedia.com.au Consulting | Accessibility | Usability | Development ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
RE: [WSG] Styling of legend in Firefox
-Original Message- From: Andreas Boehmer [Addictive Media] [mailto:[EMAIL PROTECTED] Sent: Monday, 25 April 2005 7:51 PM To: wsg@webstandardsgroup.org Subject: [WSG] Styling of legend in Firefox I am having some difficulties to position the content of legend using CSS in Firefox. Oh, I forgot the URL: http://www.addictivemedia.com.au/clients/gta/home2.html What I am trying to do is to get the legend Login Details to display inside the background image. Thanks! ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
RE: [WSG] Styling of legend in Firefox
Andreas Boehmer [Addictive Media] I am having some difficulties to position the content of legend using CSS in Firefox. Legends are notoriously difficult (impossible?) to style consistently across browsers, and yes...in addition to that, FF seems to put additional roadblocks in the way - see for instance the recent thread about my little frugal google experiment http://www.mail-archive.com/wsg%40webstandardsgroup.org/msg16240.html Now, as far as giving the legend a background as wide as the fieldset: as you found out, FF ignores any width even if you try to force display:block You may have some success using padding on the legend - but that will obviously make for inconsistent results. You may have to experiment with more esoteric solutions such as giving a non-repeating, top positioned background to the fieldset itself (but again, I'd be surprised if it can be made to work reasonably well across browsers) Patrick Patrick H. Lauke Webmaster / University of Salford http://www.salford.ac.uk ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
RE: [WSG] Styling of legend in Firefox
Andreas Boehmer [Addictive Media]
Oh, I forgot the URL:
http://www.addictivemedia.com.au/clients/gta/home2.html
If you can live with the weird margin at the top (which shouldn't affect
the form, but it does ?!), you could try something like
#main fieldset {position:relative; border: none; }
#main legend {position: absolute; margin-top: 50px;}
This works for FF only...IE seems to get this one right, for a change,
and makes a mess. *shrug*
Patrick
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
Re: [WSG] Styling of legend in Firefox
Hi
Firefox has this to say about the way it styles forms by default. If
you can override these then it may help..
These default browser styles are found in res/*.css of your firefox install dir.
e.g
/usr/lib/firefox-1.0.2/res/forms.css in my (and this) case
To get around the issue, I style the form not the fieldset tag so that
the legend appears fully enclosed by the form. This still works
semantically as, although the fieldset is invisible, it is linked
structurally to the legend in the underlying markup... therefore
providing the captioning effect outlined in the W3C rec
17.10
The LEGEND element allows authors to assign a caption to a FIELDSET.
The legend improves accessibility when the FIELDSET is rendered
non-visually.
As for which user agent renders it correctly visually -- none of them
do as that part is not outlined in the relevant standards documents.
You could probably style the top of the form tag with a background
image so that the legend appears to stretch all the way across.
HTH
James
---
/**
Styles for old GFX form widgets
**/
@namespace url(http://www.w3.org/1999/xhtml); /* set default namespace
to HTML */
@namespace xul
url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);
*|*::-moz-fieldset-content {
display: block;
height: inherit; /* Need this so percentage heights of kids work right */
}
form {
display: block;
margin: 0 0 1em 0;
}
/* miscellaneous form elements */
legend {
padding-left: 2px;
padding-right: 2px;
border: none;
}
fieldset {
display: block;
margin-left: 2px;
margin-right: 2px;
padding: 0.35em 0.625em 0.75em;
border: 2px groove ThreeDFace;
}
label {
cursor: default;
}
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
RE: [WSG] Styling of legend in Firefox
-Original Message-
From: Patrick Lauke [mailto:[EMAIL PROTECTED]
Sent: Monday, 25 April 2005 8:51 PM
To: wsg@webstandardsgroup.org
Subject: RE: [WSG] Styling of legend in Firefox
If you can live with the weird margin at the top (which
shouldn't affect
the form, but it does ?!), you could try something like
#main fieldset {position:relative; border: none; }
#main legend {position: absolute; margin-top: 50px;}
This works for FF only...IE seems to get this one right, for a change,
and makes a mess. *shrug*
Nasty browser business. :)
I am tempted to double up my legend:
fieldset
legendLogin Details/legend
div class=titleLogin Details/div
[...]
/fieldset
#main legend{display:none}
.title{background-image:url(images/fieldset_small_bg.jpg);
background-repeat:no-repeat;}
This way I get valid HTML (legend inside fieldset) as well as having a title
to position and style however I want. But if somebody views this page
without css they will be wondering what the hell I was thinking. And it's
not really in the idea of web standards...
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
RE: [WSG] Styling of legend in Firefox
-Original Message- From: James Ellis [mailto:[EMAIL PROTECTED] Sent: Monday, 25 April 2005 9:01 PM To: wsg@webstandardsgroup.org Subject: Re: [WSG] Styling of legend in Firefox To get around the issue, I style the form not the fieldset tag so that the legend appears fully enclosed by the form. This still works semantically as, although the fieldset is invisible, it is linked structurally to the legend in the underlying markup... therefore providing the captioning effect outlined in the W3C rec I was thinking about that, but it will only work if I have got no more than one fieldset per form. In my case most of the pages of my website will have multiple fieldsets in each form. ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Styling of legend in Firefox
Hi Then what about using some relative positioning to offset the legend? position : relative; top : 10px; /* i think that is right - or is it -10px to move it down the required amount ? */ Cheers James On 4/25/05, Andreas Boehmer [Addictive Media] [EMAIL PROTECTED] wrote: I was thinking about that, but it will only work if I have got no more than one fieldset per form. In my case most of the pages of my website will have multiple fieldsets in each form. ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Styling of legend in Firefox
I did some with legend tag on my website on all those form leilds. check this out,,, http://www.meucarronovo.com.br Andreas Boehmer [Addictive Media] wrote: -Original Message- From: James Ellis [mailto:[EMAIL PROTECTED]] Sent: Monday, 25 April 2005 9:01 PM To: wsg@webstandardsgroup.org Subject: Re: [WSG] Styling of legend in Firefox To get around the issue, I style the form not the fieldset tag so that the legend appears fully enclosed by the form. This still works semantically as, although the fieldset is invisible, it is linked structurally to the legend in the underlying markup... therefore providing the "captioning" effect outlined in the W3C rec I was thinking about that, but it will only work if I have got no more than one fieldset per form. In my case most of the pages of my website will have multiple fieldsets in each form. ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help ** i did -- att, Genau L. Jnior ___ WebDesigner/Media Developer www.meucarronovo.com.br/quemsomos.php +55 (41)342-5757 ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help **
RE: [WSG] Styling of legend in Firefox
You have got what I want, but as far as I can see you didn't use legend for it, but used a h4 for the titles of your fieldsets. I want to do the same, but using legends if possible. From: Genau L. Júnior [mailto:[EMAIL PROTECTED] Sent: Monday, 25 April 2005 8:44 PM To: wsg@webstandardsgroup.org Subject: Re: [WSG] Styling of legend in Firefox I did some with legend tag on my website on all those form leilds. check this out,,, http://www.meucarronovo.com.br ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
RE: [WSG] Styling of legend in Firefox
-Original Message- From: James Ellis [mailto:[EMAIL PROTECTED] Sent: Monday, 25 April 2005 9:47 PM To: wsg@webstandardsgroup.org Subject: Re: [WSG] Styling of legend in Firefox Hi Then what about using some relative positioning to offset the legend? position : relative; top : 10px; /* i think that is right - or is it -10px to move it down the required amount ? */ I tried that, but Firefox would pretty much ignore it. ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Styling of legend in Firefox
Yes I have had this problem too. I end up trying to ignore the inconcistency and just live with it. What does look cool is if you put a padding (0.2em) or something small on the legend. Give it a border, the same colour as the fieldset, then a new background colour. add cursor: pointer, and with a little javascript you can have a collapsing form :) I love it, rarely do it, but its a cool application I think. :) Cheers! - Chris Andreas Boehmer [Addictive Media] wrote: I am having some difficulties to position the content of legend using CSS in Firefox. Firefox (and IE) default positions the legend so that it overlaps with the border of the fieldset. Which in general is quite nice, but in my particular case I want the content of the legend to be inside the fieldset's border, not overlapping it. IE behaves quite friendly in this case: I give the legend a padding-top and it moves down into the fieldset. But Firefox wrecks things by moving the fieldset at the same time as the padding. Another interesting thing is that I cannot give the legend a background-color that would run the entire length of the fieldset. Even if I give legend a display:block and a set width, these settings are being ignored in Firefox. I'd be interested to hear whether somebody else has found a way to solve this problem? To me it seems that Firefox forces a certain layout on the legend and there's no possibility to move away from that. Thanks for the feedback! Andreas Boehmer User Experience Consultant Phone: (03) 9386 8907 Mobile: (0411) 097 038 http://www.addictiveMedia.com.au Consulting | Accessibility | Usability | Development ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help ** ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
