Fixed a rendering issue with health report details on browsers that normalize...

Fixed a rendering issue with health report details on browsers that normalize malformed HTML pages. (hopefully!)


git-svn-id: https://hudson.dev.java.net/svn/hudson/trunk/hudson/main@3967 71c3de6d-444a-0410-be80-ed276b4c234a

core/src/main/resources/lib/hudson/projectView.jelly

@@ -3,7 +3,7 @@
   <%@ attribute name="showViewTabs" required="true" type="java.lang.Boolean" %>
 
   <%@ attribute name="jobBaseUrl" type="String" %>
-    The base URL of all job links. Normally ${rootURL}/  
+    The base URL of all job links. Normally ${rootURL}/
 -->
 <j:jelly xmlns:j="jelly:core" xmlns:x="jelly:xml" xmlns:st="jelly:stapler" xmlns:d="jelly:define" xmlns:l="/lib/layout" xmlns:t="/lib/hudson" xmlns:f="/lib/form">
   <t:setIconSize/>
@@ -38,10 +38,15 @@
           <tr class="${h.ifThenElse(job.disabled,'disabledJob',null)}">
             <t:ballColorTd it="${job.iconColor}" />
             <td data="${buildHealth.score}">
-              <a class="healthReport" href="${jobBaseUrl}${job.shortUrl}lastBuild">
-                <img src="${rootURL}${h.ifThenElse(buildHealth.iconUrl.startsWith('/'),'','/images/'+iconSize+'/')}${buildHealth.iconUrl}"
-                     alt="${buildHealth.score}%"/>
-                <div>
+              <x:element name="div">
+                <x:attribute name="class">healthReport</x:attribute>
+                <x:attribute name="onmouseover">this.className='healthReport hover';return true;</x:attribute>
+                <x:attribute name="onmouseout">this.className='healthReport';return true;</x:attribute>
+                <a class="healthReport" href="${jobBaseUrl}${job.shortUrl}lastBuild">
+                  <img src="${rootURL}${h.ifThenElse(buildHealth.iconUrl.startsWith('/'),'','/images/'+iconSize+'/')}${buildHealth.iconUrl}"
+                       alt="${buildHealth.score}%" />
+                </a>
+                <div class="healthReportDetails">
                   <table border="0">
                     <thead>
                       <tr>
@@ -64,7 +69,7 @@
                     </tbody>
                   </table>
                 </div>
-              </a>
+              </x:element>
             </td>
             <td>
               <a href="${jobBaseUrl}${job.shortUrl}">

war/resources/css/style.css

@@ -71,7 +71,7 @@ table.center-align td {
 
 #tasks {
   padding: 4px;
-} 
+}
 
 a:link {
   text-decoration: underline;
@@ -101,11 +101,11 @@ a.tip span {
 a.tip:hover span {
   display:block;
   position:absolute;
-  top:2em; 
-  left:2em; 
+  top:2em;
+  left:2em;
   width:400px;
   border:1px solid #bbbbbb;
-  background-color:#fffff0; 
+  background-color:#fffff0;
   color:#000;
   text-align: left
 }
@@ -328,7 +328,7 @@ th.pane {
   border: 1px solid #ccb;
   background: #eed;
   padding: 4px;
-  white-space: normal;  
+  white-space: normal;
 }
 
 .error {
@@ -368,7 +368,7 @@ th.pane {
 }
 
 .help-area {
-  /* this marker class is used by JavaScript to locate the area to display help text. */ 
+  /* this marker class is used by JavaScript to locate the area to display help text. */
 }
 
 
@@ -420,24 +420,20 @@ th.pane {
 }
 
 /* ============================ health report hover ========================== */
-/* I was using div's but the IE bugs got the better of me anyway, nicer to     */
-/* have a link to the latest build (which is the source of the health report   */
-/* that you are viewing)                                                       */
-/* IE does not render this as nicely as I'd like, but least amount of hacky.   */
 
 a.healthReport {
     text-decoration: none;
 }
 
-a.healthReport div {
+div.healthReport div.healthReportDetails {
     display: none;
 }
 
-a.healthReport:hover { /* fix IE6 bug with :hover */
+div.healthReport:hover, div.healthReport.hover { /* fix IE6 bug with :hover */
     background: transparent;
 }
 
-a.healthReport:hover div {
+div.healthReport:hover div.healthReportDetails, div.healthReport.hover div.healthReportDetails {
     display: block;
     position: absolute;
     background-color: #ffe;
@@ -445,7 +441,7 @@ a.healthReport:hover div {
     margin-left: 32px; /* move it across a bit */
 }
 
-a.healthReport div table {
+div.healthReport div.healthReportDetails table {
     border-collapse: collapse;
     width: 450px; /* fix IE bug with width */
 }