Symphony.

Is it just me or do more people see file upload fields like this?

I use Firefox 3.6.8, but other browser seem to render this incorrect as well…

Is there supposed to be a screenshot in this post, Giel?

I now have the screenshots embedded

Do you have any JavaScript based extensions installed?

Are you seeing any JavaScript errors in your console?

I use extensions which use JavaScript (such as the multilanguage support extension and CKEditor).

CKEditor is giving an error.

But……

When I disable JavaScript, the CSS is still looking crippled, so I’m not sure if JavaScript is causing this error :-S

From what I can see in the screenshots the upload field information is not inside its label as it should be. Is this the default upload field?

Yes, and this is the HTML source:

<div class="field field-upload">
  <label class="file">Kleine foto
    <i>Optional</i>
    <span>
      <input name="fields[kleine-foto]" type="file">
    </span>
  </label>
</div>

Could it be that this is caused because the input-tag is not properly closed? ( with /> ).

Ahhhh!!!

The CKEditor-plugin has a declaration:

label span {
  display:inline;
}

Which causes the layout to explode! I’ll file this as an issue for the CKEditor Extension

Changing it to this rule seems to fix the issue:

.cke_editor span {
  display: inline;
}