1:30 p.m.
Author: lkrejci
Date: 2010-07-27 14:30:15 -0400 (Tue, 27 Jul 2010)
New Revision: 968
Modified:
trunk/core/src/main/webapp/WEB-INF/facelets/layout.xhtml
trunk/core/src/main/webapp/js/embedded.js
Log:
EMBJOPR-250, EMBJOPR-289 - Several fixes to the IEx rendering: navtree height correct in
IE6, no content scrollbar in IE6, the tab bar and content borders match up (always in
IE7+, almost always in IE6)
Modified: trunk/core/src/main/webapp/WEB-INF/facelets/layout.xhtml
===================================================================
--- trunk/core/src/main/webapp/WEB-INF/facelets/layout.xhtml 2010-07-27 18:00:15 UTC (rev
967)
+++ trunk/core/src/main/webapp/WEB-INF/facelets/layout.xhtml 2010-07-27 18:30:15 UTC (rev
968)
@@ -76,8 +76,10 @@
}
h\tml #content
{
- height: 100%;
- overflow: visible;
+ padding: 16px; /* replace the em units for padding with something we can
compute with in the expressions below */
+ overflow: auto;
+ height: expression((document.body.clientHeight - 2 * 31 - 49 + 1) +
'px'); /* 49 = header height, 31 = footer height, but why I have to substract it
twice escapes me. 1 = so that it looks better.*/
+ width: expression((document.body.clientWidth - 300 - 2 * 16) + 'px');
/* 300 = width of the sidebar, 16 = padding */
}
#pageheader, #footer
{
@@ -85,11 +87,10 @@
}
#sidebar-left
{
- height: expression(document.body.clientHeight -
(parseInt(document.body.currentStyle.fontSize) * 1.3333333 * (8 + 5)) + 'px');
+ height: expression((document.body.clientHeight - 31 - 49 + 2) +
'px'); /* 49 = header height, 31 = footer height, 2 = so it looks better. */
}
</style>
<![endif]-->
-
</head>
<body>
<div id="content">
@@ -124,6 +125,26 @@
<ui:include src="resourceNavigation.xhtml"/>
<ui:include src="header.xhtml"/>
<ui:include src="footer.xhtml"/>
+
+ <!-- I'm giving up on proper CSS for IE. These poor hacks make the tab
menu look nice in both IE6 and IE7 -->
+ <!-- This has to be present only *AFTER* all the content is defined, because
the below CSS contains expressions
+ refering to the DOM objects defined above (like content). -->
+ <!--[if lt IE 8]>
+ <script type="text/javascript" language="javascript">
+ var scrollBarWidth = getScrollBarWidth();
+ </script>
+ <style type="text/css" media="screen">
+ h\tml #content
+ {
+ /* This definition is repeated from above so that it also applies for IE7
here, where we need this pixel-sized
+ padding so that we can compute the width of the tabmenu below. */
+ padding: 16px; /* replace the em units for padding with something we can
compute with in the expressions below */
+ }
+ #tabmenu {
+ width: expression((document.body.clientWidth - 300 - 2 * 16 -
(content.scrollHeight > content.clientHeight ? scrollBarWidth : 0)) + 'px'); /*
300 = width of sidebar, 16 content padding. */
+ }
+ </style>
+ <![endif]-->
</body>
</f:view>
</html>
Modified: trunk/core/src/main/webapp/js/embedded.js
===================================================================
--- trunk/core/src/main/webapp/js/embedded.js 2010-07-27 18:00:15 UTC (rev 967)
+++ trunk/core/src/main/webapp/js/embedded.js 2010-07-27 18:30:15 UTC (rev 968)
@@ -680,6 +680,32 @@
hidediv('end');
}
+function getScrollBarWidth () {
+ var inner = document.createElement('p');
+ inner.style.width = "100%";
+ inner.style.height = "200px";
+
+ var outer = document.createElement('div');
+ outer.style.position = "absolute";
+ outer.style.top = "0px";
+ outer.style.left = "0px";
+ outer.style.visibility = "hidden";
+ outer.style.width = "200px";
+ outer.style.height = "150px";
+ outer.style.overflow = "hidden";
+ outer.appendChild (inner);
+
+ document.body.appendChild (outer);
+ var w1 = inner.offsetWidth;
+ outer.style.overflow = 'scroll';
+ var w2 = inner.offsetWidth;
+ if (w1 == w2) w2 = outer.clientWidth;
+
+ document.body.removeChild (outer);
+
+ return (w1 - w2);
+};
+
/**
* WindowResizeTracker can be used by scripts that need to keep track
* of the current window/page sizes and their changes.