design
Solution:
This is a bug which crops in when within the layout, you set the parent container's overflow property to “auto” and placing a relatively positioned item within it. This relatively positioned item tends to violate the parent element's boundaries and overflows. The simplest fix to this bug is to position the parent container relatively.
I improved usability by reducing it to one input text field and two buttons for two functionalities. On the front end I used "formaction" attribute in buttons instead of "action" attribute in the form. So I reduced everything into one form. In the backend, it was a bit more complicated. I needed to differentiate between different types of input and gather different classes of the two functionalities into one class. This helped remove code duplicates and made the code easier to understand. In the end, the usability of the web page improved greatly and the backend code was also improved.
Taggings:
Improving usability of input forms in web applications
In the web application I am developing, I had a barcode input text field and a URL input text field for two different functions of the application. This resulted in 4 text input fields and 4 submit buttons. The layout of the web page became confusing for new users and clattered. I needed to reduce input fields in the front end but also in the already implemented back end.
Taggings:
CSS-based layout with fixed menu
<p>CSS-based web page layouts are more and more substituting table-based layouts, since processing of table-based layouts is more complex (which may prevent screen readers from correctly reading a page), and not easy to style. Pure CSS-based layouts allow complete customization by simply exchanging the style sheet.</p><p>The task of creating a pure CSS menu, which is located at a fixed position, emerges from the need for a menu which will always be available, wherever the user is scrolling. To achieve this goal, Javascript could be used, but this approach may not work on all web browsers, and component manipulations written in Javascript are not as easy to change as pure CSS.</p><p>Thus, a menu has to be created which fulfills these requirements:</p><p>- CSS, but not Javascript</p><p>- Always visible, even when the user resizes window (up to a certain degree)</p><p>- Fixed distance to the page's main content (main content is fixed size and centered in the page)</p><p>- Easy to style and customize</p><p>- Same result in all modern web browsers</p>
Displaying Websites on IE Browsers correctly
As most non-flash sites use xhtml and css only, webdesigner (or those who realize such tricky designs) must face with issues that in the end this website has to be displayed correctly — some kind of platform/browser independency. Indeed, (X)HTML is standardized by the W3C, but web-browser render websites totally differently — caused by bugs mostly (IE). This becomes quite cruical, as for ex. designs require precisely fitting their components.
