Solve td height issue on Internet Explorer 9

In a td, I am dealing with dynamic content that, when too long, causes the cell to ignore the set height and stretch. This issue seems to be isolated to ie9.

Below is my CSS code:

table tr {
min-height: 58px;
height: 58px;  overflow:hidden!important;
}
table td {
border-right: 1px solid #CCCCCC;
border-bottom: 1px solid #CCCCCC;
padding: 0 15px 0 15px;  overflow:hidden!important; height: 58px; white-space:wrap;
}

I'm uncertain about how to resolve this. Any ideas?

Answer №1

Avoid using td for content layout; reserve tables for displaying tabular data only. Instead, utilize spans, divs, and apply appropriate CSS styles.

Dealing with browser quirks is just part of web development. While this issue may get resolved in IE14, there will always be new challenges to tackle!

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 include two functions within a single ng-click event?

Is it possible to incorporate two functions in a single ng-click event? Below is the code snippet: <button class="cButtonSpeichern" ng-click="saveUser()">Speichern</button> In addition, I would like to include this function as well. alert ...

Creating a pop-up confirmation message upon email submission through React and custom CSS styling

In my React project, I've created an email form and included the <div className="msg">Message has been sent</div> class. However, I only want this message to display when the message has successfully been sent (status: true). How ...

Tips for reversing a sketch: Creating a timer where the text continuously refreshes causing it to intersect

Currently, I am working on developing a stopwatch that is functional. However, I am facing an issue where the text overlaps itself when it changes due to repetitive drawing. Removing the strokeText and fillText from the interval prevents it from changing a ...

Attempting to add custom styling to the parent container of a specific element targeted using the :target selector in plain HTML and CSS

I have a document with internal links to subheaders from various categories. My goal is to selectively hide category content based on the specific #target selected. <html> <style> .tab-folder > .tab-content { display: none; } ...

Exploring the distinctions among different material design frameworks

Confirming my grasp of the situation here. Material design is an interface building approach developed by Google. Material lite is Google's public implementation of this concept. serves as an independent open-source adaptation. In addition, Angul ...

Displaying airport board information in a PHP table from a database

Is there a way I can enhance the display of my database table by showing a certain number of records at a time, then smoothly transitioning to the next set of records after a few seconds? For instance, if I have 20 records in the database, but only want t ...

Develop a dynamic animation using gradient and opacity properties

I'm still getting the hang of HTML, JavaScript, and CSS but I recently made some changes to someone else's code to animate a gradient. The original code used background: rgb, but I switched it to background: rgba. It seems to be working fine, but ...

What is the best way to show the logged-in user's name with PHP?

After a successful login, I want to display a personalized greeting message to the user in PHP (e.g. "Hey User!"). However, the code $username = $_SESSION['username']; is not retrieving the username properly and displays nothing (Hey !). Here ...

What are the steps for adding a photo to the folder directory on my hosting server?

Hey there! I've been having some trouble uploading a photo from my website to the hosting server's directory (/public_html/upload/) using php. No matter what I try, the folder remains empty. I'm stuck and not sure where I'm going wrong. ...

Having difficulty changing the value of a Select element in AngularJS

Struggling to update the select value from AngularJs. Check out my code below: <select ng-model="family.grade" > <option ng-repeat="option in options" value='{{option.id}}'>{{option.text}}</option> </s ...

What is the best way to customize arrow designs in a React Slick Slider?

I am struggling to customize the arrows in react-slick with my own PNG images. Despite my efforts, the images appear distorted on the screen as they are automatically set to a width and height of 20px instead of their actual size of 17x27px. I have experim ...

Utilize React Native to showcase JSON data in a visually appealing way by organizing it into titles and corresponding lists for both

I created a live code on Expo.io to showcase JSON data categories as titles and the subs as a list. This code utilizes .map() to retrieve data from an array. import React, { useState } from 'react'; import { Text, View, StyleSheet, Button, FlatLi ...

Unable to locate image files stored in vendor/images in the Rails 4 view

I have successfully set up a custom bootstrap theme with Rails 4, and placed the image file here: /vendor/assets/images/custom_bootstrap_theme/demo/bg01.jpg The index.html.erb file is referencing this image as follows: <img src="/vendor/assets/image ...

Is the post secure if a HTTP web page sends an ajax request to a HTTPS url?

If I developed an HTML/jQuery widget to be embedded on third-party websites with users of very limited technical knowledge and potentially missing SSL certificates, would the information posted securely through AJAX Post to a secure URL remain protected? ...

Steps on how to trigger an onmouseover event for entire blocks of text:

I'm currently in search of an onmouseover code that seems to be elusive on the vast internet. A CSS box format has been successfully created: .box { float: left; width: 740px; height: 300px; margin-left: 10px; margin-top: 10px; padding: 5px; border: ...

"Converting web-based SVG graphics for high-quality print output

In the process of developing an innovative online restaurant menu editor, I have constructed a template utilizing SVG and a jpeg image as the background. Users can easily modify the text using SVG elements overlaying the template image. I have mastered th ...

Retrieving data from an HTML Table using Javascript

I am in the process of designing a dynamic web form that populates from a stored procedure. The form consists of a table with a dropdown list, a text box, and a label. While I can successfully retrieve data from the dropdown and text box, I am facing diffi ...

What is the best method to retrieve duplicate fields from a database in HTML5?

this.db.transaction(function (tx) { tx.executeSql('SELECT tsk.*, cont.firstName, cont.lastName ,cont1.firstName, cont1.lastName, list.listId FROM tbl_tasks tsk, tbl_contacts cont,tbl_contactequests cont1, tbl_lists list WHE ...

Looking for a HTML5 website similar to Benthebodyguard?

As someone without any programming experience in website development, I am interested in creating a simple website like , where users can scroll downward. My goal is to incorporate a feature that allows users to vote on whether they like or dislike 5-6 d ...

The CSS formatting is not displaying correctly on a particular div within an HTML file

Recently, I encountered a peculiar situation with an HTML document. A <div> element that was originally styled via its id attribute in a separate CSS file suddenly lost its styling when I changed the attribute to a class. The relevant CSS code transi ...