×
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

3 Replies to “Overlapping Text in PeopleSoft and Safari 3.x”

  1. There is a similar issue in 8.50.03 – but it affects all browsers I tried (firefox, IE7, chrome, and Safari).

    The solution I used (thanks to inspiration from your article) was to:
    add div{display:inline} to the PSIFRAME freeform stylesheet.

    This meant I needed to:
    1) add display:block to the ptifrmsbarcollexp class in PSIFRAME freeform stylesheet
    2) add display:block to the ptnav2pglt class in PSNAV2 freeform stylesheet.

    To make everything behave itself afterwards.

    As with your solution, we will need to keep an eye on the stylesheets to ensure the changes aren’t lost in the next maintenance pack.

    Thanks for the inspiration 🙂

  2. Thanks for this. It is my understanding that this is fixed in tools 8.49.13. I just don’t have the time to upgrade and this is easier.

  3. Wow this is timely. I am doing some SS testing with Google Chrome and I noticed this on some over my custom pages that have html areas where I push configurable text to.

    Thanks for the tip. Maybe someone from the Oracle tools team will pick this up in the code line.

Comments are closed.

Request a Demo