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

Position the background of the container in the center and keep it

I am trying to create a fixed background header using the following CSS properties: header { margin: 0; padding: 0; width: 100%; height: 300px; display: block; background-image: url('...'); background-repeat: no-repea ...

htmlcssbackgroundfixed

Choosing the Angular5 model

I'm currently working with an Angular5 project that has a <select> element bound to an array of customers. Here's the code snippet: <select class="form-control" [ngModel]="record.customer_id" (ngModelChange)="setCustomer($event)" name=" ...

javascripthtmlangular

utilize makeStyles to modify button text color

Initially, my button was styled like this: style={{ background: '#6c74cc', borderRadius: 3, border: 0, color: 'white', height: 48, padding: '0 30px', }}> It worke ...

javascriptcssreactjstypescriptmaterial-ui

Tips for placing multiple images onto one canvas

I am currently working on a web application that allows users to create sketches, define their positions and sizes, and then save them to a database. In another section of the website, I aim to retrieve these images and display them on a single canvas. To ...

javascripthtmlimagecanvasdraw

Can you please provide guidance on implementing automatic horizontal scrolling with pauses between each div?

setInterval(function scroll() { $(".box_auto").each(function(i, e) { $("html, body").animate({ scrollTop: $(e).offset().top }, 500).delay(500); }); setTimeout(function() { $('html, body').animate({ scrollTop: 0 } ...

javascripthtmljquerycss

What is the best way to convert a string to an integer in JavaScript while still maintaining compatibility with Internet Explorer 11?

Here is the code snippet that I am working with: setCol (param) { // missing forEach on NodeList for IE11 if (window.NodeList && !NodeList.prototype.forEach) { NodeList.prototype.forEach = Array.prototype.forEach; } const a ...

javascriptjqueryvue.jsinternet-explorerparseint

Item floating in a list

I'm facing a challenging issue that I need help with. It's a bit complicated to explain, but I'll do my best. There's also a picture included to help illustrate the problem. The problem I have is with an ordered list. When the next row ...

htmlcss

`What is the method for accepting parameters on an aspx page?`

I am currently facing an issue with my webpage. I have an .html page that contains a link to a .aspx page. When sending parameters from the html page to the aspx page, I do it using the following code: <a href="javascript:openContent('page1.aspx? ...

htmlasp.netiframe

Inline-block divs styled with CSS3 are causing a white gap to appear at the top of

I have been searching for solutions to my problem, but I can't seem to find one that works. My goal is to create two columns that each take up 50% of the screen width. However, I am facing an issue where there is a gap at the top that I cannot seem t ...

htmlcss

Tips for Implementing Color-coded Manchu/Mongolian Script on Your Website

My journey began with a seemingly straightforward task. I had a Manchu word written in the traditional script and I wanted to change the color of all the vowels in the word (ignoring ligatures). <p>ᠠᠮᠪᡠᠯᠠ ᠪᠠᠨᡳᡥᠠ</p> < ...

htmlcssfontswebfontstext-rendering

Adjust the Division's Width to be 20% of the Total Page Width Excluding Margins

I need to create a menu page with 5 equal columns, but I'm facing an issue with the layout. Here's my current CSS for the yellow divs: width:20%; height:100vh; background-color: yellow; display:inline-block; In addition, I have set margin:0;. ...

htmlcss

"Escape the confines of traditional div sections with the dynamic features of

In the beginning, I have arranged two rows of three divs on my webpage, which is how I intend to use them later. However, when testing the 'mobile view', the divs in the section overflow and move into the next part below the section. This causes ...

htmlcssfullpage.js

Changes made to index.php are not reflecting on the WordPress website

Currently making changes to my WordPress theme and just included a new div with the class "sidebar." However, I'm encountering an issue where it's not updating on the homepage of the website. Strangely enough, the stylesheet does seem to be updat ...

phpcsswordpress

Retrieve the value of a variable from a JSON decoded response

My json response has been decoded into an array $data: stdClass Object ( [outboundSMSMessageRequest] => stdClass Object ( [deliveryInfoList] => stdClass Object ( [deliveryInfo] => stdClass Object ( [address] => 8606142527 [deliveryStatus] => ...

phphtmljsonresponse

JavaScript function is not identifiable

I am currently developing a tic-tac-toe game with 9 buttons that will display either an X or O image depending on the boolean value of the variable isX. The main container for these buttons is a div element with the id 'stage' and each button ha ...

javascripthtmlcssfunction

Is there a more efficient method for showcasing model objects in Thymeleaf rather than utilizing a form?

I've been exploring Spring Boot, Thymeleaf, and frontend development in general. Currently, I have a frontend table that displays a list of objects from the backend, along with a form to allow users to view properties of each item in the list. Howeve ...

javahtmlspring-bootthymeleaf

Footer that sticks to the bottom of the page across various pages

Having trouble printing a 2-page document on Chrome. The first page has fixed content while the second page has dynamic content in an extended table. The problem I'm facing is keeping the footer at the bottom of the second page. The CSS code below wo ...

htmlcsstwitter-bootstrapgoogle-chrome

What causes loss of focus in a React input element when it is nested inside a component?

When I have an input element connected to the React Context API, updating the value onChange works fine when the element is not nested within a component. However, if I render a different component just under the input that returns another input field conn ...

htmlreactjsformsecmascript-6ecmascript-2016

Despite my usage of className, I still encounter the error message "Error: Invalid DOM property `class`."

I am having trouble debugging this issue as I am unsure of the exact location of the error. Here is the link to the repository: https://github.com/kstaver/React-Portfolio Error #2. There are three more promise rejection errors present, which I will addres ...

javascripthtmlcssnode.jsreactjs

Access information from multiple div elements using JavaScript data-attributes

Having trouble retrieving data-attribute values from multiple divs with the same class when clicked. The goal is to display the data value of the clicked div. function playSound(e) { const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`) ...

javascripthtmlcsscustom-data-attribute