Background-color in CSS can be seen overlapping border on table cells in Internet Explorer

I am encountering an issue with a table containing two simple table cells:

<table>
  <tr>
    <td>Test1</td>
  </tr>
  <tr>
    <td>Test2</td>
  </tr>
</table>

When I apply the following CSS to the table cells:

td {
  border: 1px solid #000;
  background-color: #CCC;
}

In Internet Explorer, the background is showing on top of the border. If I uncheck the background in the DOM explorer, I can see that the border is there.

I suspect this may be related to a parent element, but there are many parent elements and I cannot paste all of the code here.

Does anyone have any insight into what might be causing this issue?

cssinternet-explorerhtml-tableborderbackground-color

Answer №1

If you prefer to maintain the current positioning, consider using

background-clip: padding-box;

Answer №2

Surprisingly, the issue stemmed from a specific positioning rule in CSS:

td {
    position: relative
}

I'm not sure why removing it resolved the problem.

It took me quite a while to figure out the root cause, which is why I initially posted this question to save myself time. But thankfully, it's all fixed now :)

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

How to Retrieve the Url of a Clicked Element using CSS Property

Is it possible to retrieve the URL when a link is clicked using CSS alone, without relying on JavaScript or jQuery? ...

css

Steps for aligning the upper rectangular text in the center of the larger rectangular border

https://i.stack.imgur.com/7yr5V.png I was aware of a particular element in html that had text positioned in the upper left corner, but my knowledge didn't go beyond that. Should I be adjusting the translation on both the X and Y axes based on the par ...

javascripthtmlcssangulartypescript

Conceal excess text during auto-scrolling without removing it

I am looking to conceal extra text within a child div without fully deleting it or forcing it into a vertical orientation. I want the excess text to be revealed gradually, similar to how Spotify and Apple Music handle it. My goal is for the red div to act ...

htmlcss

The method of altering a menu link in WordPress using jQuery varies according to whether the user is logged in or not

I need to update the last link on my menu. When a user is logged in, it should display a profile link; otherwise, it should show a sign-up link. ...

javascriptjquerycsswordpress

`<div>` element with a class of "button" that listens for

I've been attempting to use a userscript to automate a button click. Inspecting the element reveals the button code as: <div class="q-w-btn cl"></div> Unfortunately, the button lacks an id attribute, making it difficult for me to select ...

javascripthtmlcss

How to modify the styling of an input element in React without directly manipulating the input itself

I have collected responses from a survey I created and now I want to showcase the results. The responses are rated on a scale from 1 to 5, and I would like to display them similar to the screenshot. Each number should be presented within a square, with ...

cssreactjsinput

Animation in CSS/transform drifting out of view

I have a challenge with animating text to each corner of the screen, where the text is rotated in every corner. However, I am facing an issue where the text goes off-screen in the top right and bottom left corners. It seems like the rotation might be causi ...

htmlcsscss-animationscss-transforms

CakePHP: Explaining the contrast between " $this->fetch('css') and $this->Html->css('cake.generic')" when working with CakePHP

Could anyone provide a brief explanation of these two lines found in the CakePHP layout.ctp file? It appears that both lines are used for adding CSS. What is the distinction between them? How do they function? $this->Html->css('cake.generic&ap ...

csscakephp-2.3

Set the clock to the correct time by winding it up

I have created a vintage-inspired clock using javascript and css. function updateClock() { var now = moment(), second = now.seconds() * 6, minute = now.minutes() * 6, hour = now.hours() % 12 / 12 * 360 + 90 + minute / 12; ...

javascriptcssmomentjs

Override the default Bootstrap 5 styling for nav-links

I recently encountered a problem while trying to customize the appearance of the nav-link elements in my Bootstrap 5 navbar. I initially thought I could simply override the existing styles by targeting the class in my CSS. However, my attempts were unsucce ...

htmlcssstylingbootstrap-5

CSS3 problem with using transparent PNGs as border images

Currently, I am implementing the border-image property using a PNG image that contains a transparent section. The issue arises when the background-color of the div is set to black. Upon applying the border-radius, the transparent section of the pattern dis ...

htmlpngtransparencycss

Do not apply hover effect to a particular child div when the hover effect is already applied to the parent

I am encountering a problem with the hover effect. I have 3 child div's structured as follows: <div class="parent"> <div class="child1">A</div> <div class="child2">B</div> <div class="child3">C</div ...

htmlcss

Tips for altering the scrolling rate of a container

I am trying to adjust the scroll speed of specific divs among a group of 5 divs. I came across a solution that changes the scroll speed for the entire document: http://jsfiddle.net/36dp03ur/ However, what I really need is a scenario like this: <div i ...

javascriptjqueryhtmlcss

Creating a multiline textarea with ellipsis using ReactJS

Looking to create a component with a multiline textfield that displays ellipsis (...) for text overflow beyond 2 lines. How can I achieve this through CSS only without modifying the actual stored text? Utilizing the React component found at: link Appreci ...

javascriptcssreactjsecmascript-6material-ui

Rotate the image as you hover your cursor over it

I am trying to implement a script where the image is rotated when the user hovers over it. Unfortunately, the hovering effect is not functioning as expected. $("#alcazar-image").rotate({ bind: { mouseover : function() { $(this).rotate({anima ...

jquerycsstwitter-bootstrap-3hover

One particular Django template is failing to load the CSS, while the rest of the templates are

In my folder, I have two Django templates. One template is for the URL localhost:8000/people and it correctly fetches CSS from /m/css/style.css. The problem arises with the second template meant for the URL localhost:8000/people/some-name. This template f ...

cssdjango-templates

Require presenting only four lists - slideDown in jQuery

I am trying to display only 4 out of 8 lists initially, and upon clicking a "more" button, the rest of the list should be revealed. Can someone please assist me with this? Below is the jQuery code: $(document).ready(function() { $("#accordion").hide(); ...

jqueryhtmlcssslidedown

Restore background color when clicked outside

I'm currently using this code to both load content from a div and change the color of the tab when a user clicks on it. However, I'm struggling to find a way to revert the background color back once the user clicks on something else. Any suggesti ...

jquerycsstabsbackground-color

How can I alter the background color of the entire header in Ionic?

Having some trouble changing the color of my header. I successfully changed the color of the white header, but not the black header where the time is displayed. I know this is beyond Ionic and part of Android, but I have seen other apps that are able to ch ...

cssangularcordovaionic-frameworkionic3

How can I maintain the hover color on a button with a text label even when hovering over the text label?

I need help creating a button with a text label that both respond to clicks and have a hover color. The current code I have works, but the hover color is lost when hovering over the text label. How can I modify the code to maintain the hover color even w ...

javascriptcsssvgd3.js