I have a table in which I have this
</tr>
<tr class="table-top-background" >
<td class="thread-pic" ></td>
<td class="thread-top-middle" colspan="2" >Threads</td>
<td class="thread-information">Last Post</td>
</tr>
So I want to give background image to my tr, so I put this
.table-top-background
{
background:url('/img/design/extra-large-back.png') no-repeat;
position:relative;
color:White;
height:31px;
}
.thread-pic
{
width:30px;
}
.thread-information
{
width:280px;
}
.thread-top-middle
{
width:418px;
}
The problem is that in all browser's it is fine expect Google Chrome.
In Google Chrome it seems that I give background not to tr, but to all td's... It repeat same background for each td.
It is the same in IE7, but in one of stackoverflow questions I read about solving that with position:relative and it helped.
But I didn't find any solutuin for Chrome.
I try to give tr css like this also
.table-top-background
{
background:url('/img/design/extra-large-back.png') no-repeat 0% 100%;
display:block;
position:relative;
color:White;
height:31px;
width:728px;
}
But it change all my table design... At that time text's in td's of this header row aren't in that places and also all other first td's of my table are in the same size as my header tr . It seems really hillarious.
I tried also to give display:inline-table instead of display:block and it didn't help me too...
What is the solution of that problem?
EDIT: Same problem is in Safari, so it is webkit problem.
Although it worked for me, take a look at:
Can we solve the table row background image problem, in chrome, in multi celled tables?
Which mentions this fiddle:
http://jsfiddle.net/pzjUt/
Using display:table-cell on the <tr> seems to do the trick, but it may have side effects in Chrome or other browsers.
Related
See jsFiddle.
<table>
<tr>
<td>
<div>
Hello World
</div>
</td>
</tr>
</table>
html, body {
height:100%;
background-color:steelblue;
margin:0;
}
table {
height:100%;
border:1px;
}
td {
border:1px;
}
tr {
background-color: green;
}
div {
background-color:salmon;
height:100%;
}
Prior to Chrome 50, a table with height 100% would also implicitly apply height 100% to it's table cells.
This has been a longstanding bug in Firefox and IE versions < 11. Chrome and Safari have always passed the implicit percentage height onto the cells.
What is the correct behaviour according to the specifications? Has this been introduced by design?
Edit:
Chromium Bug Report
This appears to be the same question as this Chromium issue, which was closed over 2 months ago.
According to the comments there, the new behavior in Chrome 50 is "more spec compliant".
So, to answer your question, it would appear this is intentional, and is considered (at least by the Chromium developers) to be the correct behavior according to the specifications.
The solution, naturally, is to just explicitly set the cell's height to 100%.
The above answer works (to explicity set the cells height to 100%)
If you want all cells to follow that patterns, you can simply use
<style>
td{
height:100%;
}
</style>
Alternatively, you could try:
<style>
td{
height:inherit;
}
</style>
I believe either should work.
I have a table with the following basic structure:
<table>
<thead>
<tr>
<th>
Header Text
</th>
...
</tr>
</thead>
<tbody>
<tr>
<td>Random text</td>
...
</tr>
...
</tbody>
</table>
Where the a link tags can be clicked to re-sort the table.
I want to define some CSS so that regardless of how many lines the text within the a tags span across, all of the a link tags will take up 100% the height of their containing th tags so that you can click anywhere within the table header to sort on a particular column.
I tried using the following CSS, but it only worked in Chrome:
th {
height: 1px;
}
th a {
height: 100%;
}
I also know that you could use JavaScript to solve this problem, but I'd really like to avoid that if possible. In other words, an HTML/CSS only solution would be ideal.
I have to support IE back to IE8 and pretty much all versions of Chrome, FF, etc. Does anyone have any advice on how to do this?
Thank you.
EDIT: Old version relied on duplicating the link and hiding a copy while sizing the other outside of document flow, but we can do better... here's better.
You can get it to work in relatively modern Chrome (39.0+) and Firefox (31.2+) and in the last version of Safari for Windows (5.1.7) via ::before.
In IE, it won't quite size it right on its own (same problem as with the doubling), but by tossing in an overflow:hidden, making the height larger than 100%, and adding ::after with clever positioning, you can mitigate this problem fairly easily.
If you set the heights back to 100% you can force the banding IE has to be visible.
Obviously, the background-shading on hover is purely for demonstrative purposes.
In addition, I figured out how to make elder fox (FF 3.5.2, welcome to CSS3) degrade cleanly. That's what .safety is for, and it was actually easier to do than I had expected.
body{
background: #f06;
background: linear-gradient(45deg, #f06, yellow);
min-height: 100%;
}
.safety{
position:relative;
}
th{
position:relative;
background-color:rgba(255,255,255,0.5);
overflow:hidden;
}
a{
display:block;
}
a:hover{
text-decoration:none;
background-color:rgba(255,0,0,0.3);
}
a::before{
content:"";
position:absolute;
top:0;
left:0;
height:900%;
width:100%;
}
a::after{
content:"";
position:absolute;
bottom:0;
right:0;
height:900%;
width:100%;
}
a:hover::before{
background-color:rgba(0,0,255,0.3);
}
a:hover::after{
background-color:rgba(0,255,0,0.3);
}
<span class="safety">
<table>
<tr>
<th>The Link</th>
<th><br /><br />next cell<br /><br /></th>
<th>The Link 2<br />Naturally Taller</th>
<th>next cell</th>
</tr>
<tr>
<th>streeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeetch</th>
<th>next cell</th>
<th>next cell</th>
<th>next cell</th>
</tr>
</table>
</span>
Why pseudoelements?
Because we didn't remove the link itself from document flow, the link is still able to greedily grab the screen real-estate it itself needs.
And since we can position and size them separately, we can mitigate any bugs with how the browser picks what 100%; means without removing the link.
Why you can't simply say height:100%;
Firstly, a is an inline element, meaning it is only as big as its content. Ergo, sizing on it itself fails without making it a block or inline-block.
However, that only makes width:100%; work in this case.
If you want to have a height:100%; you must declare what 100% is in a non-internally-relative manor that can be propagated down to the percentage-based element. That means no percentages (outside of the screen units vh, vw, vmin, vmax), as otherwise you'd get "correct" behavior when something scales its size upwards, creates more scroll bar, then scales its size upwards more in an infinite loop.
You CAN bypass this, however, via position:absolute, since that removes the element from the normal flow- as in it is not allowed to increase the size of its parent, so it cannot produce an infinite loop.
Since the parent has a knowable finite size if it doesn't scale to its relative-height child, height:100%; on the absolute element will be used (in the expected manner) so long as the absolute element is also a block or inline-block element (as inline is force-sized by its contents).
It also will require a width, even if block, because it has been removed from document flow and thus no longer knows for certain how wide it should be (parent or anchoring ancestor?)
Aside
The change of implementation was thanks to Lea Verou's book, and I felt like a total dunce when I read her suggestion of using ::before- especially since I've actually used it for expanding the clickable area before.
Also, what the hell is an element to its pseudo-elements? Parent from an affair with the CSS?
As long as there's no cell padding on the TH, this should work:
th {
height: 2em;
}
th a {
display: block;
height: 2em;
}
I have a table on my page that I am unable to apply rounded corners to for Firefox. I have tested on IE, Chrome, and Safari and it works fine on those browsers.
HTML
<table class="login-table">
<tr id="header">
<td id="logo">
</td>
</tr>
</table>
CSS
#logo {
height:85px;
width:170px;
border-top-right-radius:14px;
border-top-left-radius:14px;
}
I tried adding -moz-border-radius-topleft:14px and -moz-border-radius-topright:14px to #logo, but it did not change my output.
Here's an example which shows my issue.
It looks to me that the tr element is actually keeping it's square edges, causing the issue. If you make the tr itself transparent, and make sure the children don't inherit the transparent background-color, it seems to work:
// The first <tr>
#header {
background-color: transparent!important;
}
// The child of the first <tr>
#logo {
background-color:#1c918a;
}
Demo: http://jsfiddle.net/o9z695hf/
I managed to show the top rounderd by moving the CSS down to .container and adding a few changes (height: 100%, etc.)
Here is the result: http://jsfiddle.net/jzdy7yz4/16/
I still see what looks like a white 1px border outside. I suppose it is some kind of spacing.
I am trying to show a checkmark in the top right corner of a td. I can't seem to get it there without expanding the whole tr. This is my table:
<tr style="position:relative;>
<td><p class="mark" style="position:relative; left:10px;></p><input type="text"></td> <-- in this td the icon should be placed.
...more rows...
</tr>
I just tried using a class for the icon and making the tr relative and the td relative but it keeps expanding the td's height.
Any ideas?
You can use first-child selector and background-position attribute to show icon on right top of first td
tr:first-child td:first-child
{
background-image:url('http://files.softicons.com/download/toolbar-icons/iconza-light-green-icons-by-turbomilk/png/32/check_mark.png');
background-position:right top;
background-repeat:no-repeat;
padding-right:35px;
padding-top:5px;
padding-bottom:5px;
}
You can shorten this like
tr:first-child td:first-child
{
background:url('http://files.softicons.com/download/toolbar-icons/iconza-light-green-icons-by-turbomilk/png/32/check_mark.png') no-repeat right top red;
padding:5px 35px 5px 0
}
JS Fiddle Demo
Since you cannot use a position rule on table cells (prohibited by standards, only strictly enforced by Gecko) you have to use a workaround with another element inside, or use some other solution. Also you shouldn't be generating images for 'semantic' stuff like this, use classes, makes it both easier to generate, and easy to manipulate with JS.
HTML
<table>
<tr>
<td class="checked">...data 1...<br>multiline</td>
</tr>
<tr>
<td>...data 2...</td>
</tr>
<tr>
<td class="checked">...data 3...</td>
</tr>
</table>
CSS
td{
background:#fcf4cf;
}
td.checked:before {
content:url(http://www.kyoceradocumentsolutions.com.au/Style%20Library/en-us/Images1/TickMark.gif);
float:right;
padding-left:4px;
}
See this work on JSFiddle
This is compatible with all major browsers and semantically more correct than your current approach, with shorter CSS and HTML.
For some reason, one of the inside borders disappears on my table whenever I change the default height with some CSS.
HTML:
<table class="event">
<tr>
<td>Start Date</td>
<td>2009-6-2</td>
</tr>
<tr>
<td>End Date</td>
<td>2009-6-8</td>
</tr>
<tr>
<td>Location</td>
<td>Vail</td>
</tr>
</table>
CSS:
table.event
{
border-collapse: collapse;
border: 1px solid #000;
width: 33%;
height: 300px;
}
table.event td
{
border: 1px solid #000;
padding: 2px;
}
Here's what it currently looks like
http://img410.imageshack.us/img410/394/whatv.png http://img410.imageshack.us/img410/394/whatv.png
Anybody have any ideas on how I can fix this problem?
If you take your code and put it directly in a blank html page, does it work? I am wondering if there is something outside causing it, perhapes in a different CSS (just guessing).
I pulled this open in FF, Safari, Opera, Chrome, IE6-7 and 8 and could not replicate it.
Even with/without out the border-collapse i get the same results.
Just solved the problem. Jeez, I feel like an idiot. The reason this was happening was because I was "zoomed out" a little bit in Firefox. The scaling got rid of one of the inside borders.
Thanks to all for the help, It was Jason Heine's idea that eventually lead to me figuring it out.
That code works fine for me in firefox and ie7. Are you changing the height with javascript or something else, or just within the editor? However, you could try getting rid of border-collapse.