Chapter 1: example form elements not aligned correctly

I am not sure everyone saw it.

The Chapater 1 example, advanced_forms_made_easy/finished_form.html, have a few form elements.

However, “Middle Initial” is moved one pixel left and “Date of Move to this Address” is moved one pixel right compared to other elements in the same tab. It looks ugly. It happens in both IE and FF. Can somebody explain why?

I am using a local Dojo (1.1.1) set up as the book suggests. I am using IE7.0 and FF2.0. My web server is IIS. I am using WinXp.

Thanks!

More info:

The interesting thing is: If I removed dojo css and js in <header>, the form elements are aligned just right.

Hi David, that was the first thing, that bothered me! The solution is simple: adjust the css style!

tundra.css, lines 234:
.tundra .dijitInputField INPUT, .tundra .dijitTextBox, .tundra .dijitComboBox, .tundra .dijitSpinner { /*0.1 intendation is awkward, removed!*/ margin: 0em 0.0em; }
Hope, this helps! ;)

Roman,

That is very helpful!!! I did what you suggested and it works.

However, this brings me another concern. This tundra theme, coming out-of-box, is supposed
to be used and tested by a large audience and should be well-engineered. Shouldn’t they
already see this issue? tundra.css is kind of a system file. The change you and I made will have no
bad effect for other situations? What do you think?

Thanks a million!!!

David

Actually, that’s my bad. I should’ve made all the INPUT boxes as dijit.form.TextBox elements. That’ll fix the alignment and make the boxes the same color/style as the dijit.form.ValidatingTextBoxes. Plus, you can change the Tundra theme to something else without having to hack another CSS.

Craig,

Changing all the INPUT boxes to be digit.form.TextBox elements does fix the alignment and make the boxes the same color/style, but unfortunately it also makes them non-responsive to the size element. The middle initial for example is no longer size=1 even though the size=1 is still part of the coding. They all assume the size that must be specified somewhere in one of the css elements and that overrides the size element on the html page. This happens on my computer. (WinXP Pro, using Firefox 3.0.1, Internet Explorer 7, and Opera 9. and IIS)

Thanks for your great work in this book, by the way. Great read!

Dick