Tuesday, October 5, 2010

Avoid " "?

Last week I received bug report that says that there is some “garbage” in one of the screens of web application I am working on. This web application is written using JSP and targeted for mobile devices. I examined the screenshot attached to bug report and saw that kind white rectangle appears on screen. Such rectangles typically appear instead of some illegal character.
More interesting details:
  • This page has not being changed for a long time.
  • The bug happens on recently introduced Arabic version only
I was sure that the problem is in Arabic localized resource and examined it. Due to I do not read Arabic it was not as easy as it could be, but finally I understood that the problem is not there. Moreover everything works fine in FF. Then I tried 3 different phones: Nokia 6280, Nokia N73 and SonyEricson. The screen looked well everywhere except one device that was used in QA (Nokia N95).
Fortunately I found yet another N95 at the office and saw that the problem happens.
I checked what is written in code and saw the following:

<img align="middle" src="http://www.my.com/images/share.png"/>&nbsp;
<a class="actionHeader" style="margin-top:0px;" href="<%=shareLink%>"><%=Lang.getString("share") %></a><br />

The code contained newline right after  . I added some text between   and new line and problem disappeared. So, the solution was to add a single space after

Conclusions
My “fix” works but it is bad and very fragile solution. The best way is using margin style for img. Something like the following:

<img align="middle" style="margin-right:1em" src="http://
www.my.com/images/share.png"/>

No comments:

Post a Comment