Add margin-top to image inside html table - css

I have the following html structure where I am displaying some details inside an html table.
<table cellspacing="15">
<tr>
<td>
<img src="Images/user1.png" />
<label>
User</label>
</td>
<td>
John
</td>
</tr>
<tr>
<td>
<img src="Images/version1.png" />
<label>
Old ID</label>
</td>
<td>
345345
</td>
</tr>
<tr>
<td>
<img src="Images/version3.png" />
<label>
New ID</label>
</td>
<td>
367976
</td>
</tr>
</table>
I want to add margin-top to the image so that the image will be shifted downward by some 3 or 4 pixel but the CSS is not having any effect. Please help.
Also I found that cellspacing is not a valid attribute in HTML5. Any alternate property to achieve the same effect.?

Adding a negative bottom margin to your image
(I generally avoid using negative margins as much as possible, but in this case it's a quick fix and won't effect the text next to it) :
td img {
margin-bottom:-4px;
}

Its working for me.. Anyhow you can try like this LINK, if you want to place img and text in same line
CSS:
td,td img {
line-height:28px;
vertical-align:middle;
}

Alternative for cellspacing is
table {
border-collapse: separate;
border-spacing: 15px;
}
Aligning image:
You can use vertical-align:middle.
See DEMO here.

Margin-top should work correctly, but it probably moves down tha label too.
Possible solution is to use positioning, so:
img {position: relative; top: 4px;}

you can do this.
Just remove <lable> tag & add valign="top" in <td>
<table cellspacing="15">
<tr>
<td valign="top">
<img src="Images/user1.png" />
User
</td>
<td>
John
</td>
</tr>
<tr>
<td valign="top">
<img src="Images/version1.png" />
Old ID
</td>
<td>
345345
</td>
</tr>
<tr>
<td valign="top">
<img src="Images/version3.png" />
New ID
</td>
<td>
367976
</td>
</tr>
</table>

Related

unwanted empty cells on rows inside table with inline-block display

I have 2 tables that I want to display side by side. So I set the display style property as display: inline-block. The problem is, on both tables, the columns are not taking the full width of the table. There is/are unseen cell(s). Interestingly this does not happen if I remove the DOCTYPE HTML line from the top of the page. The red marked area in the screenshot is my concern.
I have tried setting the font size to 0 of the "tr" and then add my desired font size to the "td". Also tried adding negative right padding/margin, but could not get it to work. Please suggest!
Empty cells at the right of table:
<table id="attn" style="display: inline-block; border: 1px solid green">
<tr>
<td >
Attn: Mr. HM. Mustafizur Rahaman
<footer>Vice President</footer>
</td>
</tr>
<tr>
<td>
Attn: Mr. HM. Mustafizur Rahaman
<footer>Vice President</footer>
</td>
</tr>
</table>
<table id="register" style="display: inline-block; border: 1px solid blue">
<caption id="cap_tab_1">Invoice<caption>
<thead>
<tr>
<td>No.</td>
<td colspan="2">SSL/16/02011</td>
</tr>
</thead>
<tbody>
<tr>
<td style="width: 25%">
Day
</td>
<td style="width: 40%">
Month
</td>
<td style="width: 35%">
Year
</td>
</tr>
</tbody>
</table>
To fix the problem you can use display: inline-table instead of display: inline-block.
Explanation: <table> by default receives display property display: table. This is how it arranges rows/columns and determines how it'll be displayed on the page.
The moment you change that to display: inline-block, <table> looses its property to be a proper table according to CSS. So <tr> <td> etc. don't work as expected, as they shouldn't do inside a display: inline-block element. That's why display: inline-table solves the issue.
What about float instead of inline. Worked for me in IE, Chrome and Firefox.
<!DOCTYPE html>
<table id="attn" style="float:left; border: 1px solid green">
<tr>
<td >
Attn: Mr. HM. Mustafizur Rahaman
<footer>Vice President</footer>
</td>
</tr>
<tr>
<td>
Attn: Mr. HM. Mustafizur Rahaman
<footer>Vice President</footer>
</td>
</tr>
</table>
<table id="register" style="float:left; border: 1px solid blue">
<caption id="cap_tab_1">Invoice<caption>
<thead>
<tr>
<td>No.</td>
<td colspan="2">SSL/16/02011</td>
</tr>
</thead>
<tbody>
<tr>
<td style="width: 25%">
Day
</td>
<td style="width: 40%">
Month
</td>
<td style="width: 35%">
Year
</td>
</tr>
</tbody>
</table>

New HTML email rules: How to center without margin: auto?

As per new email rules (thanks Microsoft and Google) all margins are stripped from your HTML. So using margin: 0 auto is out for a solution.
The structure is:
<table>
<tr>
<td align="center">
Button
</td>
</tr>
Now I could add yet another table inside the td but it is already like the 2nd nested table and I'm hoping there is a different solution other then nesting another table. The align="center" doesn't work.
Try this code, I'm using this code to send html email and it works fine for gmail, outlook
<table style="width: 100%;">
<tr>
<td style="text-align: center;">
Button
</td>
</tr>
</table>
Also, you can check allow css property for html email here: https://www.campaignmonitor.com/css/
Cuz CSS in email is dangerous... buh BAM. ;D
<table width="100%">
<tr>
<td align="center">
Button
</td>
</tr>
</table>
Old, school, but why not just use blank td's on each side? Ah, it's the 90's again!
<table>
<tr>
<td width="25%"></td>
<td width="50%">
Button
</td>
<td width="25%"></td>
</tr>
</table>

What's an alternative to margin in HTML Email?

Hotmail does not support margin in HTML emails. Is there an alternative?
I would suggest use tables and play with the width of columns. HTML emails are sometimes better with tables. Also, you can take a look at an email you have in your inbox that does what you want and inspect source code.
As this answer seems a little vague I would also like to point to a very complete answer which covers in more details html emails.
Note:
When it comes to email HTML, note that all best practices from web development goes out the window.
Here is an example using tables,
<table border="0" cellspacing="0" cellpadding="0" align="left" style="width:600px;margin:0 auto;background:#FFF;">
<tr>
<td colspan="5" style="padding:15px 0;">
<h1 style="color:#000;font-size:24px;padding:0 15px;margin:0;">Header</h1>
</td>
</tr>
<tr>
<td style="width:15px;"> </td>
<td style="width:375px;">
Left Column Content
</td>
<td style="width:15px;"> </td>
<td style="width:180px;padding:0 0 0 0;">
Sidebar Content
</td>
<td style="width:15px;"> </td>
</tr>
<tr>
<td colspan="5" style="padding:15px 0;">
<p style="color:#666;font-size:12px;padding:0 15px;margin:0;">Footer</p>
</td>
</tr>
</table>
Live here http://jsfiddle.net/Wr76m/
I was able to get away with transparent horizontal bars, using padding to modify the height. For example:
<hr style="border: transparent; padding: 1px;">

How to prevent to pass css attributes to the inner elements?

I'm creating 3 tables.
<table id="first">
<tr>
<td>
1. CAPTION
</td>
</tr>
<tr>
<td>
<table id="second">
<tr>
<td>
2. CAPTION
</td>
</tr>
<tr>
<td>
<img src="" width="100" height="100" />
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table id="third">
<tr>
<td>
3. CAPTION
</td>
</tr>
<tr>
<td>
<img src="" width="100" height="100" />
</td>
</tr>
</table>
</td>
</tr>
</table>
I want to add 10px padding (padding-top:10px) for the main table td elements.
#first tr td
{
padding-top: 10px;
padding-left: 0pt;
}
But this padding is adding to inner tables td elements.
How can i prevent to pass padding-top setting to the inner tables?
Use #first > tr > td.
It means "a td that is a direct child of a tr that is a direct child of an element with ID 'first'".
There are 2 solutions.
One (the hard way),
Specify padding values to the inner child elements so that it over-rides the parent style specifications.
Two (the above method),
Use '#first > tr > td'
but, it leads to cross browser comparability issues.
ie-6 does have a large share of the browser market.

Table problems with WebKit

I'm having trouble getting this code to show up correctly in WebKit browsers(chrome/safari). It looks fine in IE6, IE7, and FireFox.
<table width="100%">
<tr>
<td rowspan="2" style="vertical-align:middle;">
<img src="/i/thumbnails/acotgc25sm.gif" alt="Gift Certificate"/>
</td>
<td style="vertical-align:middle;">
Wishlist
</td>
<td style="vertical-align:middle;">
Link to Us
</td>
<td style="vertical-align:middle;">
Affiliate Program
</td>
<td style="vertical-align:middle;">
Privacy
</td>
<td style="vertical-align:middle;">
Guarantee
</td>
<td rowspan="2" style="width:160px;">
<script src="http://www.gmodules.com/ig/ifr?url=http://www.google.com/ig/modules/translatemypage.xml&up_source_language=en&w=160&h=60&title=&border=&output=js"></script>
</td>
</tr>
<tr>
<td style="vertical-align:middle;">
About Us
</td>
<td style="vertical-align:middle;">
Shipping
</td>
<td style="vertical-align:middle;">
Why Buy From Us
</td>
<td style="vertical-align:middle;">
Contact Us
</td>
<td style="vertical-align:middle;">
Help
</td>
</tr>
</table>
The problem is that WebKit makes the top row very small and the bottom row fill in the rest of the space instead of each row having an equal height.
Anyone have any ideas of how to make it show up how I want it to in WebKit based browsers?
I have a few recommendations for you but I can't answer your question completely because WebKit seems to render your source fine when I try it.
First, maybe you can change width="100%" to style="width:100%;" Perhaps combined with the other markup, it's putting the browser in quirks mode.
Second, make sure you have the correct doctype on and your code validates or AT LEAST comes close. The doctype I used when copying & pasting your code was XHTML Strict.
Otherwise, please post the source code of the whole page or just link to a live demo. Even a screenshot would help.
I could help more with a live example to test on but you could try adding this to your tr tags.
<tr style="height: 50%;">
Assuming you only need two rows this will bring them to equal height.
a proper example to ensure it is not showing correctly in webkit is the following:
<table width="200" border="1">
<tbody>
<tr>
<td rowspan="2" width="15">
this is a very high rowspan 2 row that will thus be split over 2 rows, it prevents the second row from being formatted in height
</td>
<td>
this should be big instead
</td>
</tr>
<tr height="20">
<td height="20">
this row fails to size to 20 height on webkit
</td>
</tr>
</tbody>
</table>
as you can see the left part is rendered fine, but the right part should be different, as in the top row should populate the left over space and the bottom row is set to 20 height (as you can see neither the tr height nor the td height is taken into consideration by webkit). this renders fine in all other browsers
EDIT:
after playing around and tinkering about my problem, I came to the below solution.
completely relying on jquery reading the height attribute property from the row you want to change:
<html>
<head>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#pipnorowspan").height(function(){
return $("#rcarowspan").height() - $("#piplowerrow").attr('height') + 2;
});
});
</script>
</head>
<body>
<table width="200" style="border-collapse:collapse; border:1px solid #000;" id="ertable">
<tbody>
<tr style="border:1px solid #000;">
<td rowspan="3" width="15" id="rcarowspan" style="border:1px solid #000;">
this is a very high rowspan 2 row that will thus be split over 2 rows, it prevents the second row from being formatted in height
</td>
<td id="pipnorowspan" style="border:1px solid #000;">
this should be big instead
</td>
</tr>
<tr height="20" id="piplowerrow" style="border:1px solid #000;">
<td height="20" style="border:1px solid #000;">
this row fails to size to 20 height on webkit
</td>
</tr>
</tbody>
</table>
</body>
</html>

Resources