Skip to main content

Cloning your Corporate UI with HTML DB - Part VI (Re-Post)

The following is a re-post of the "Cloning your Corporate UI with HTML DB" series that I blogged about back in 2005 on the now-defunct Orablogs site. Most of the content and advise is still the same today, and has been reposted here exactly as it was on the old site.

July 12, 2005

What's the best way to ensure that you have more work to do? Use a statement like "That about wraps up this series" in your "final" posting in a series!

As Earl Lewis pointed out, things are not 100% correct when using MSIE. Now, there's a very simple cut-and-dry solution to this problem: Don't use MSIE. However, for those who have not yet made the switch to Firefox yet (which, according to traffic on HTML DB Studio is still about 80% of you), you will also see this error. Thus, it is critical that you test your site in both - if not more - browsers. This is something which I simply forgot to do.

It's as simple as this: the same HTML can and often will look different in MSIE & FireFox (and other browsers). It is time very well spent running through each and every page in each browser which you expect your users to use, in order to ensure that all pages render correctly. Nothing infuriates me more than a site which only renders correctly on MSIE!

The core problem here is some abandoned JavaScript calls & references, left over from when I gave up on the Dynamic OTN Menus. I took a few minutes to remove all of them, and MSIE is once again, quite happy. Ironically, I had to the use the JavaScript debugger in FireFox to determine which reference was still hiding in the source, as the messages generated by MSIE are very vague. I encourage you to check out the FireFox JavaScript debugger - it's quite nice for a browser add-in.

Looking around some more, I noticed that the titles on the Application Detail pages are not rendering correctly in MSIE either:

Let's take a look at the Report Template to see what HTML is being generated. Here is the relevant snippet:

<table width="100%" class="bodycopy">
<tr>
<td colspan="3" class="OTNHeadline">#NAME#</td>
</tr>

Looks like the table has a class called bodycopy associated with it, and the title has a class called OTNHeadline associated with it. The class bodycopy will be applied to all items in the table, as it is defined at the table level. When the #NAME# token is rendered, it will first have the bodycopy class associated with it, but it will override any directive set by bodycopy with those set in OTNHeadline. Those attributes not mentioned in OTNHeadline will retain their values as per their definition in bodycopy.

Let's take a look at bodycopy first, as that is what gets applied to the text first:

.bodycopy { color: #000000; font-size: 12px; font-family: Arial, Helvetica, sans-serif; line-height: 14px; text-decoration: none; visited: #000000 }

Looks like quite a few things are set here: color, font size, font, link style & color, and something called line-height. According to htmldog.com, line-height "Specifies the height of a line of text." So if it is set to 14px as per the above class, and then apply the OTNHeadline class:

.OTNHeadline { font-family: Arial Narrow, Arial; font-weight: bold; font-size: 30px; }

Since there is no definition for line-height, the value of 14px set by bodycopy is retained. This causes something to get chopped off at the top & bottom, as we're trying to render a 30px font in a 14px space. Thus, all I have to do to fix this is change the class definition of OTNHeadline to this:

.OTNHeadline { font-family: Arial Narrow, Arial; font-weight: bold; font-size: 30px; line-height: 30px; }

Reload in MSIE, and things look much better now:

This is just one of many examples of how different browsers render the same HTML. I can assure you that this is the norm, not an exception.

Once again (knocking on wood), that about wraps up this series...

Comments

Popular posts from this blog

Spaced Out

A while back, I wrote about how to give the Universal Theme a face lift.  If you follow the steps in that post, the base font for an APEX application with the Universal Theme can easily be changed.

While that's all well and good, sometimes you only want to change the font for a report, not the entire page.  One of the applications that I'm building contains a number of IRs based mostly on log data.  Thus, having that data in a monospaced font would make it a whole lot easier to read.

You can search Google Fonts for monospaced fonts by selecting only that option on the right-side menubar.  You can also opt for the standard yet kinda boring Courier and achieve the same thing.

To implement this in your application, follow the steps in my other post, but stop shy of the final step.  Instead of pasting in the text that I specify, paste in the following to the Custom CSS field in Theme Roller, using the name of the font you selected for the font-family:

.a-IRR-table tr td { font-fam…

Thanks, ODC (Oracle Developer Community)!

I owe a lot of thanks to the ODC - which stands for Oracle Developer Community.  What is ODC?  You may remember it as OTN, or the Oracle Technology Network.  Same people, different name.  Why they changed it I can't say.  People just liked it better that way... (love that song)

In any case, what am I thankful for?  A lot.  To start, the tools that I use day in and day out: SQL Developer, ORDS, Oracle Data Modeler, SQLcl and - of course - APEX.  Without these tools, I'm likely on a completely different career path, perhaps even one that aligns more closely with my degree in television management.

While the tools are great, it's really the people that make up the community that make ODC stand out. From the folks who run ODC and the Oracle ACE program to the developers and product managers who are behind the awesome tools, the ODC community is one of, if not the greatest asset of being involved with Oracle's products.

If you have yet to get more involved with this communi…

Whose Deck is it Anyways?

This year at KScope, we're going to try something new.  And fun.  And funny to watch - we hope.  It's called "Whose Deck is it Anyways?", and will occur on Sunday at 8:30pm.  It's only 30 minutes, but it will likely be the best 30 minutes of the conference.  Or at least the most embarrassing.

Here's what we're going to do: the will be four 5-minute presentations - one on each of the following: BI, EPM, Database & APEX.

Sound interesting?  Probably not.  We get that, too.  So here's what we did.

Each 5-minute session will be presented by a non-expert.  For example, it's highly likely that I'll be presenting on BI or EPM.

To make it even better, each slide deck will be prepared by the corresponding expert.  So again, it's highly likely that my slide deck's creator will be either Stewart Bryson or Edward Roske.  If nothing else, this session will be a crash course in how not to make cohesive, easy to read slides.

Interested now?  Ya,…