Tips and Techniques

Overlapping Text in PeopleSoft and Safari 3.x

By Larry Grey • November 14, 2008

A little while back we had a request for help from Genentech to solve an issue that was causing them fits. They have several Macs used for ESS and MSS that run Safari 3.x, the latest browser from Apple. The problem is that when Apple released Safari 3.x, they changed a tiny behavior of the DIV tag. The height attribute is now absolute instead of the minimum height. The result is that certain pages now display overlapping text.

So, the question was how to solve this problem without rewritting every page that has this issue.

The solution is extremely simple; add a style that defaults all DIV tags to set the display style to inline. In order to accomplish this on all pages, you need to add a small set of JavaScript to one of the PeopleSoft delivered scripts, for example PT_SAVEWARNINGSCRIPT. Simply open App Designer and the HTML object PT_SAVEWARNINGSCRIPT. At the head of the object add the following lines:

if ( navigator.appVersion.indexOf( "Version/3" ) > 0 &&
navigator.appVersion.indexOf( "WebKit" ) > 0 ) {
document.write('<style> div { display:inline; } </style>');

The code checks the version string for two things, the start of the version number (Version/3) and the browser rendering engine (WebKit). This allow us to only modify the HTML when the browser is Version 3 of the WebKit engine. That means both Safari and Google Chrome will get the extra style tag.

One caveat is that if you upgrade PeopleSoft, you will need to add this script back to the delivered HTML object.

That’s it.

Labels: DIV, Mac, PeopleSoft, Safari

Stay Updated