234740 - <fieldset> default view is nicer under IE

Status: RESOLVED FIXED

(Core :: Layout: Form Controls, enhancement)

Description

[franCk]

User-Agent:       
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.6) Gecko/20040206 Firefox/0.8

The default rendering of Fieldset is much nicer under IE6.0SP1, with round
corner and a more uniform spacing between content and border. Can we improve that?
(I know style sheet can improve it - but default rendering is important too,
especially because it looks nice 'enough' on IE, few people will think to style
their fieldset)

Reproducible: Always
Steps to Reproduce:
1.
2.
3.

Comment 1

[Boris Zbarsky [:bzbarsky]]

Feel free to attach styles that you think would make it better.  The default
rendering is determined by
http://lxr.mozilla.org/seamonkey/source/layout/html/document/src/forms.css#63 at
the moment.  If your styles make it look better and don't break anything, no
reason we can't just add them there.

Comment 2

[Adam Hauner]

franCk: Could you attach screenshot? With Windows 2000 I get same result in MSIE
6 SP1 as in trunk build of Mozilla.

Comment 3

[franCk]

Attachment: GIF image showing fieldset behaviour in both browsers

Comment 4

[franCk]

In the screenshot notice the round corner in IE (yes IE can do round corner too)
and the nicer looking space at the top (I bet they ignore the presence of the
legend to compute the top padding).

Adam: is there is something wrong with my system? It si definetely not the same
here, how is it on W2k?

Boris: thanks for the lead, I'll try something as soon as I have more cycle, but
if other wants to do it before, just do it!

(note: by nicer I don't necessarily mind 'like IE', for example I don't believe
that styling the legend in blue as in IE is a good idea, it makes it look like a
link which it is not.)

Comment 5

[Boris Zbarsky [:bzbarsky]]

Looks to me from that screenshot like IE is applying the OS "fieldset" style to
that fieldset.... are fieldsets in native dialogs drawn the same way?

Comment 6

[Adam Hauner]

Attachment: Fieldset in Mozilla with "-moz-border-radius:5px"

I added this code to my userContent.css: fieldset {-moz-border-radius:5px} 

(In reply to comment #4)
> Adam: is there is something wrong with my system? It si definetely not the
same
> here, how is it on W2k?

Not, nothing wrong. Just Both MSIE 6.0 and Mozilla have right-angled corners on
my Windows 2000.

Comment 7

[franCk]

Attachment: Different behaviour of fieldset with new proposal for default in Moz

Finally I had more cycles :-) I tried a few ones and feel pretty satisfied with
the 'Using silver border, round corner, tweaked padding and standard legend'
version.

Trying a few things with the legend color did not prove very satisfying - thus
if someone wants to check in the revised default for fieldset I bet it will
improve our look, it is actually sad that Moz, that has CSS round corner
support, is beaten by IE here!

Here is the style, no need for diff I bet...

display: block;
margin-left: 2px;
margin-right: 2px; 
padding: 0.35em 0.625em 0.75em ; 
border: 1px solid silver; 
-moz-border-radius:0.5em;

Thanks!

Comment 8

[Adam Hauner]

Attachment: screenshot with non-white background

franCk: You have to use system color keywords - see
http://www.w3.org/TR/REC-CSS2/ui.html#system-colors
Also you should try to increase font size and watch margin around legent text.

Comment 9

[franCk]

Attachment: Corrected color to match UI

Thanks Adam - I learned something today :-)

This new attachment is using ThreeDFace color (as the original border actually)
and I feel it looks OK. For the margin, I like it tight, I bet, thus I leave it
that way.

Finally concerning the <legend> tag I thinkthe default behaviour is good enough
- and any way it is much more likely that people will style it, because some
like it bold, some like it blue, some like it hot :-) 

Remember here we just want to improve the default behaviour of <fieldset>
because the one in IE is appealing enough for many people and they won't style
it...

To summarize the new proposed default style for <fieldset> with the help of
Adam would be:

display: block;
margin-left: 2px;
margin-right: 2px; 
padding: 0.35em 0.625em 0.75em; 
border: 1px solid ThreeDFace; 
-moz-border-radius:0.5em;

(it is the third one in the attachment)

Comment 10

[Adam Hauner]

This change in your proposed CSS makes fieldset border invisible on gray
background, original was okay:

- border: 2px groove ThreeDFace;
+ border: 1px solid ThreeDFace;

In attached testcase in 4th example you also changed color of legend text
without setting background, so legend also disappeared in my browser.

Comment 11

[franCk]

Attachment: A new trial :-/

Well Adam - now I understand why nobody does UI stuff :-)
You're damn right and I have already sent 3 attachnment to get a very little
stuff done, sorry guys :-)

In this last version I use the same color for the border as the color used for
the input box (Graytext) and it make even some sense - but I left the solid
look I feel a group is better like that with a solid line.

Thus here it is (3rd case as usual in the attachment) :

display: block;
margin-left: 2px;
margin-right: 2px; 
padding: 0.35em 0.625em 0.75em; 
border: 1px solid Graytext; 
-moz-border-radius:0.5em;

Looks nice to me! Adam? Luckily, you seem to have a special color set :-)

(Note that for the legend stuff, although I don't care really, in the fifth
case I've tried to set the color to what seems 'meaningful' (Highlight) and in
the last case the same color as the border (Graytext). 

However I don't know if it matches IE stuff because I'm at home and I don't
have IESP1 under XP, but only IE 6.0 unde W98 - this actually explains why your
mileage may vary as you noticed Boris and Adam :-). The rendering depends on
the OS and it must use some OS control, anyway I'm not sugesting any change to
legend only to fieldset... and BTW, I feel the rounded corner is nice even
under W98 :-)

Comment 12

[Adam Hauner]

> border: 1px solid Graytext;

GrayText keyword is for "Grayed (disabled) text", so why common (probably
active) fieldset have to looks like other disabled text in system?

> Adam? Luckily, you seem to have a special color set :-)

I have window background setted to 192:192:192 (RGB), because default white is
to bright for my eyes.

Comment 13

[Adam Hauner]

Attachment: Next trial

1st and 2nd are same as in previous trials, 3rd is changing corners and
padding.

Comment 14

[Adam Hauner]

Attachment: patch

I'l try it.
-> aha

This patch adds radius border and tweaks top padding.

Comment 15

[Adam Hauner]

Comment on attachment 141856 [details] [diff] [review]
patch

I have one note: -moz-border-radius can't be changed by web author CSS, because
this property IMHO doesn't meet CSS syntax.

Comment 16

[Gervase Markham [:gerv]]

> -moz-border-radius can't be changed by web author CSS, because
> this property IMHO doesn't meet CSS syntax.

It can, and it does (for unofficial extensions) :-)

Gerv

Comment 17

[Adam Hauner]

Gerv: AFAIK CSS properties have to start with "a-z" letter (CSS 2.0 - 4.1.1) and
char "-" doesn't meet this requirements. When non-Gecko UA meets "-moz-*"
property, it should generate parse error - because it's incorrect format of
property name, not unknown property that should be ignored.

For example some 1.x version of Safari ignore rest of CSS definition file after
"-moz-some-property:some-value}".

IMHO Mozilla internal CSS properties starts with "-" char, because such names
can't colidate with any further CSS property name.

Boris or David, correct me, if it's wrong interpretation of CSS spec.

Comment 18

[Hixie (not reading bugmail)]

CSS2.1 changes this.

Comment 19

[Adam Hauner]

Ian: Thank for note. CSS 2.1 WD allows "-"
<http://www.w3.org/TR/CSS21/syndata.html#q4>.

Comment 20

[franCk]

Attachment: Test to explore IE behaviour in overriding the default

Well I believe adam has a point here and it may cause a small problem that
could change our perception of the proposal (and I'm the original suggester
:-). Imagine the following situation, we change the default behaviour to :

-moz-border-radius 0.5em

But then, if for some reason, someone does not want anymore round corner, is he
 forced to use a -moz-border-radius 0em in his style? If yes, I'm sure you see
the problem, nobody (except us :-) would do that and people will complain that
Mozilla does not render the same as IE because it does round corner.

Note that apparently IE has a behaviour that I believe is different from
Mozilla (but I may be wrong, correct me if I am) - if there is no styling (CSS
or local) then IE apply the default style with round corner and blue legend,
which is, as Boris noted, the same as the OS style for fieldset.

But as soon as there is a style for the fieldset border (border: 1px groove; or
even, and that's more interesting, border-width:2px;) then the round corner
disappear and the whole style of the fieldset border is replaced by a default
look quite similar to what Mozilla does (groove except it has a different
color). You see that in the attachment with the example 2 (there is
border-width:3px:).

So what do you think? Before we introduce a default behaviour that can not be
overriden shall we wait for the implementation of the CSS2.1 round corner
stuff, which at least will give the chance to everybody to set the value :-)

OK that's my thought of the day :-)
PS: note that I may be wrong and I'm not to sure how to test that, maybe the
-moz-border-radius is overiden in the same way as in IE (but someone will have
to explain me why :-)

PPS: oh, by the way I prefer my color for the fieldset (Graytext) as in the
last example in the attachment because although the fieldset is an active
element, the line is just here to suggest a grouping, help the eyes, and is
secondary, should stay in the background... hence it is not active really but
fainter. However whatever, I'll be happy even with a black line, as soon as it
has round corner, a tweaked padding and maybe a style of solid (groove, which
looks really ugly with square corner (you have the feeling that the line breaks
in the lower left and upper right corners) is more or less OK with round
corner, however I don't see why it should be a 3D element it is just a grouping
not a button, I suggest solid as a style)...

Comment 21

[Boris Zbarsky [:bzbarsky]]

Sounds to me like IE is doing the equivalent of -moz-appearance, like I said in
comment 5.

Comment 22

[Tommi]

*** Bug 236387 has been marked as a duplicate of this bug. ***

Comment 23

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

Comment on attachment 141856 [details] [diff] [review]
patch

The padding change is fine with me, but I'd rather stay away from the
-moz-border-radius.  r+sr=dbaron on the padding change, though.

Comment 24

[Adam Hauner]

Attachment: only padding change patch

David, could you check it to the tree?

Comment 25

[Jan Varga [:janv]]

Comment on attachment 143216 [details] [diff] [review]
only padding change patch

checked in

Comment 26

[Paul Gregg]

FWIW, my thoughts...

Some (possibly) useful information:-

* On Windows, you will only see the rounded borders in IE on WinXP and above
  - XP is the first WinOS to implement Themes at the widget level ie. Luna
  - Therefore, the appearance of the corners and colors is dependant on the
    current theme

* To really fix this bug, we need to draw the OS's current theme for Fieldset
  - David Hyatt added a new Theme API back in 2001/2002
    (http://www.mozilla.org/projects/xul/theme.html)
  - Looks like we need to implement NS_THEME_FIELDSET on Windows (+ other OS's)
    * a bug hasn't been filed yet
    * see meta Bug 117584 - "NS_THEME_* implementations (meta bug)"
  - Windows native control for Fieldset is a GroupBox
http://msdn.microsoft.com/library/default.asp?url=/library/en-us/tools/tools/groupbox_control.asp


Therefore, any border-radius set in CSS is going to be wrong, since the radius
decision is based on a particular platform & OS version & current theme.

I'd imagine that the Fieldset's radius, color, thickness, legend font, legend
font color etc. are all themeable.  Therefore the NS_THEME_FIELDSET would have
to lookup the current properties for the native Groupbox.


Also, I'm not sure about the changes to the padding for Fieldset, it seems that
the changes were to match one browser (IE6) on one OS (WinXP).  Don't know if
they will be ok on other OS's, wonder if there is a spec for determining the
padding for a Fieldset....

Comment 27

[franCk]

OK I verified it today with Firefox PR. It is indeed nicer with the new padding
- and I've checked on different platform it worked (but not on Mac). 
I think I'll close that one, because the change to make it work 'as in IE' are
extensive and probably covered by some other bug on -moz-appearance
implementation, as Boris explanation in comment 21 suggest.

As far as I'm concerned this bug has fulfilled his role - but feel free to
differ and reopen it :-)