10:06 a.m.
Author: lkrejci
Date: 2010-07-27 11:06:00 -0400 (Tue, 27 Jul 2010)
New Revision: 966
Modified:
branches/EmbJopr_1_3/core/src/main/webapp/WEB-INF/facelets/layout.xhtml
branches/EmbJopr_1_3/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: branches/EmbJopr_1_3/core/src/main/webapp/WEB-INF/facelets/layout.xhtml
===================================================================
--- branches/EmbJopr_1_3/core/src/main/webapp/WEB-INF/facelets/layout.xhtml 2010-07-27
11:13:46 UTC (rev 965)
+++ branches/EmbJopr_1_3/core/src/main/webapp/WEB-INF/facelets/layout.xhtml 2010-07-27
15:06:00 UTC (rev 966)
@@ -77,8 +77,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
{
@@ -86,11 +88,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">
@@ -125,6 +126,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: branches/EmbJopr_1_3/core/src/main/webapp/js/embedded.js
===================================================================
--- branches/EmbJopr_1_3/core/src/main/webapp/js/embedded.js 2010-07-27 11:13:46 UTC (rev
965)
+++ branches/EmbJopr_1_3/core/src/main/webapp/js/embedded.js 2010-07-27 15:06:00 UTC (rev
966)
@@ -477,3 +477,29 @@
}
}
}
+
+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);
+};