The problems at using UIO fat panel
cli at ocadu.ca
Tue Mar 13 19:44:31 UTC 2012
After observing a few pages from OER Commons Green site (http://www.oercommons.org/green) that have the UIO fat panel integrated in, I came up with a list of the cases that UIO has problem dealing with and would mess up the page as a result. Some cases could be resolved with the help of the page css styling change. These cases have a solution stated along. Of course, there are also cases that I don't have a solution yet.
Feel free to comment with your thoughts or suggestions.
--- display fat panel ---
1. a div with a small css "top" value and absolute position that occupies the area that the fat panel shows up, in which case the fat panel is rendered but not accessible.
Example: The styling of the toolbar section at the top of this page,
blocks the fat panel from showing up.
--- increase "font size" & "line height" ---
1. <body> tag cannot have pre-defined "font-size" value, otherwise, the initial loading of the page looks having a different-size of the fonts.
Reason: "1em" is always applied to the <body> at initial loading. The "font-size" at <body> is detected by UIEnhancer as the browser default font size that is used as a base factor at the px-to-em conversion. The ideal solution is to improve UIEnhancer to detect the real browser default font size.
2. The text is restricted in a fixed-height-bordered box. The text stretches out of the box with larger font size of line height.
3. The text is defined in a fixed-width-in-px div. Increasing the font size causes the sub-divs not big enough any more to hold their contents. Use em instead.
--- switch "Colors and Contrast" ---
1. The use of the background images that stay at the same color. Possible solutions:
* Removed the background images at the display of the high-contrast themes
* Switch the background images to the properly color tuned
--- turn on "Table of Contents" ---
1. Only use <h1>...<h6> on the headers that are meant to be shown in the "table of contents".
--- cases that "Emphasize Links" doesn't work ---
1. The link is restricted in a fixed-width box and intend to show in one line but the enlarged text causes the link wraps into multiple lines.
2. A row of links are restricted in a fixed-width box, the width of the enlarged links exceeds the pre-defined width which results in the row of the links shifts down below the box.
--- cases that "Make inputs larger" doesn't work ---
1. The button is an image
2. The button or drop-down menu etc. are button-or-dropdown-looked link or div
More information about the fluid-work