Is it really the intention that reset.css makes buttons not look like buttons and fieldsets not like fieldsets?

I find I am resetting the reset...

Comments

psynaptic’s picture

Well, yes. Because it unifies the look of elements across browsers.

Buttons

If you leave buttons as they are you have vastly different looking buttons in different browsers. Also, designers tend to style buttons completely differently from the default browser ones so this gets you most of the way there by making them consistent across different browsers, set up ready for you to add a few styles to make them bespoke to each individual site.

I think they look pretty decent as they are, especially now I have removed the uppercase and lightened the default colours for them all.

Fieldsets

Fieldsets have been a real pain in the backside so I followed (read: stole from) yhahn in changing the markup to h2 and div rather than the default fieldset tags. This greatly simplifies styling and unifies them with all the other "objects" (nodes, comments, blocks, boxes, etc.)

joachim’s picture

> If you leave buttons as they are you have vastly different looking buttons in different browsers.

That's kinda the plan, though, isn't it? I like my OS X style buttons on OS X.

The problem with the fieldsets as they are now in Clean:
- the expanding is jumpy. It's one moment a box, click, and BANG! stuff.
- nested fieldsets are unclear. See lightbox2 settings, for example.

Also, they're not meant to be objects like nodes and divs and stuff -- they're form elements.

On both counts, I'm really not sure about changing the browser experience -- this is something the user is accustomed to on all sites.

psynaptic’s picture

That's kinda the plan, though, isn't it? I like my OS X style buttons on OS X.

I know what you mean and I used to 100% agree with you but if you look at non-styled IE buttons they look terrible. None of the designers I have used use default browser buttons in their designs. You then have to spend time on each project styling them which can be a pain. I decided to neutralise them so it would cut down on the amount of time it takes to style them each time.

The problem with the fieldsets as they are now in Clean:
- the expanding is jumpy. It's one moment a box, click, and BANG! stuff.

The default behaviour of fieldsets is annoying. This is an improvement IMO. If it's good enough for Development Seed, it's good enough for me.

- nested fieldsets are unclear. See lightbox2 settings, for example.

I agree. Without going back to fieldsets what is the solution? Should we indent them?

Also, they're not meant to be objects like nodes and divs and stuff -- they're form elements.

Having more elements using a consistent format makes your job as a themer easier.

On both counts, I'm really not sure about changing the browser experience -- this is something the user is accustomed to on all sites.

What exactly are you referring to? The buttons or the fieldsets?

psynaptic’s picture

I added:

div.fieldset .fieldset-content {
  padding: 10px;
}

This looks nicer for normal elements inside fieldsets and also helps by providing visual feedback for nested fieldset.

psynaptic’s picture

I have changed the structure of the reset.css and color.css to make it eaiser to change back to the default butttons.

All you need to do is copy color.css from the theme into your subtheme and delete or edit:

input,
textarea,
select {
  color: #494949;
  background-color: #fff;
}

input.form-submit {
  background-color: #E6E6E6;
  border: 1px solid #E6E6E6;
}

This will revert the buttons back to default (ish).

psynaptic’s picture

Status: Active » Fixed

After conversation in IRC about fieldset styling this is now considered fixed.

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.