Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
- "http://www.w3.org/TR/html4/strict.dtd">
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
- <title> IE Annoyance </title>
- <style type="text/css">
- body {
- font-family: "Arial", "Verdanda", sans-serif;
- }
- table.testTable th,td {
- padding: 8px 8px 8px 8px;
- font-size: 14px;
- }
- th.testTableHeaderCell {
- position: relative;
- z-index: 24;
- font-weight: 700;
- text-align: center;
- border: solid 1px #888888;
- background-color: #f0f0f0;
- margin: 0px 6px 0px 0px;
- vertical-align: middle;
- }
- th.testTableHeaderCell:hover {
- z-index: 25;
- color:#a73333;
- background-color:#ffff99;
- border:1px solid #ffcc00;
- cursor: pointer;
- }
- th.testTableHeaderCell:active {
- background-color:#dff4ff;
- border:1px solid #c2e1ef;
- }
- th.testTableHeaderCell span.tooltip {
- display: none;
- }
- th.testTableHeaderCell:hover span.tooltip {
- display: block;
- position: absolute;
- overflow: visible;
- left: auto;
- width: 15em;
- color: #8a1f11;
- background-color: #fbe3e4;
- border: solid 1px #fbc2c4;
- padding: 2px 4px 2px 4px;
- font-size: 1.05em;
- font-weight: 500;
- text-align: left;
- z-index: 100;
- }
- td.testTableBodyCell {
- position: relative;
- z-index: 24;
- font-weight: 700;
- text-align: center;
- border: solid 1px #888888;
- background-color: #f0f0f0;
- margin: 0px 6px 0px 0px;
- vertical-align: middle;
- }
- td.testTableBodyCell:hover {
- z-index: 25;
- color:#a73333;
- background-color:#ffff99;
- border:1px solid #ffcc00;
- cursor: pointer;
- }
- td.testTableBodyCell:active {
- background-color:#dff4ff;
- border:1px solid #c2e1ef;
- }
- td.testTableBodyCell span.tooltip {
- display: none;
- }
- td.testTableBodyCell:hover span.tooltip {
- display: block;
- position: absolute;
- overflow: visible;
- left: auto;
- width: 15em;
- color: #529214;
- background-color:#e6efc2;
- border:1px solid #c6d880;
- padding: 2px 4px 2px 4px;
- font-size: 1.05em;
- font-weight: 500;
- text-align: left;
- z-index: 100;
- }
- th.testTableFooterCell {
- position: relative;
- z-index: 24;
- font-weight: 700;
- text-align: center;
- border: solid 1px #888888;
- background-color: #f0f0f0;
- margin: 0px 6px 0px 0px;
- vertical-align: middle;
- }
- th.testTableFooterCell:hover {
- z-index: 25;
- color:#a73333;
- background-color:#ffff99;
- border:1px solid #ffcc00;
- cursor: pointer;
- }
- th.testTableFooterCell:active {
- background-color:#dff4ff;
- border:1px solid #c2e1ef;
- }
- th.testTableFooterCell span.tooltip {
- display: none;
- }
- th.testTableFooterCell:hover span.tooltip {
- display: block;
- position: absolute;
- overflow: visible;
- left: auto;
- width: 15em;
- color: #a73333;
- background-color: #ffff99;
- border: 1px solid #ffcc00;
- padding: 2px 4px 2px 4px;
- font-size: 1.05em;
- font-weight: 500;
- text-align: left;
- z-index: 100;
- }
- </style>
- </head>
- <body>
- <h3> ToolTip </h3>
- <div>
- <table border="1" class="testTable">
- <thead class="testTableHeader">
- <tr>
- <th class="testTableHeaderCell"> header cell 01 <span class="tooltip"> again ... header cell 01 </span></th>
- <th class="testTableHeaderCell"> header cell 02 <span class="tooltip"> again ... header cell 02 </span></th>
- <th class="testTableHeaderCell"> header cell 03 <span class="tooltip"> again ... header cell 03 </span></th>
- <th class="testTableHeaderCell"> header cell 04 <span class="tooltip"> again ... header cell 04 </span></th>
- <th class="testTableHeaderCell"> header cell 05 <span class="tooltip"> again ... header cell 05 </span></th>
- </tr>
- </thead>
- <tbody class="testTableBody">
- <tr>
- <td class="testTableBodyCell"> body cell 01 <span class="tooltip"> again ... body cell 01 </span></td>
- <td class="testTableBodyCell"> body cell 02 <span class="tooltip"> again ... body cell 02 </span></td>
- <td class="testTableBodyCell"> body cell 03 <span class="tooltip"> again ... body cell 03 </span></td>
- <td class="testTableBodyCell"> body cell 04 <span class="tooltip"> again ... body cell 04 </span></td>
- <td class="testTableBodyCell"> body cell 05 <span class="tooltip"> again ... body cell 05 </span></td>
- </tr>
- </tbody>
- <tfoot class="testTableFooter">
- <tr>
- <th class="testTableFooterCell"> footer cell 01 <span class="tooltip"> again ... footer cell 01 </span></th>
- <th class="testTableFooterCell"> footer cell 02 <span class="tooltip"> again ... footer cell 02 </span></th>
- <th class="testTableFooterCell"> footer cell 03 <span class="tooltip"> again ... footer cell 03 </span></th>
- <th class="testTableFooterCell"> footer cell 04 <span class="tooltip"> again ... footer cell 04 </span></th>
- <th class="testTableFooterCell"> footer cell 05 <span class="tooltip"> again ... footer cell 05 </span></th>
- </tr>
- </tfoot>
- </table>
- </div>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement