The issue arises when attempting to apply styling to a table row using the tr:hover CSS selector in IE 8, specifically when hovering over an input text field nested within div and td elements

When hovering over the row (tr), the tr:hover rule is being applied. However, when hovering over the child text content of the tr input, the tr:hover rule is not being applied.

This issue is specific to IE-8. Can anyone help me identify the root cause?

Note: Jsfiddle

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<meta http-equiv="x-ua-compatible" content="IE=8" >
<html>
<head>
    <meta charset="utf-8">
    <style type="text/css" media="screen">
        tr{
            border-width: 0;
            margin: 0;
            padding: 0;
            background-color: transparent;
            line-height: 23px;
            height: 23px;
            vertical-align: middle;
            cursor: pointer;
        }

        table {
            border: 1px solid #d3deed;
            border-collapse: collapse;
            table-layout: fixed;
            position: relative;
            border-spacing: 0;
            width: 100%;
        }

        table thead tr {
            position: relative;
        }

        table th,
        table thead td,
        table tfoot td {
            border-width: .08em;
            padding: 2px;
            height: 16px;
        }

        table tbody td {
            border: 1px solid #d3deed;
            border-bottom-color: #d3deed;
            border-top-color: #d3deed;
        }

        table th {
            border: 1px solid #d3deed;
            border-top: 0;
            border-bottom: .24em solid #d3deed;
            background-color: #e5edf5;
            color: #696969;
            font: bold 12px/1.5 'Lucida Grande', Tahoma, sans-serif;
        }

        table input{
          border-style: solid;
          background-color: transparent!important;
          border: 0;
          font: normal 12px/1.5 Arial,Helvetica,sans-serif;
          width: 100%;
          cursor: text;
          height: 1.4em;
          left: 0;
          position: relative;
          top: 0;
          vertical-align: middle;
          border-radius: 0;
          -moz-border-radius: 0;
        }

        table tr:hover {
            background-color: green!important;
        }
    </style>
</head>
<body>
    <table>
            <caption>Row hover</caption>
            <thead>
                <tr>
                    <th>header1</th>
                    <th>header2</th>
                    <th>header3</th>
                    <th>header4</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>
                        <div>
                          <input readonly="true" type="text" name="" value="dsfsdfsdfsdfdsfsdfsdfsdfdsfds">
                        </div>
                    </td>
                    <td>
                        <div>
                          <input readonly="true" type="text" name="" value="dsfsdfsdfsdfdsfsdfsdfsdfdsfds">
                        </div>
                    </td>
                    <td>
                        <div>
                          <input readonly="true" type="text" name="" value="dsfsdfsdfsdfdsfsdfsdfsdfdsfds">
                        </div>
                    </td>
                    <td>
                        <div>
                          <input readonly="true" type="text" name="" value="dsfsdfsdfsdfdsfsdfsdfsdfdsfds">
                        </div>
                    </td>
                </tr>
            </tbody>
        </table>    
</body>

Answer №1

When conventional approaches fail, try implementing jQuery:

$("table").find("tr").hover(
    function() {
        $(this).css('background-color','#0f0');
    }
);

Answer №2

It appears that I have stumbled upon something concerning this issue. IE 8 bug

Answer №3

One of the key issues that need attention is related to the DOCTYPE declaration.

The current DOCTYPE specification is targeting HTML4 and refers to an xhtml strict DTD. This implies that the document should adhere to valid xhtml standards, with failure to properly close input tags leading to browser running in quirks mode, consequently causing malfunction of :hover.

If possible, consider updating the DOCTYPE to one of the following valid options:

<!DOCTYPE html>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

The latter option is recommended if adherence to HTML4 standards is required.

Furthermore, ensure that the

<meta http-equiv="x-ua-compatible" content="IE=8" >
tag is correctly placed within the head section to prevent rendering issues.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is there a way to use jQuery to eliminate divs that contain multiple identical data values?

Is there a way to accomplish this? <div class="chat_timestamp_group" data-date="08-March-2016"></div> <div class="chat_timestamp_group" data-date="08-March-2016"></div> <div class="chat_timestamp_group" data-date="14-March-2016" ...

Is it possible to modify the value on the src img tag prior to scraping the data

Hey everyone, check out this piece of code I have: foreach ($image as $snimka){ $url = $snimka->src; $ch = curl_init($snimka->src); $fp = fopen('images/' . basename($url), 'wb'); curl_setopt($ch, CURLOPT_FILE, $fp ...

modify the appearance of HTML controls in real time with C#

Is there a way to dynamically add an additional navigation item to my website's menu list when the admin logs in through admin.aspx? The menu list is created using HTML controls such as <ul>...<li>, and I would like the new navigation item ...

Learn how to customize the background color of the DropdownToggle when a DropdownItem in Bootstrap 4 is clicked

Is it possible to modify the background color of DropdownToggle when selecting DropdownItem? Additionally, is there a way to adjust the top and bottom blue borders when clicking DropdownToggle? Picture 1: The image depicts the initial appearance before se ...

Encountering a challenge in Angular 8: Unable to locate a supporting object matching '[object Object]'

I am having an issue trying to retrieve the Spotify API from the current user's playlists. While I can see it in my console, when I attempt to insert it into HTML, I encounter the following error: ERROR Error: Cannot find a differ supporting object ...

Positioning a div absolutely within a targeted div

Is there a way to set a div as absolute within a specific relative div rather than just the parent? For instance, I have a div that's nested inside of a row. However, I would like it to be positioned absolutely in the section instead of the row. Both ...

Creating a user authentication portal

Looking for advice on creating a basic front end HTML login. I'm new to coding and would appreciate any suggestions! Additionally, how can I link the login system to my database? ...

Troubles with Fixed Navigation Bar in JavaScript-Enabled Scrolling

I've implemented a JavaScript-enabled scrolling navigation bar that starts below a hero graphic and then sticks to the top when it reaches the top of the page. The functionality works as intended, but there is one issue - when the navigation bar reach ...

Converting HTML text input into a PHP variable

How can I achieve a html text input with name="input1" to be a php variable named $value? Here is what I have tried: <html> <form action="added.php" method="post" /> <p>Send a message to JANNES database: <input type="text" name="i ...

Comparing HEAD requests with exclusively obtaining the <head> section of a webpage

Currently, I am working on coding for extracting links and I had intended to extract only the <head> portion of a specific webpage. However, it seems I have misunderstood the purpose of a HEAD request, as I believed it would accomplish this task. In ...

What are the characteristics of a well-crafted HTML inline CSS form?

I am looking to create bubbles on a webpage to display content. I decided to create a CSS class called .bubble and added positioning values as inline styles. However, this resulted in long lines of code. My experience with various programming languages has ...

Older versions of Internet Explorer, specifically IE 8 and below, are causing issues with iframe

I am currently working on a website that includes an embedded Vimeo video. The majority of our target audience uses IE8 or older, and interestingly enough, most of them have their browsers zoomed to 125% view. Unfortunately, while everything else on the si ...

What is the best way to make a scrollable div with top and bottom padding without adding extra elements inside?

I have created a fiddle to demonstrate my question. Essentially, I am looking to create a scrollable container with padding at the top and bottom that remains visible during scrolling, ensuring there is always a consistent distance from the edge to the con ...

Having difficulty adjusting the padding of the Material UI table

I have been using the Table component provided by the material-ui library in my React project. However, I have encountered an issue where each row, including the header, has a padding of 24px on the top and bottom that I am unable to modify or overwrite. D ...

Having trouble making setTimeout work with a nested function in it

I've encountered an issue with the setTimeout() function. Take a look at my code snippet below: $('#start').click(function(event) { var result = Math.floor(Math.random() * (10000 - 4000 + 1)) + 4000; // generates a random value between ...

Arranging multiple Label and Input fields in HTML/CSS: How to create a clean and

I'm struggling with HTML and CSS, trying to figure out how to align multiple elements on a page. I've managed to line up all the rows on the page, but for some reason, the labels are appearing above the input fields when I want them to appear be ...

One project contains a pair of React instances

I am currently working on a React Web App and recently encountered an issue with an 'invalid hook call' error. Upon further investigation, I discovered that there are duplicate copies of the React library in my project, including within the CSS f ...

HTML5 Applications with Intel XDK

I'm currently working on an HTML5 application using Intel's XDK platform for building in Android. However, I'm facing an issue where the application crashes when the keyboard pops up upon entering text. Can anyone provide assistance with thi ...

Cascading Style Sheets variable and Sassy CSS mixin

I'm facing a challenge involving the use of CSS variables in conjunction with my VueJs app. The goal is to make a hover effect (changing background-color) customizable by the application, while having a default value set in a nested SCSS map using the ...

Unable to retrieve the data-id for each div element containing a data attribute

I am having trouble retrieving the ids from the data-id attribute of each div inside a specific container. Strangely, I am getting [7,7,7,7] even though there are only 3 divs with different data-ids? Below is my HTML structure: <div id="activated_bloc ...