Looking for some assistance with this issue. The solution I found doesn't seem to be working properly in IE 8.
In short, when you add a background image to a table row, the background is showing up in all the inner cells as well.
Looking for some assistance with this issue. The solution I found doesn't seem to be working properly in IE 8.
In short, when you add a background image to a table row, the background is showing up in all the inner cells as well.
If you want to have a background image on a table row that is compatible with IE8, Safari, and Chrome, the trick is to apply the background image to the table cells within the row rather than directly to the row itself.
For instance, consider the following table:
<table>
<tr>
<td class="cellFirst">First cell</td>
<td class="cellMiddle">Middle cell</td>
<td class="cellMiddle">Middle cell</td>
<td class="cellLast">Last cell</td>
</tr>
</table>
By applying the CSS below:
td.cellFirst {
background: url('my-image.png') 0 0 no-repeat;
}
td.cellMiddle {
background: url('my-image.png') 50% 0 no-repeat;
}
td.cellLast {
background: url('my-image.png') 100% 0 no-repeat;
}
You can achieve a 'row' with a background image by using the same image for each cell within the row. The key is adjusting the background position of the image for each cell. Starting from the left for the first cell (position at 0), hiding the left edge for middle cells (positioned at 50%), and starting from the right edge for the last cell (positioned at 100%).
With this method, you can successfully add a background image to a row in your table.
A more effective solution would be to implement the following method:
Include position:relative in the TR and remove the background-image:none from the TD.
It has been reported to work on all browsers except Mac Safari. To address this issue, enclose the TR block within a TBODY block and assign the background to the TBODY block ;)
Indeed!
Please include the style 'background-image:none' to the td elements within the specified tr.
Can the "row" image assigned to tables with background position depend on equal column sizes? What if the image size doesn't fill the entire row? Below is the CSS that functions correctly in FF:
tr.selected { background: #0842C4 url(/my/background/image) repeat-y top right; }
The image is a gradient starting at color #0842C4.
To make things more difficult, the HTML is a JavaScript-created popup menu that I cannot modify, so adjusting the table is not an option.
Check out my fiddle link here! I managed to create a spinning spinner using CSS, however, I am struggling to round the edges of the black part that is spinning/moving. Can someone help me achieve this effect? .loader { position: relative; border: ...
Website: I am interested in linking just the triangle banner located at the top right corner of the page. The triangle image is actually a transparent rectangle with only the triangle portion filled in, so I want to ensure that only that particular sectio ...
Check out my demo on jsfiddle I am trying to implement a reverse transition when clicking the <li> again. The commented code did not work, but the code below worked perfectly: let dbclickre = true; function flipped() { if (db ...
Question How can I efficiently import variables.scss globally without the need to duplicate them in every file and reference them in my build instead of importing? Setup I am using Vue2 with laravel-mix, where I have imported index.scss in my main.js ...
Utilizing bootstrap, I am aiming to position two wells side by side without them being squeezed right next to each other. However, I am encountering some issues with achieving this. Here's the code snippet I am currently using: <div class="contai ...
I've been trying to embed a Google Maps on my website, but for some reason, it keeps stretching and showing grey sections with rounded borders. Here's the code I'm using: <div class="p-5 col-6 d-flex flex-column justify-content-between"& ...
After attempting to apply a class to an element in the mounted lifecycle, I noticed that the transition effect was not taking place. The element would immediately display in its final state: However, when I used setTimeout to delay the class change, the t ...
Consider the following scenario: <input type='text' /> <br /> <iframe> <input type='text'> </iframe> With the style defined as: input[type='text'] { border: 1px solid black; } If you w ...
I have implemented the HTML native input date element (found here- https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date) and encountered an issue in Safari on macOS where my date picker is being displayed off-screen. How can I resolve this ...
On my HTML webpage, I am facing an issue with the "left-section" scrollbar. It does not cover the entire height of the section. The scrollbar only appears when the window is resized small enough to reach "Link 18". Even then, the scrollbar does not scroll ...
Why is the content stacking within each list item instead of being on the same line? I've attempted using floating and adjusting the position, but nothing seems to be working. How can I resolve this issue? .icon-left{ float:left; padding: 1 ...
My website utilizes a Slideshow feature to display images for blog posts. Recently, I attempted to include multiple slideshows within an article, which unfortunately caused all of the slideshows to malfunction. As it stands now, when the code is executed, ...
Is there a way to ensure that the previous line of text is always shorter than the next one, even if the length of the text is unknown? For example: Lorem ipsum dolor sit amet, consectetur adipiscing et libero posuere pellentesque. Vivamus quis nulla jus ...
Let's consider having 3 elements like this: <h1>Hello</h1> <p>hello</p> <h1>Hello</h1> I am looking to remove the second <h1> as I only want it to appear once on the page. However, I would like to have flexib ...
I have a component set up like this: (Check out the Code Sandbox example here: https://codesandbox.io/s/boring-platform-1ry6b2?file=/src/App.js) The section highlighted in green is a div. Here is the code snippet: import { useState } from "react" ...
I have several divs with the class .item. When the user clicks on the Classfilter submit button, all .item elements that also have at least one class from the dateClasses array (for example ['28.09.2015', '29.09.2015']) should be hidden ...
https://i.sstatic.net/SpG52.png The layout appears to be extending to the right and bottom, despite my attempts to fix it. I am utilizing the Bootstrap table class in my code. Here is the code snippet: HTML: <head> <link rel="stylesheet" ...
While setting up WordPress, I encountered an issue during the database details input in the first step of the installation process. I am using XAMPP and have tables in my database named wordpress_tbl_table1 and wordpress_tbl_table2. I entered "wordpress_tb ...
I am working on building a step progress bar using the HTML code below: .fa-check-circle { color: #5EB4FF; } .fa-circle { color: #CFD7E6; font-size: 14px; } .container { width: 100%; position: absolute; z-index: 1; margin-top: 20px; } . ...
What could be simpler than this: {this.state.dash ? <div className='dashWrapper slide'> HELLO </div> : null} I've tried everything, but nothing seems to show up inside the div. ...