I have the following simple table to reproduce the issue:
<TABLE>
<TR>
<TD style="border: black solid 1px; width:24px; height:68px; margin:0px; padding:0px" >
<IMG
style="width: 24px; height: 68px; margin:0px; padding:0px; border:none"
src="Image24x68.png">
</TD>
</TR>
</TABLE>
The image is actually 24x86 pixels large. The border is just to mark the cell's boundaries. There is no css file assigned to the document.
I want the cell to be exactly as large as the image.
The problem is: the table cell gets always rendered a few pixels too high in any IE version (6, 7, 8) while it works fine in Firefox and other browsers.
Is there any solution / workaround for this?
You can set the images to display as block elements and this should remove the space.
<IMG style="display: block; width: 24px; height: 68px; margin:0px; padding:0px; border:none" src="Image24x68.png">
Looks like this: http://www.evilfish.co.uk/2007/07/31/ie-white-space-after-image-bug/
Remove all whitespace between the image and the closing td tag. In front of the image it doesn't seem to matter.
I tried all the other solutions on this page:
using display:block
removing whitespace in the <td> tags (i.e. I used <tr> and <td> tags without putting any whitespace between them)
using
padding:0px;
border-spacing:0px;
border-style:none;
border-collapse: collapse;
margin:0;
overflow: hidden;
Except for approach (1), these didn't work on IE. After tearing my hair out for three hours, I found this better solution: add a hspace=0 attribute to the image tag. For example:
<img src="http://www.printersrose.com/css/myimages/book1.jpg" alt="Header1"
class="ImageHeader" hspace="0">
I set up an example of this at http://www.PrintersRose.com.
Try the following:
<table>
<tr>
<td style="border: 1px solid black; font-size: 1pt;">
<img style="width: 24px; height: 68px; margin: 0;
padding: 0; border: 0" src="Image24x68.png" />
</td>
</tr>
</table>
(PS Use lower case for HTML tags.)
Related
I'm going absolutely crazy. I have a table, which I've simplified down to two adjacent cells with one image each (the images are part of a larger picture, so there can be NO spacing between them). I'm getting some spacing or padding between the table cells, just on the left and right, not the top or bottom. I've tried everything I can find on forums, both inline html as well as inline CSS styling, including:
cellpadding="0"
cellspacing="0"
border="0"
align="left"
display: block;
display: inline-block;
display: inline-table;
border-collapse: collapse;
border:none;
mso-table-lspace:0;
mso-table-rspace:0;
width:403px!important;
padding-left: 0px;
padding-right: 0px;
padding: 0 0 0 0;
margin: 0 0 0 0;
margin-left: 0px;
margin-right: 0px;
No combination of any of these attributes seem to work. Here is my code if you want to take a look (remember, this is a reduced version). It works perfectly fine in my browser, but when I paste it into Outlook I get spacing before, between and after each cell. I have created a magenta background so I can see the spacing clearly.
<table align="left" border="0" cellpadding="0" cellspacing="0" style="
border:none;
border-collapse:collapse;
background-color:magenta;
font-family:Verdana, Geneva, sans-serif;
font-size:12px;
line-height:15px;
color:#4A4A4A;
width:403px!important;
mso-table-lspace:0;
mso-table-rspace:0;
">
<tr>
<td width="211">
<img src="http://s3.amazonaws.com/cms_assets/accounts/3ceae742-b87e-4bdc-a6b3-2bcfc1c5c2d7/site-30100/cms-assets/images/457997.seal-bar-gold.png" width="211"/>
</td>
<td width="192">
<img src="http://s3.amazonaws.com/cms_assets/accounts/3ceae742-b87e-4bdc-a6b3-2bcfc1c5c2d7/site-30100/cms-assets/images/569397.seal-bar-silver.png" width="192"/>
</td>
</tr>
</table>
<img> it is inline tag, by default, therefore we have space under it. You can set font-size: 0px; for parent to prevent empty space, or set display: block; to <img> (my choice).
My solution and article about this behaviour
I want a image to fill up the table cell completely. with css i've set the padding to zero but it does not help. Anybody has any thoughts on this?
Greetz Job
.HTML
<div id="vakjes">
<table id="tabel" border="1">
<tr>
<td><img class="" src="images/jack.png"></td>
<td><img class="" src="images/jack.png"></td>
</tr>
<tr>
<td><img class="" src="images/jack.png"></td>
<td><img class="" src="images/jack.png"></td>
</tr>
</table>
</div>
CSS
table, tr, td {
border: 1px solid #FF7300;
padding: 0px;
vertical-align: bottom;
}
#tabel {
width: 345px;
height: 345px;
}
Here is a screenshot of my table
http://i62.tinypic.com/1584fnb.png
Try setting the height and width of your image:
here's a demo where i've set:
img{
width:100%;
height:100%
}
Alernatively, if you didn't want all images to be set, you could create it as:
.myStyle{
width:100%;
height:100%;
}
and then for your images add the class 'myStyle'.
Is it because you are setting the width and height of the table in CSS #tabel? Maybe the image is slightly smaller than the expected table size. Try it without the #tabel CSS.
Can I place a background image using CSS on a <tr> tag? Will this background image show across all browsers?
HTML:
<table>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
CSS:
table {
width:300px;
height:200px;
border:3px solid blue;
}
tr {
background-image:url(http://dummyimage.com/300x200/f00/000);
display: block;
height: 100%;
}
Live demo: http://jsfiddle.net/simevidas/Jk5BE/5/
Source: http://code.google.com/p/chromium/issues/detail?id=44361
For this to work, you have to set the row height. In my demo, I've set it to 100%, because there is only one row in my table. If you have multiple row, set the height of the row to the height of the background-image.
Yes. And it'll show on all modern browsers.
You can either use the background attribute or do it with CSS.
If you're using it for HTML emails, then it won't show in Outlook 2007 or later, as they use Microsoft Word as the rendering engine. Why? God knows. But they do.
This is tricky. It looks to me like the background image applied in CSS to a tr element gets repeated on each table cell even if you say don't repeat. So if the image isn't a simple gradient with right to left symmetry, you may not get what you expect. Here is an example:
http://jsfiddle.net/Bx998/1/
HTML
<table id="tbl1">
<tr>
<td>one</td><td>two</td><td>three</td><td>four</td><td>five</td><td>size</td>
</tr>
<tr>
<td>one</td><td>two</td><td>three</td><td>four</td><td>five</td><td>size</td>
</tr>
</table>
CSS
#tbl1 tr{
background: transparent url('http://www.google.com/images/logos/ps_logo2.png') no-repeat;
}
#tbl1 tr td{
padding: 5px;
height: 50px;
border: 1px solid #888;
}
#tbl1 tr td:first-child{
padding: 0 0 0 50px;
}
I have a table of data and each cell is a link. I want to allow the user to click anywhere in the table cell and have them follow the link. Sometimes the table cells are more than one line but not always. I use td a {display: block} to get the link to cover most of the cell. When there is one cell in a row that is two lines and the others are only one line the one liners don't fill the entire vertical space of the table row. Here is the sample HTML and you can see it in action here http://www.jsfiddle.net/RXHuE/:
<head>
<style type="text/css">
td {width: 200px}
td a {display: block; height:100%; width:100%;}
td a:hover {background-color: yellow;}
</style>
<title></title>
</head>
<body>
<table>
<tbody>
<tr>
<td>
<a href="http://www.google.com/">Cell 1<br>
second line</a>
</td>
<td>
Cell 2
</td>
<td>
Cell 3
</td>
<td>
Cell 4
</td>
</tr>
</tbody>
</table>
</body>
Set an arbitrarily large negative margin and equal padding on the block element and overflow hidden on the parent.
td {
overflow: hidden;
}
td a {
display: block;
margin: -10em;
padding: 10em;
}
http://jsfiddle.net/RXHuE/213/
You need a small change in your CSS. Making td height:100%; works for IE 8 and FF 3.6, but it doesn't work for Chrome.
td {
width: 200px;
border: solid 1px green;
height: 100%
}
td a {
display: block;
height:100%;
width:100%;
}
But making height to 50px works for Chrome in addition to IE and FF
td {
width: 200px;
border: solid 1px green;
height: 50px
}
td a {
display: block;
height:100%;
width:100%;
}
Edit:
You have given the solution yourself in another post here; which is to use display: inline-block;.
This works when combined with my solution for Chrome, FF3.6, IE8
td {
width: 200px;
border: solid 1px green;
height: 100%}
td a {
display: inline-block;
height:100%;
width:100%;
}
Update
The following code is working for me in IE8, FF3.6 and chrome.
CSS
td {
width: 200px;
border: solid 1px green;
height: 100%;
}
td a {
display: inline-block;
height:100%;
width:100%;
}
td a:hover {
background-color: yellow;
}
HTML
<table>
<tbody>
<tr>
<td>
<a href="http://www.google.com/">Cell 1<br>
second line</a>
</td>
<td>
Cell 2
</td>
<td>
Cell 3
</td>
<td>
Cell 4
</td>
</tr>
</tbody>
</table>
The example lays here
Little late to the party, but there's a nice solution I just discovered.
You can use a combination of relative and absolute positioned elements, along with a pseudo element to get the effect you're looking for. No extra markup needed!
Change the table cell (<td>), to be position: relative;, and create a ::before or ::after pseudo element on the <a> tag, and set it to position: absolute;, and also use top: 0; left: 0; right: 0; bottom: 0;.
Because the pseudo element is attached to the anchor tag, and you're telling it to take up the entire table cell, it will force the anchor tag to be at least that size, whilst not affecting the actual content of the anchor tag itself (thereby retaining its vertically centered alignment).
For example
table {
border-collapse: collapse;
table-layout: fixed;
}
td {
position: relative;
width: 200px;
padding: 0.5em 1em;
border: 2px solid red;
background-color: lime;
}
td a {
/* FONT STYLES HERE */
text-decoration: none;
}
td a::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 0;
}
<table>
<tbody>
<tr>
<td>
<a href="http://www.google.com/">Cell 1<br>
second line</a>
</td>
<td>
Cell 2
</td>
<td>
Cell 3
</td>
<td>
Cell 4
</td>
</tr>
<tr>
<td>
Cell 5
</td>
<td>
<a href="http://www.google.com/">Cell 6<br>
second line</a>
</td>
</tr>
</tbody>
</table>
Hope this helps!
Following hack works [Tested on Chrome / Firefox / Safari]
Have the same padding for td and anchor elements. And for anchor also have margin which is equal to -ve of padding value.
HTML
<table>
<tr>
<td><a>Hello</a></td>
</tr>
</table>
CSS:
td {
background-color: yellow;
padding: 10px;
}
a {
cursor:pointer;
display:block;
padding: 10px;
margin: -10px;
}
Working Fiddle :http://jsfiddle.net/JasYz/
Try display: block:
td a {display: block; height:100%;}
[EDIT] WTF ... I can confirm this doesn't work in FF 4 and Chrome. This works:
td a {display: block; height: 2.5em; border: 1px solid red;}
That suggests that height:100%; isn't defined in a table cell. Maybe this is because the cell gets its size from the content (so the content can't say "tell me your size" because that would lead to a loop). It doesn't even work if you set a height for the cells like so:
td {width: 200px; height: 3em; padding: 0px}
Again the code above will fail. So my suggestion is to use a defined height for the links (you can omit the width; that is 100% by default for block elements).
[EDIT2] I've clicked through a hundred examples at http://www.cssplay.co.uk/menus/ but none of them mix single line and multi-line cells. Seems like you hit a blind spot.
I will post the same answer here, as I did on my own question.
Inspired by Jannis M's answer, I did the following:
$(document).ready(function(){
$('table tr').each(function(){
var $row = $(this);
var height = $row.height();
$row.find('a').css('height', height).append(' ');
});
});
I added a since empty links (not containing text nodes) can not be styled(?).
See my updated fiddle.
Only problem here is that using display: block forces the browser to ignore the vertical align: center...
oops.
I jury rigged it to look right for one cell with height:60 and a font that occupied 20 pixels by adding a br... Then I realized that I had some items with 2-line text. Dang.
I ended up using the javascript. The javascript doesn't give the nice mousey pointy clicker thing, but the line of text does, so it will actually trigger a visual response, just not where I want it to... Then the Javascript will catch all the clicks that 'miss' the actual href.
Maybe not the most elegant solution, but it works well enough for now.
Now if I could only figure out how to do this the right way....
Any ideas on how to add the mouse icon change to a hand for the area covered by the onclick? Right now, the click to page works, but the icon only changes when it hits the href which only affects the text.
Why don't you just get rid of the <a> altogheter and add an onClick to the <td> directly?
<head>
<style type="text/css">
td {
text-align:center;
}
td:hover {
cursor:pointer;
color:#F00;
}
</style>
<title></title>
</head>
<body>
<table>
<tbody>
<tr>
<td onclick="location.href='http://www.google.com/';">Cell 1<br />second line</td>
<td onclick="location.href='http://www.google.com/';">Cell 2</a></td>
<td onclick="location.href='http://www.google.com/';">Cell 3</td>
<td onclick="location.href='www.google.com';">Cell 4</td>
</tr>
</tbody>
</table>
This way you cut out the middle man.
PS: i know this was asked and answered many years ago, but none of the answers above solved the problem in my case. Hope this helps someone.
For me the only solution is to replace <table> <tr> with <div>s and style them using display:table and display:table-row accordingly.
Then you can replace <td> with just <a> and style it with display:table-cell.
Work perfectly even on varying heights of <td> contents.
so original html without anchors:
<table>
<tr>
<td>content1<br>another_line</td>
<td>content2</td>
</tr>
</table>
now becomes:
a:hover
{
background-color:#ccc;
}
<div style="display:table; width:100%">
<div style="display:table-row">
content1<br>another_line
content2
</div>
</div>
I have used this solution: works better then the rest in my case.
CSS:
.blocktd {width: 100%; height: 100%; padding: 0px; overflow: hidden}
a.blocktd {margin: 0em; padding: 50px 20px 50px 20px; display: block;}
a.blocktd:hover {border: 4px solid #70AEE8; border-radius: 10px; padding: 46px 16px 46px 16px; transition: 0.2s;}
And in HTML: ...
I have the same problem as Possible to fill a table cell with a bg color?.
The problem is that i'm using a sitemap and not sure how to set the css for the td tags.
(This works fine in firefox and IE8, but not IE7)
I'm using the following CSS:
.subMenu
{
z-index: 100;
min-width: 118px;
border: solid 1px #545454;
text-align: center;
}
.subMenuItem
{
width: 100%;
min-width: 118px;
padding: 5px;
border-bottom: solid 1px #545454;
background-color: #4D97CB;
color: #DDDDDD;
text-align: center;
font-weight: bold;
font-size: 11px;
}
which gives the folloing HTML:
<div id="ctl00_mnuNavigationn1Items" class="ctl00_mnuNavigation_0 subMenu ctl00_mnuNavigation_7">
<table border="0" cellpadding="0" cellspacing="0">
<tr onmouseover="Menu_HoverDynamic(this)" onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(this)" id="ctl00_mnuNavigationn3">
<td>
<table class="subMenuItem ctl00_mnuNavigation_6" cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td style="white-space:nowrap;width:100%;">
<a class="ctl00_mnuNavigation_1 subMenuItem ctl00_mnuNavigation_5" href="/Asidua.BPM.Web.WebApplication/Expenses/Default.aspx" style="border-style:none;font-size:1em;">Click here</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
You must apply the CSS style to the td element instead of the a element. A span-like element (like a link, or em, strong, or span) does not support setting the background by default.
[EDIT] If you don't generate this code yourself, then you have these options:
Get the source of the HTML/CSS generator and modify it to add the necessary CSS attributes to the td elements
If this is on the server, check whether you can add a filter to the output of your app. This filter can then add the necessary CSS.
If everything else fails, you can use JavaScript on the client to navigate the DOM and add the attributes in onload.
Another solution could be to set the a element to display:block in the CSS. That would make it fill the entire area of the parent element.
Also, if it's a background-color, you may need to set the height and width of the a element to match the parent's.