Software Salariman: Web

Showing posts with label Web. Show all posts

2009-04-25

Internet Explorer Submit Button Bug

While testing a simple form in Firefox and MSIE 7, I found that my server-side program got different values for HTML submit buttons depending on the browser. Below is a test HTML file to demonstrate the problem. Copy and paste the text below into a test file, open the file in your browser and press the Test button.

<html>
  <body>
    <form method='get'>
      <button name='testSubmitButton' type='submit' value='value1'>Test</button>
    </form>
  </body>
</html>

Examine the URL in the address bar.

In Firefox 3.0.9 and Opera 9.52, the URL is: file:// … MsieSubmitButton.html?testSubmitButton=value1, so the value is sent from the browser with the button name.

In MSIE 6.0.2900.5512 and MSIE 7.0.6001.18000, the URL is: file:// … MsieSubmitButton.html?testSubmitButton=Test, so the text of the button is sent from the browser with the button name.

Both MSIE's behaviour doesn't conform to the HTML 4.01 recommendation on Controls:

Each control has both an initial value and a current value, both of which are character strings. … In general, a control's "initial value" may be specified with the control element's value (emphasis mine) attribute. …
The control's "current value" is first set to the initial value…
…
When a form is submitted for processing, some controls have their name paired with their current value and these pairs are submitted with the form. …

My workaround was to give each submit button a unique name and change the server-side program to use the button name instead of the button value. While this was adequate for my task, it was an annoying, basic problem that shouldn't still exist.

While researching this bug, I found other issues with MSIE when using submit buttons in HTML forms, so be careful!

2008-01-27

Javascript Input Focus Annoyance

Many web sites have forms that move the keyboard cursor into an input field. For example, view your favourite search engine page and note that the cursor is in the search field. Enter a query, press RETURN, wait for the results, move the cursor out of the search field by hitting the TAB key, click on a link (don't open a new tab or window) then return to the search page. You should find that the cursor is back in the search field. If you usually just use the keyboard instead of the mouse, you have to hit TAB to move the cursor out of that field before you can scroll the page up or down. Some web sites have a search field in every page, so it is even more annoying to hit the TAB key in every page. (Why do I even persist in using these web sites?)

Web pages that display this behaviour usually use Javascript's focus() function. If you view the source code of such pages, you should see something like this: document. … .focus().

There's several solutions to this annoyance in Firefox.

The most general method is to disable Javascript by unchecking the Tools / Options / Content / Enable Javascript option, rather like using a sledgehammer to kill an ant.

If you just want to stop web pages from using the focus() method for the text fields (the INPUT tag), you can modify Firefox's security policy by editing your user.js preferences file:

user_pref("capability.policy.default.HTMLInputElement.focus", "noAccess");

Note: The policy named default is applied for all sites.

If you only want to stop certain sites from using the focus() method, create a new policy and specify when it should be applied, for instance:

user_pref("capability.policy.policynames", "noinputfocus");
user_pref("capability.policy.noinputfocus.sites", "<site list>");
user_pref("capability.policy.noinputfocus.HTMLInputElement.focus", "noAccess");

In this example, the noinputfocus policy is applied to the list of sites specified in noinputfocus.sites property.

28-Jan-2008: You have to restart Firefox before your policy is applied.

2006-02-02

Software: XML Schema Global versus Local Elements

After my encounter with namespaces in XML Schema, I was left wondering when a schema designer should or should not make local elements belong to the target namespace (or made global). The best discussion I found was in this thread which was summarised in the Hide Namespaces Versus Expose Namespaces article.

Software: XML Namespaces and Schemas

This error message from Altova's XMLSpy bit me while I was testing an XML Schema:

Unexpected element 'title' in element 'book'.  Expected: title

Here is the sample document:

<?xml version="1.0"?>
<book
  xmlns="bookSchema"
  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xsi:schemaLocation="bookSchema book.xsd"
  >
  <title>Snoopy</title>
  <author>Charles Schulz</author>
</book>

And here is the schema:

<?xml version="1.0" ?>
<xs:schema
  xmlns:xs="http://www.w3.org/2001/XMLSchema" 
  targetNamespace="bookSchema"
>
  <xs:element name="book">
    <xs:complexType>
      <xs:sequence>
        <xs:element name="title" type="xs:string"/>
        <xs:element name="author" type="xs:string"/>
      </xs:sequence>
    </xs:complexType>
  </xs:element>
</xs:schema>

Since I wasn't making any headway with XMLSpy's validator, I tried xsv from the University of Edinburgh and I received a more meaningful error message:

element {bookSchema}:title not allowed here (1) in element {bookSchema}:book, expecting [{None}:title]:

It turns out that in the XML Schema, title is not by default in the bookSchema namespace (see Qualified Locals in XML Schema Primer). The solution is to either add elementFormDefault="qualified" into the schema and force all local elements into the namespace or ensure that only the root element is in the namespace (using <bk:book xmlns:bk="bookSchema">) while its descendants are not in any namespace.

2005-10-04

Software: IE6 Fieldsets Leak

When creating HTML forms with the <fieldset> element, I add some padding so that the elements within the fieldset do not touch their container's border. In the CSS box model, padding is the amount of space between a box's border and its contents.

Below is an example of a fieldset definition that has a legend in the fieldset, a label and a field:

<div style="background-color:9dbc80">
  Hello world
<fieldset style="background-color:#d1dfd6;margin:0px;
padding:4px;border:1px solid black">
  <legend>Test legend</legend>
 <label>Test:</label>
 <input type="text" value="This is a test"/>
</fieldset>
  Bye world.
</div>

And below is a rendering of the example defintion.

Hello world

Test legend Test:

Bye world.

If you are using IE6, you should see that the background of the fieldset extends beyond the border to surround the legend text, while if you are using Firefox, the background is entirely enclosed within the border of the fieldset. Even worse in IE6, the amount of area beyond the margin depends on the padding value!

2005-08-16

Software: Firefox HTML Validator Extension

If you want a quick way to validate your web pages, try the Firefox HTML Validator extension. Install the extension, restart Firefox and you will notice a new icon in the bottom right-hand corner of your window. When your mouse pointer hovers over that icon, Firefox displays a tooltip with the number of errors, if any, in the current page. Select that icon and Firefox will display a View Source dialog with more information about errors in that page. Then, if you select the OK button in that dialog, Firefox displays a new window with the source view of the current page in one pane and two extra panes containing errors and help.

2005-07-26

Software: IE6 crops child elements

While trying to implement a list of buttons, I found that IE6 crops the tops and bottoms of child elements when the parent element is a block level element. For example, if the parent is a ul element, the li elements would be cropped.

If you are using IE6, you should see that the top and bottom borders of the following TEST boxes are missing. Firefox users would see two boxes with borders around each one, as expected.

TEST

TEST

Below is the code to generate the TEST boxes.

<ul style="position:absolute">
 <li style="border:1px solid darkgreen;display:inline;">TEST</li>
</ul>
<div style="position:absolute">
 <span style="border:1px solid darkgreen">TEST</span>
</div>

The work-around is to add padding at the top and bottom of the parent element, e.g. padding:1px 0px 1px 0px, resulting in …

TEST

TEST

2005-07-25

Software: Chubby IE6 buttons

I found that the padding IE6's form buttons is proportional to the length of the button's text. If you're using IE6 and viewing this page, you should see that the padding in the second button is larger than the padding in the first button.

2005-07-06

Software: HTML behaviours

Tags in DHTML pages quickly get cluttered with numerous on-some-event="fn(id)" attributes, making it nightmarish to maintain hand-coded pages. Instead bind elements and behaviours (events and functions) separately from tags. Microsoft introduced behaviours for Internet Explorer 5.5 for special effects in a page but their implementation uses non-standard additions (unsurprisingly) to CSS. Ben Nolan wrote a browser independent behaviour library and Lambda-the-ultimate forum has a discussion. Using CSS selectors to specify elements allows multiple HTML elements to have the same behaviour and multiple behaviours to be mapped to one HTML element (as long as the events don't overlap). Très cool indeed!

2005-06-01

Software: CSS Multiple Class Selectors

I just found out that HTML elements can have multiple (CSS) class names, such as <p class="Number ReadOnly">. This feature allows a design approach where the CSS class selector names are defined first. If the style definitions are independent of each other, then your elements can combine a number of styles. If you have a style sheet with these definitions ...

.ReadOnly { background-color : aliceblue; }
.Number { text-align : right; }

... and your elements have multiple class names ...

<input class="ReadOnly" readonly="true" value="ABCD"/>
<input class="Number" value="123456"/>
<input class="Number ReadOnly" readonly="true" value="34566"/>

... then ...

123456 and 34566 should be right justified.
ABCD should be left-justified.
34566 and ABCD shold have coloured backgrounds.

2005-05-13

Software: CSS Selectors

Fresh from XSLT, I wanted to address sub-entities in CSS based on a top level element so that I wouldn't have to label every sub-entity with a class or id attribute. CSS selectors to the rescue! So, if I have the following HTML structure:

<table id="ATest">
  <thead>
    <tr><th>Head1</th><th>Head2</th></tr>
  </thead>
  <tbody>
    <tr><td>Data1</td><td>Data2</td></tr>
    <tr><td>Data1</td><td>Data2</td></tr>
  </tbody>
</table>

Then I can select different parts of the structure ...

table#ATest { /* Entire table */ }
table#ATest thead { /* Just the thead portion */ }
table#ATest tbody { /* Just the tbody portion */ }
table#ATest tr { /* All tr sub-entities */ }
table#ATest tbody tr { /* Just the tr entities in the tbody */ }
table#ATest tbody tr:first-child { /* Just the first tr in the tbody */ }

After some testing, I found that IE 6.0 doesn't support the use of the > selector for selecting the child (not descendent) of an entity nor does it support the :first-child pseudo class. Firefox 1.0x does support them, so I can have a different style for the first child of any entity.

Software Salariman