Is there a solution for the issue where the :after pseudo-element on a TD in IE9 does not accurately reflect the TD height?

In the design I'm currently working on, there is a requirement for a border around a table row. Due to certain complications, using the border property directly is not an option. In trying to find a solution, I have experimented with two different approaches, both of which involve using the pseudo-element :after.

  1. One approach involved using tr:after. While this method worked in all browsers except for IE8 and above, it failed to render the specified styles under tr:after in Internet Explorer at all.

  2. The second approach used td:after. Although this successfully displayed the border in IE8 and above, IE did not properly render the border around the full height of the td as instructed by the CSS.

If you would like to take a closer look and offer any advice or solutions, please visit http://jsfiddle.net/kxmhW/2/. The first table in the link demonstrates the use of tr:after while the second table employs td:after.

Your input is greatly appreciated. Thank you.

htmlcssinternet-explorercss-selectorspseudo-element

Answer №1

If you need to add borders around the rows, consider using this CSS code:

CSS

table {
border-collapse: collapse;
}

td {
background: #ddd;
width: 100px;
}

.tr-border tr {
border: 2px solid red;
}

HTML

<table class="tr-border">
      <tr>
        <td>1</td>
        <td>Lorem</td>
        <td>123,456</td>
        <td>XXXX</td>
        <td>$10.24</td>
        <td>Lorem Ipsum Dolor Sit Amet, Consect EturLorem Ipsum Dolor Sit Amet.</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Lorem</td>
        <td>123,456</td>
        <td>XXXX</td>
        <td>$10.24</td>
        <td>Lorem Ipsum Dolor Sit Amet, Consect EturLorem Ipsum Dolor Sit Amet.</td>
      </tr>
  </table>

  <br />

  <table class="tr-border">
      <tr>
        <td>1</td>
        <td>Lorem</td>
        <td>123,456</td>
        <td>XXXX</td>
        <td>$10.24</td>
        <td>Lorem Ipsum Dolor Sit Amet, Consect EturLorem Ipsum Dolor Sit Amet.</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Lorem</td>
        <td>123,456</td>
        <td>XXXX</td>
        <td>$10.24</td>
        <td>Lorem Ipsum Dolor Sit Amet, Consect EturLorem Ipsum Dolor Sit Amet.</td>
      </tr>
  </table>

FIDDLE

http://jsfiddle.net/krishollenbeck/kxmhW/30/

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

Detect keyup event within a dynamically injected iframe

I am currently using a text editor that utilizes wysihtml5. I suspect the text editor is embedded within an iframe. My goal is to capture the key up event inside the text editor and prevent scrolling within it. Below is the code snippet that loads the tex ...

jqueryhtmliframewysihtml5

Is it possible to create a popup window that remains fixed at the top edge of the screen but scrolls along with the rest of the page if

In an attempt to organize my thoughts, I am facing a challenge with a search page similar to Google. The search results trigger a popup window when hovering over an icon, located to the right of the search results. Here is what I am looking to achieve with ...

javascriptcssajaxscrollpopup

Using R for web scraping, I encountered a unique situation where the 'next page' button was only programmed to navigate to the top of the page

I am attempting to extract the headline snippets from a local newspaper's articles by utilizing rvest and RSelenium. To access pages beyond the initial one, I need to click on the 'next page' button. Strangely, when I perform this action thr ...

jqueryhtmlrweb-scrapingclick

Arranging elements in a list according to their position on the canvas using AngularJS

I am currently working on drawing rectangles on an html5 canvas using the JSON format provided below. My goal is to sort the array based on the x and y locations of each element. { "obj0": { "outerRects": [ { "outerRectRoi": { "x1": 0, " ...

javascriptangularjshtmlsortingcanvas

What are some creative ways to design the selected tab?

In my Vue parent component, I have multiple child components. There are several elements that toggle between components by updating the current data. The issue is that I am unsure how to indicate which tab is currently active. I've tried various li ...

javascripthtmlcssvue.js

Loop through items in a list using Angular.js and display each item within an <

I am facing an issue where the model returned from the server contains html tags instead of plain text, such as b tag or i tag. When I use ng-repeat to create a list based on this model, the html is displayed as pure text. Is there a filter or directive av ...

javascripthtmlangularjs

Assigning a value using HTML code causes the input to malfunction

Trying to create a website with the goal of updating the database is proving to be challenging. The issue lies in the fact that some attributes from the database are in HTML format. Whenever I attempt to set an input's value to match the current attri ...

html

What is the best way to declare media queries for resolutions both above and below 1366?

Is it possible to define different CSS files based on screen resolution in HTML? For example, one file for screens with width of 1366px or lower and another for higher resolutions. Could you kindly provide me with the correct HTML code for this? ...

htmlcssmedia-queries

Enhance your photographic experience with the JavaScript Camera API on Android (Froyo

I have been attempting to utilize the JavaScript Camera API through the Android browser, as showcased at Google IO on Froyo. Despite having Froyo on my Nexus1, I am encountering difficulties accessing navigator.device and navigator.camera properties, bo ...

androidapihtml

Ways to properly close open HTML tags using node.js?

Have you ever encountered a situation where user-entered content from a database or similar source only contains the opening tag without the closing tag? This can disrupt the layout of your website. Is there a way to fix this issue using Node.js on the s ...

javascripthtmlnode.js

Using the JQuery Library, you can implement two submit buttons that either open in a new tab or submit

I am facing a situation where I have a FORM containing two submit buttons. My requirement is that when the first button is clicked, the form should submit on the same tab. On the other hand, if the second button is clicked, it should proceed to open a new ...

phpjqueryhtml

Change the background color according to the user's input text

I want to create a text box where users can input color keywords like blue, lime, or black. When they click submit, I want the background color of the page to change accordingly. This is what I have so far: <label for="color">Color: </label> ...

javascripthtmlcss

A comprehensive guide on transferring user input onto a php text file

I am trying to implement a feature in my PHP code where the contents entered in a text box are uploaded to a text file. However, I only want them to be written if the string contains a specific pattern. Here is the modified PHP code: <?php $data = $_ ...

phphtmlformsuploadsubmit

"Pressing the 'back' button on your browser takes

Is there a way to navigate back to the main page by clicking on an image? After selecting First, Picture1 will be shown. How can I go back to the selection page for further choices? <a href="picture1.jpg"> <h3>First</h3></a> <a ...

javascripthtmlcss

Using Flutter to return an HTML response rather than JSON

Experiencing an issue and seeking assistance with this Flutter code as a newcomer to the platform. I am able to successfully retrieve data using https://jsonplaceholder.typicode.com/posts, but encountering errors when trying to access my company's URL ...

htmlflutterdartdio

Determine if the HTML Application Cache is void

Our website uses a "manifest.appcache" file to manage the application cache. Some pages are designed to be accessed offline, so they have references in the html tag to the manifest, while others do not. Is there a way to determine if the cache is empty ac ...

htmlcachingmanifest

Tips for minimizing the dimensions of images in a slideshow within a gallery

Check out this website: The slideshow images on there are too tall. Can someone assist me in lowering the height of the images? I want both images to be displayed at the same height. Thank you in advance. ...

cssslideshow

Simultaneous CSS3 animations on a pair of items

I am facing a styling challenge with a wrapper div that is positioned absolutely on the side of the page. Inside this wrapper, there is an unordered list of items. Here is the HTML structure: <div id="wrapper"> <ul class="menu"> ...

htmlcss

Ways to implement a conditional statement to display a div using JavaScript

Looking for a way to utilize Javascript conditions to toggle the visibility of a div in an HTML5 document? Check out this code snippet below: #demo { width: 500px; height: 500px; background-color: lightblue; display: none; } To set the f ...

javascriptjquerycsshtml

Guide to retrieving a user's current address in JSON format using Google API Key integrated into a CDN link

Setting the user's current location on my website has been a challenge. Using Java Script to obtain the geographical coordinates (longitude and latitude) was successful, but converting them into an address format proved tricky. My solution involved le ...

javascriptjqueryhtmlgeolocation