Cleveland Web Design by Designing Interactive
Fixing Disappearing Cursors in Firefox
By: Josh Walsh in Code
The past few days I have been debugging the User Interface for Simpli5. Today I wrestled with a particularly frustrating issue in which cursors were completely vanishing from inputs in Firefox. While it did not affect the interaction of the input, I could still manipulate the text, it did cause quite an annoyance.
Here is a quick example which demonstrates the problem:
</div>
<div id="Dialog" style="position:absolute; top:10px; left: 10px; width: 300px; z-index: 1">
<input name="Username" type="text" />
</div>
The problem is caused by the change in Firefox’s current rending frame. Setting overflow:scroll on our #Container div causes Firefox to use that div as it’s current rending frame. Thus, the cursor is being rendered on the #Container, not on the #Dialog div, which contains the input. Effectively, the input is covering its own cursor.
The fix is a simple change in CSS inheritance. Without setting an overflow setting on the #Dialog div, we are inheriting the overflow:scroll from #Container. By setting the #Dialog div’s overflow setting back to it’s default overflow:auto we are changing Firefox’s rendering frame to the #Dialog div, thus bringing back our cursor.
Here is the fixed example:
</div>
<div id="Dialog" style="position:absolute; top:10px; left: 10px; width: 300px; z-index: 1; overflow:auto;">
<input name="Username" type="text" />
</div>
Thankfully, Mozilla has fixed this problem in Firefox 3.
Google Chart’s Resolution
By: Josh Walsh in Code
A few days ago I posted my frustrations with Google’s charting API security. While I still believe there are some issues that would plague banks, government and other institutions that have highly sensitive data, I have found a solution to our problem.
Google Charting Frustrations
By: Josh Walsh in Code
Last week Google released its Charting API which generates PNG based image graphs for your data. The data is passed to them through a URL and returns the image data.
Placing this image tag in your HTML will generate the following graph.
Functional Favicons
By: Josh Walsh in Code
Traditionally favicons are used for branding. A tiny icon which represents who you are and is displayed in the browsers address bar, in your bookmarks and (in Firefox) in the tab of the page your are currently viewing.
For most, the favicon is purely aesthetic. However, in others it has become a useful piece of functionality.
Clearing Gracefully
By: Josh Walsh in Code
Clearing in CSS has always been a bit of a pain. The guys over at QuirksMode have let out a little secret used by the CSS experts to clear:both without an extra div or hidden content.
