Trying to get a background image to display in a single table cell element in Chrome...and it will, but only when I hover over that cell. If I remove the :hover, it just doesn't display no matter what I do.
I'm asking this question now in the hope that Google has fixed this issue and I haven't seen the answer after searching, or someone has figured it out. The other reason is that there are search results from 2010 and they mostly talk about table row elements instead of single cells.
This fails to give me my image in a table cell:
#matrix td.level {
position: relative;
vertical-align: top;
height: 200px;
width: 150px;
background: transparent url("/images/th-bg-level.png") no-repeat 0px bottom;
}
But I can hover just fine:
#matrix td.level:hover {
background: transparent url(/images/th-bg-level.png) no-repeat -157px bottom;
border: none;
}
It also will show the image if I change to a <th> element, but I don't really want to do that...bad coding practice and all...
Is there a solution to this issue?
Using backgrounds on <td> elements works fine, the issue must be somewhere else.
td {
padding: 30px;
}
td.target {
background: transparent url("http://i.imgur.com/cAN2O2J.jpg") no-repeat 0px bottom;
color: white;
}
<table>
<tr>
<td>John</td>
<td class="target">Doe</td>
</tr>
</table>
The hover state and the non-hover state in your code address completely different folders (/images/ vs ../images/), isn't the problem there?
Related
This question is already on stackoverflow. But the solutions are not working for me. Actually I'm working on an Angular project. I want to align Mode of comparison and the corresponding Dropdown in the middle with respect to each other. Here is the widget that I'm creating. I've clearly marked that part in the image:
Here is my HTML:
Note: pt-label, dls-combobox and dls-option are my custom made angular components.
<table>
<tbody>
<tr class="my-row">
<td class="first-col1">
<div class="comparing-switch1">
<pt-label>Mode of comparison </pt-label>
</div>
</td>
<td class="second-col1">
<div class="comparing-label1">
<dls-combobox placeholder="Time average">
<dls-option>
<pt-label>Time average</pt-label>
</dls-option>
</dls-combobox>
</div>
</td>
</tr>
</tbody>
</table>
and here is my CSS:
.my-row {
background: cornflowerblue;
}
.first-col1 {
background: magenta;
width: 50% !important;
}
.second-col1 {
width: 100%;
background: blueviolet;
padding-bottom: 10px;
}
table.stats tbody tr:nth-child(even) {
vertical-align: middle !important;
}
table.stats tbody tr {
vertical-align: middle !important
}
Even If I try to set it through margin and padding then both of them gets shifted even when the class names are different. One more thing I noticed. When I inspect the element table. When I remove vertical-align: baseline from these two places (as marked in the picture below) the my problem is solved:
What is wrong with my code. Please correct me.
Here vertical-align: baseline property is applied to the table. vertical-align: middle !important is applied for tr element.
since table has that property tr itself aligned in baseline. try adding vertical-align: middle for the table
This question already has answers here:
How to affect other elements when one element is hovered
(9 answers)
Closed 4 years ago.
I know that questions like this had been asked before, but it's different, and I couldn't find an answer for it under other question. Note that I'm a beginner, so don't judge me for not knowing something
I'm sorry if there actually is a question like this with an answer,I couldn't find it, then I would appriciate if you linked it :)
So Here's this simple code
This is a div on the page
.XY{
display:block;
position:static;
background-image: url(XY.jpg);
background-repeat:repeat-x,;
}
In this div there is a table, with many cells, including these ones too
#XY,#XY,#XY,#XY{
display:table-cell;
height:40px;
width:200px;
margin:auto;
text-align:center;
}
So my question is: How could I achieve that when I hover on those cells, then the background-image of the entire div changes, not only the cell's?Can I do this in css only or it requires some script codes too?
Thanks for any helpful comments/answers in advance!
Those all cells are in a div on the page, and What I want is when I hover on the Assault cell, then the current background image changes to a different one
Try this.
.XY {
display: block;
position: static;
background-image: url(https://www.w3schools.com/howto/img_fjords.jpg);
background-repeat: no-repeat;
color: #fff;
background-size: cover;
}
.XY:hover {
background-image: url(https://www.w3schools.com/w3css/img_lights.jpg);
background-repeat: no-repeat;
background-size: cover;
}
#XY,
#XY,
#XY,
#XY {
display: table-cell;
height: 40px;
width: 200px;
margin: auto;
text-align: center;
color: #000;
font-weight: bold;
}
<div class="XY">
<table>
<tr>
<td id="XY">Table Cell</td>
<td id="XY">Table Cell</td>
</tr>
</table>
</div>
Try this
div:hover {
background-color: green;
}
If this isn't what you were looking for just let me know
You could try giving that cell a different div class than the others and then for exp:
.table.some_style td{
background-color: your color;
}
.table.some_style td:hover{
background-image: your image;
}
If you want to have many cells to have tthat effect you can just give them the same class.
You´ll have to try if it works for you.
Please let me know if it worked or not.
I want use a div that has a background-color, but if I print the page it appears in white .
When I create a table using <tr bgcolor="#333333"> it also does not work.
How I can create a print page using css and html ?
My code :
<table border="0px" cellspacing="1" cellpadding="0" bgcolor="#777777" width="650px">
<tr bgcolor="#999999">
<td align=right colspan=2><span style="font:bold 14px 'b nazanin';">Text</span></td>
</tr>
</table>
CSS: box-shadow: inset 0 0 0 1000px gold;
Works for all browsers and on table cells and rows.
I would look into the media query way of targeting a stylesheet to the print. I don't believe you will find a common way cross-browser of doing what you want to do (control whether the user's printer prints a background) without using PDFs of your content, which may not be desirable/doable. However, you should consider specially handling your print styles and perhaps avoid backgrounds in your design of the printed page.
http://www.w3.org/TR/css3-mediaqueries/
EDIT
Seeing your other comment, if you have to make the backgrounds print and have a single user, teach your user to make the printer print backgrounds. See for example in Firefox (checkbox):
Background colors and images don't print by default.
It is a printer option your users could change, but you absolutely can't count on your users knowing or doing that. You cannot control this from the web side (as far as I know).
In Crome "-webkit-print-color-adjust: exact;" works for me.
Use:
#media print {
.collage_bg {
background-color: #E6E7E9 !important;
-webkit-print-color-adjust: exact;
}
}
Or Check Background Graphics option:
Both options working fine for me.
Here is something worked for me as I was using Fixed size block element. The image used is 1px X 1px but forced to expand to the size of box. This way we are printing image directly instead of background color/image.
<style type="text/css">
.outer {
width: 200px;
height: 80px;
position: relative;
}
.outer .grayBg {
position: absolute;
left: 0;
top: 0;
height: 80px;
width: 100%;
z-index: 1
}
.inner {
width: 100%;
position: relative;
z-index: 10
}
</style>
<div class="outer"><img src="grayBg.png" class="grayBg" />
<div class="inner">Some text</div>
</div>
You could however always use an image for that. Make an image with a width of 1px and repeat it like this:
background: url('path/to/image.png') repeat-x;
Chrome and Safari are displaying a border around the image, but I don't want one. There is no border in Mozilla. I've looked through the CSS and HTML, and I can't find anything that is fixing it.
Here is the code:
<tr>
<td class="near">
<a href="../index.html"class="near_place">
<img class="related_photo" />
<h4 class="nearby"> adfadfad </h4>
<span class="related_info">asdfadfadfaf</span>
</a>
...
CSS:
a.near_place {
border: none;
background: #fff;
display: block;
}
a.near_place:hover{
background-color: #F5F5F5;
}
h4.nearby {
height: auto;
width: inherit;
margin-top: -2px;
margin-bottom: 3px;
font-size: 12px;
font-weight: normal;
color: #000;
display: inline;
}
img.related_photo {
width: 80px;
height: 60px;
border: none;
margin-right: 3px;
float: left;
overflow: hidden;
}
span.related_info {
width: inherit;
height: 48px;
font-size: 11px;
color: #666;
display: block;
}
td.near {
width: 25%;
height: 70px;
background: #FFF;
}
Sorry, I copied some old code before. Here is the code that is giving me trouble
Thanks in advance
Now I don't know if this is a bug with Chrome or not but the grey border appears when it can't find the image, the image url is broken or as in your case the src isn't there. If you give the image a proper URL and the browser finds it then the border goes away. If the image is to not have a src then you will need to remove the height and width.
sarcastyx is right, but if you want a workarround you can set the width and height to 0 and a padding to make space for your image.
If you want a icon of 36x36, you can set width and height to 0 and pading:18px
I know it is an old question. But another solution is to set the src to a 1x1 transparent pixel
<img class="related_photo"
src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" />
This works for me.
.related_photo {
content: '';
}
This may happen when the image is planted dynamically by css (e.g. by http://webcodertools.com/imagetobase64converter) in order to avoid extra HTTP requests. In this case we don't want to have a default image because of performance issues. I've solved it by switching from an img tag to a div tag.
img[src=""]{
content: "";
}
Lazy image solution (img loading="lazy")
If you are using lazy image loading you may notice this thin thin border before the image has loaded more than if you didn't.
You're more likely to see this for a horizontal scrolling gallery than a normal vertical scrolling webpage.
Why?
Lazy loading unfortunately only works on the vertical axis. I'm assuming this is because there's a high likelihood that you're going to scroll down, but not left to right. The whole point of lazy loading is to reduce images 'below the fold' from consuming unnecessary bandwidth.
Soution 1:
Detect when the user has scrolled (eg. using intersection observer) and then set loading="eager" on each image you want to immediately load.
I haven't actually tested this, and it's possible some browser's won't immediately load images - but it should be fine.
Solution 2:
Detect when the image has finished loading loaded and then fade it in.
img.setAttribute('imageLoaded', 'false');
img.onload = () =>
{
img.setAttribute('imageLoaded', 'true');
};
Then with css hide the image until it's loaded, after which it fades in nicely:
img
{
opacity: 1;
transition: opacity .5s;
}
img[imageLoaded='false']
{
opacity: 0; // hide image including gray outline
}
Also this behavior is subject to change, the browser may be clever enough to detect a horizontal scrolling element in future - but right now Chrome and Safari both seem to have a zero pixel window for looking for horizontal lazy images.
img.related_photo {
width: 80px;
height: 60px;
**border: solid thin #DFDFDF;** //just remove this line
margin-right: 3px;
float: left;
overflow: hidden;
}
Inside img.related_photo, you need to change border: solid thin #DFDFDF; to border: 0.
I have fixed this issue with:
<img src="img/1.jpg" style="height:150px; position: absolute; right: 15px;">
The right: 15px is where you want the image to be shown, but you can place it where you want.
I just added src="trans.png", trans.png is just a 100x100 transparent background png from photoshop.
Worked like a charm no borders
To summarise the answers given already: your options to remove the grey border from an img:not([src]), but still display an image using background-image in Chrome/Safari are:
Use a different tag that doesn't have this behaviour. (Thanks #Druvision) Eg: div or span. Sad face: it's not quite as semantic.
Use padding to define the dimensions. (Thanks #Gonzalo)Eg padding: 16px 10px 1px; replaces width:20px; height:17px; Sad face: dimensions and intentions aren't as obvious in the CSS, especially if it's not an even square like #Gonalo's example.
I have the following HTML table:
<table style="width: 100%;">
<tr>
<td class="title_bar_left_border"></td>
<td class="title_bar_middle"></td>
<td class="title_bar_right_border"></td>
</tr>
</table>
With the following css rules:
.title_bar_left_border
{
BACKGROUND-IMAGE: url(tray_left.gif);
WIDTH: 3px;
HEIGHT: 24px;
}
.title_bar_right_border
{
BACKGROUND-IMAGE: url(tray_right.gif);
WIDTH: 3px;
HEIGHT: 24px;
}
.title_bar_middle
{
BACKGROUND-IMAGE: url(tray_middle.gif);
WIDTH: 100%;
BACKGROUND-REPEAT: repeat-x;
HEIGHT: 24px;
}
Any idea why this is the result?
Instead of getting a nice table header with rounded corners you get this weird gap between the cells. Where are the gaps coming from? Besides fixing this ugly issue, I would like to understand the rationale as to why all browsers render the HTML this way.
Those bars are cell spacing and padding.
You need to set the background of the division to the color of the gif files. That white space is the padding around the cells.
You can also set cellpadding='0' and cellspacing='0' in the table definition. The default values are 1 and 2 respectively. I'd recommend against it, though, as it might cause issues with the data bearing rows.
You see the default spacing.
Fix:
table
{
border-collapse: collapse;
border-spacing: 0;
}
table{border-collapse:collapse;}
is needed to remove the borders of the table...