Notice the div is set to display: flex. It has some tables inside it. I can't change the height of the div to take 85% of the page without the tables stretching out evenly inside the pink div.
I'm trying to spread the tables' contents evenly inside the div. I can't find the right rule-set to make it work. I don't know where to change the content class or the .foodiv class.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
div {
display: flex;
}
.foodiv {
background-color: lightcoral;
display: flex;
flex-direction: column;
justify-content: center;
flex-wrap: wrap;
flex-grow: 4;
flex-basis: auto;
align-content: stretch;
align-self: auto;
width: 100%;
height: 85%;
margin: 10px;
}
.content {
padding: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="food.css">
<title>Document</title>
</head>
<body>
<div class="foodiv">
<center>
<table id="t" style="color:white">
<tr>
<td class="content"><a style="text-decoration:none;" href="pizza.html"><button>Pizza</button></a></td>
<td class="content"><a style="text-decoration:none;" href="pasta.html"><button>Pasta</button></a></td>
<td class="content"><a style="text-decoration:none;" href="burger.html"><button>Burger</button></a></td>
</tr>
<tr>
<td class="content"><a style="text-decoration:none;" href="noodles.html"><button>Noodles</button></a></td>
<td class="content"><a style="text-decoration:none;" href="hs.html"><button>Chinese Hot and Sour
Soup</button></a></td>
<td class="content"><a style="text-decoration:none;" href="cgs.html"><button>Carrot Ginger Soup</button></a>
</td>
</tr>
<tr>
<td class="content"><a style="text-decoration:none;" href="breadroll.html"><button>Bread Roll</button></a>
</td>
<td class="content"><a style="text-decoration:none;" href="ps.html"><button>Paneer Sandwich</button></a>
</td>
<td class="content"><a style="text-decoration:none;" href="vegetablemaggie.html"><button>Vegetable
Maggie</button></a></td>
</tr>
<tr>
<td class="content"><a style="text-decoration:none;" href="frenchtoast.html"><button>French
Toast</button></a></td>
<td class="content"><a style="text-decoration:none;" href="tacos.html"><button>Tacos</button></a></td>
<td class="content"><a style="text-decoration:none;" href="momos.html"><button>Momos</button></a></td>
</tr>
<tr>
<td class="content"><a style="text-decoration:none;" href="pt.html"><button>Paneer Tikka</button></a></td>
<td class="content"><a style="text-decoration:none;" href="ccb.html"><button>Crispy Chilly
Babycorn</button></a></td>
<td class="content"><a style="text-decoration:none;" href="ac.html"><button>American Chopsuey</button></a>
</td>
</tr>
<tr>
<td class="content"><a style="text-decoration:none;" href="q.html"><button>Quesadilla</button></a></td>
<td class="content"><a style="text-decoration:none;" href="chococake.html"><button>Chocolate
Cake</button></a></td>
<td class="content"><a style="text-decoration:none;" href="lbp.html"><button>Lemon Bar Peeps</button></a>
</td>
</tr>
<tr>
<td class="content"><a style="text-decoration:none;" href="sbpie.html"><button>Strawberry Pie</button></a>
</td>
<td class="content"><a style="text-decoration:none;" href="tiramisu.html"><button>Tiramisu</button></a></td>
<td class="content"><a style="text-decoration:none;" href="pc.html"><button>Panna Cotta</button></a></td>
</tr>
<tr>
<td class="content"><a style="text-decoration:none;" href="bmc.html"><button>Blueberry Muffin
Cake</button></a></td>
<td class="content"><a style="text-decoration:none;" href="cheesecake.html"><button>Cheesecake</button></a>
</td>
<td class="content"><a style="text-decoration:none;" href="cm.html"><button>Chocolate Milkshake</button></a>
</td>
</tr>
</table>
</center>
</div>
</body>
</html>
The only child of your flex container .foodiv is the <center> tag - one flex child can stretch, but the element in there (the "grandchildren") won't be affected by that flex setting. Erase the <center> tag and center the tables with another method.
there was some problems with you code. replace you HTML & CSS with this code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="food.css" />
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.foodiv {
background-color: lightcoral;
height: 85vh;
margin: 10px;
padding: 30px;
display: flex;
flex-direction: column;
align-items: stretch;
}
#t {
display: flex;
}
tbody {
display: flex;
flex-wrap: wrap;
}
button {
padding: 5px 15px;
}
tr {
margin-bottom: 10px;
}
</style>
</head>
<body>
<div class="foodiv">
<table id="t" style="color: white;">
<tbody>
<tr>
<td class="content">
<a style="text-decoration: none;" href="pizza.html"
><button>Pizza</button></a
>
</td>
<td class="content">
<a style="text-decoration: none;" href="pasta.html"
><button>Pasta</button></a
>
</td>
<td class="content">
<a style="text-decoration: none;" href="burger.html"
><button>Burger</button></a
>
</td>
</tr>
<tr>
<td class="content">
<a style="text-decoration: none;" href="noodles.html"
><button>Noodles</button></a
>
</td>
<td class="content">
<a style="text-decoration: none;" href="hs.html"
><button>Chinese Hot and Sour Soup</button></a
>
</td>
<td class="content">
<a style="text-decoration: none;" href="cgs.html"
><button>Carrot Ginger Soup</button></a
>
</td>
</tr>
<tr>
<td class="content">
<a style="text-decoration: none;" href="breadroll.html"
><button>Bread Roll</button></a
>
</td>
<td class="content">
<a style="text-decoration: none;" href="ps.html"
><button>Paneer Sandwich</button></a
>
</td>
<td class="content">
<a style="text-decoration: none;" href="vegetablemaggie.html"
><button>Vegetable Maggie</button></a
>
</td>
</tr>
<tr>
<td class="content">
<a style="text-decoration: none;" href="frenchtoast.html"
><button>French Toast</button></a
>
</td>
<td class="content">
<a style="text-decoration: none;" href="tacos.html"
><button>Tacos</button></a
>
</td>
<td class="content">
<a style="text-decoration: none;" href="momos.html"
><button>Momos</button></a
>
</td>
</tr>
<tr>
<td class="content">
<a style="text-decoration: none;" href="pt.html"
><button>Paneer Tikka</button></a
>
</td>
<td class="content">
<a style="text-decoration: none;" href="ccb.html"
><button>Crispy Chilly Babycorn</button></a
>
</td>
<td class="content">
<a style="text-decoration: none;" href="ac.html"
><button>American Chopsuey</button></a
>
</td>
</tr>
<tr>
<td class="content">
<a style="text-decoration: none;" href="q.html"
><button>Quesadilla</button></a
>
</td>
<td class="content">
<a style="text-decoration: none;" href="chococake.html"
><button>Chocolate Cake</button></a
>
</td>
<td class="content">
<a style="text-decoration: none;" href="lbp.html"
><button>Lemon Bar Peeps</button></a
>
</td>
</tr>
<tr>
<td class="content">
<a style="text-decoration: none;" href="sbpie.html"
><button>Strawberry Pie</button></a
>
</td>
<td class="content">
<a style="text-decoration: none;" href="tiramisu.html"
><button>Tiramisu</button></a
>
</td>
<td class="content">
<a style="text-decoration: none;" href="pc.html"
><button>Panna Cotta</button></a
>
</td>
</tr>
<tr>
<td class="content">
<a style="text-decoration: none;" href="bmc.html"
><button>Blueberry Muffin Cake</button></a
>
</td>
<td class="content">
<a style="text-decoration: none;" href="cheesecake.html"
><button>Cheesecake</button></a
>
</td>
<td class="content">
<a style="text-decoration: none;" href="cm.html"
><button>Chocolate Milkshake</button></a
>
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Related
I have been asked to create a HTML email signature, all looks fine in Google Chrome. But when viewed in Outlook, everything moves around.
Would anyone be able to shine some light on where I might be going wrong?
Thanks.
<table aria-hidden="false" cellspacing="0px" cellpadding="0px" border="0px" width="350px" style="margin: 0px; max-width: 100%;">
<tr>
<td rowspan="2" align="left" style="vertical-align:center">
<a href="[https://www.bbc.com](https://www.bbc.com)">
<img src="https://cdn.shopify.com/s/files/1/0111/7877/0495/files/Tom_Avatar.png?v=1602754752" width="200px" style="padding-top: 0px; margin-left: 0px;" />
</a>
</td>
<td colspan="2" align="center" style="vertical-align:bottom">
<a href="[https://www.bbc.com](https://www.bbc.com)">
<img src="https://cdn.shopify.com/s/files/1/0111/7877/0495/files/Lixi_Logo_6fa83943-d431-41b8-acd1-4e1180dc1aa1.png?v=1602754752" width="125px" style="padding-top: 0px; margin-left: 0px;" />
</a>
</td>
</tr>
<tr>
<td align="center">
<a href="[https://www.facebook.com/](https://www.facebook.com/)">
<img src="https://cdn.shopify.com/s/files/1/0111/7877/0495/files/Face.png?v=1602680973" width="50px" style="padding-left: 15px;" />
</a>
</td>
<td align="center">
<a href="[https://www.instagram.com/](https://www.instagram.com/)">
<img src="https://cdn.shopify.com/s/files/1/0111/7877/0495/files/InstaG.png?v=1602680973" width="50px" style="padding-right: 15px;" />
</a>
</td>
</tr>
<td valign="top">
<p style="font-size: 14px; font-family: Helvetica, sans-serif; color: #464646; margin: 0px; padding-top: 30px; padding-left: 30px;">
<strong>This Guy</strong><br />
<strong>Job title</strong><br /><br />
<strong>e: </strong>thisguy#email.com<br />
<strong>w: </strong>www.bbc.com<br />
</p>
</td>
</table>
The problem is the incomplete structure of the HTML table in your code. To make your table complete, you need to wrap a tr around your last td to create a third row and apply colspan="3"to that last td to make it span the whole row.
Some browsers probably tolerate the missing elements, trying to fix the given code automatically, but others won't, which is what you experienced.
<table aria-hidden="false" cellspacing="0px" cellpadding="0px" border="0px" width="350px" style="margin: 0px; max-width: 100%;">
<tr>
<td rowspan="2" align="left" style="vertical-align:center">
<a href="[https://www.bbc.com](https://www.bbc.com)">
<img src="https://cdn.shopify.com/s/files/1/0111/7877/0495/files/Tom_Avatar.png?v=1602754752" width="200px" style="padding-top: 0px; margin-left: 0px;" />
</a>
</td>
<td colspan="2" align="center" style="vertical-align:bottom">
<a href="[https://www.bbc.com](https://www.bbc.com)">
<img src="https://cdn.shopify.com/s/files/1/0111/7877/0495/files/Lixi_Logo_6fa83943-d431-41b8-acd1-4e1180dc1aa1.png?v=1602754752" width="125px" style="padding-top: 0px; margin-left: 0px;" />
</a>
</td>
</tr>
<tr>
<td align="center">
<a href="[https://www.facebook.com/](https://www.facebook.com/)">
<img src="https://cdn.shopify.com/s/files/1/0111/7877/0495/files/Face.png?v=1602680973" width="50px" style="padding-left: 15px;" />
</a>
</td>
<td align="center">
<a href="[https://www.instagram.com/](https://www.instagram.com/)">
<img src="https://cdn.shopify.com/s/files/1/0111/7877/0495/files/InstaG.png?v=1602680973" width="50px" style="padding-right: 15px;" />
</a>
</td>
</tr>
<tr>
<td valign="top" colspan="3">
<p style="font-size: 14px; font-family: Helvetica, sans-serif; color: #464646; margin: 0px; padding-top: 30px; padding-left: 30px;">
<strong>This Guy</strong><br />
<strong>Job title</strong><br /><br />
<strong>e: </strong>thisguy#email.com<br />
<strong>w: </strong>www.bbc.com<br />
</p>
</td>
</tr>
</table>
Your document was not valid
remove deprecated attributes and add the correct CSS in the style tags
last cell was not in a row and was too narrow (colspan)
missing ALT tags on images (not super important)
hyperlinks were not correct (BBCode or markdown)
No need to make all lines "strong" in a set of lines.
<!doctype html>
<html lang="en">
<head>
<title>Title></title>
</head>
<body>
<table aria-hidden="false" style="width:350px; padding: 0; border:0; margin: 0px; max-width: 100%;">
<tr>
<td rowspan="2" style="text-align:left; vertical-align:center">
<a href="https://www.bbc.com/">
<img alt="avatar" src="https://cdn.shopify.com/s/files/1/0111/7877/0495/files/Tom_Avatar.png?v=1602754752" style="width:200px;padding-top: 0px; margin-left: 0px;" />
</a>
</td>
<td colspan="2" style="text-align:center; vertical-align:bottom">
<a href="https://www.bbc.com/">
<img alt="logo" src="https://cdn.shopify.com/s/files/1/0111/7877/0495/files/Lixi_Logo_6fa83943-d431-41b8-acd1-4e1180dc1aa1.png?v=1602754752" style="width:125px; padding-top: 0px; margin-left: 0px;" />
</a>
</td>
</tr>
<tr>
<td style="text-align:center">
<a href="https://www.facebook.com/">
<img alt="facebook" src="https://cdn.shopify.com/s/files/1/0111/7877/0495/files/Face.png?v=1602680973" style="width:50px;padding-left: 15px;" />
</a>
</td>
<td style="text-align:center">
<a href="https://www.instagram.com/">
<img alt="instagram" src="https://cdn.shopify.com/s/files/1/0111/7877/0495/files/InstaG.png?v=1602680973" style="width:50px;padding-right: 15px;" />
</a>
</td>
</tr>
<tr>
<td colspan="3" style="vertical-align:top">
<p style="font-size: 14px; font-family: Helvetica, sans-serif; color: #464646; margin: 0px; padding-top: 30px; padding-left: 30px;">
<strong>This Guy<br />
Job title<br /><br />
e: </strong>thisguy#email.com<br />
<strong>w: </strong>www.bbc.com<br />
</p>
</td>
</tr>
</table>
</body>
</html>
I have a table on my site. When I add position:fixed to the table, the cells of the table suddenly stretch across the entire height of the page, even though they have a set height.
as you can see in the code below, each tr has a set height value, but it is ignored when I add position:fixed to the table, and instead, the cells get the height of the entire page, and prevent me from accessing the content of the website.
any help on how to fix this, while still keeping the position:fixed attribute, would be appreciated.
.center {
margin:0 auto;
}
a{
text-decoration:none;
color:red;
}
table{
text-align:center;
width:30%;
left:25%;
/*font-size:larger;*/
}
body{
background-color:midnightblue;
color:snow;
white-space:nowrap;
}
.Error{
color:red;
}
.divSargel{
width:initial;
background-color:snow;
border: solid;
border-color: #000080;
float: left;
margin-left: 0.3%;
color: red;
font-size:x-large;
font-family:monospace;
border-radius: 20px;
text-align: center;
width:100%;
}
.divSargel:hover {
background-color: blue;
transition: linear 0.5s;
}
<table id="navbar" border="1" style="right:0px;left:0px;border-style: solid;border-color:black;margin:0 auto;max-width:999999px; width:100%; height: 100%; background-image: none;">
<tr>
<td colspan="5" style="background-image: url('/Pics/videogames2.jpg'); height:100px; background-repeat: no-repeat; background-size:100% 100%">
</td>
</tr>
<tr style="height:50px">
<td style="border-color: #000000; background-color: #000000; color: #FFFFFF;">
<asp:TextBox ID="txtClock" style="text-align:center" runat="server" width="90%" ReadOnly="true"></asp:TextBox>
</td>
<td style="border-color: #000000; color: #FFFFFF; background-color: #000000">
<asp:TextBox ID="txtPeopleCount" style="text-align:center" runat="server" Width="90%" ReadOnly="true"></asp:TextBox>
</td>
<td style="width:50%;border:medium solid #000080; background-color: #000000;">
<table border="1" style="border-color:snow;width:100%">
<%if (Session["UserName"] == null)
{ %>
<tr>
<td class="textCenter">
<a href="Main.aspx" class="divSargel">
Main
</a>
</td>
<td class="textCenter">
<a href="ShopProducts.aspx" class="divSargel">
Shop
</a>
</td>
</tr>
<%} %>
<%if (Session["UserName"] != null && Session["UserAdmin"] == null)
{ %>
<tr>
<td class="textCenter">
<a href="Main.aspx" class="divSargel">
Main
</a>
</td>
<td class="textCenter" >
<a href="ShowUsers.aspx" class="divSargel">
Show Users
</a>
</td>
<td class="textCenter">
<a href="ShopProducts.aspx" class="divSargel">
Shop
</a>
</td>
<td class="textCenter">
<a href="ShoppingCart.aspx" class="divSargel">
View Cart
</a>
</td>
</tr>
<tr>
<td class="textCenter">
<a href="ShowBank.aspx" class="divSargel">
View Bank
</a>
</td>
<td class="textCenter">
<a href="ShowCreditCards.aspx" class="divSargel">
View credit cards
</a>
</td>
<td class="textCenter">
<a href="ShowOrders.aspx" class="divSargel">
View Orders
</a>
</td>
<td class="textCenter">
<a href="ContactUs.aspx" class="divSargel">
Contact us
</a>
</td>
</tr>
<%} %>
<%if (Session["UserAdmin"] != null)
{ %>
<tr>
<td class="textCenter">
<a href="Main.aspx" class="divSargel">
Main
</a>
</td>
<td class="textCenter" >
<a href="ShowUsers.aspx" class="divSargel">
Show Users
</a>
</td>
<td class="textCenter">
<a href="ShopProducts.aspx" class="divSargel">
Shop
</a>
</td>
<td class="textCenter">
<a href="ShoppingCart.aspx" class="divSargel">
View Cart
</a>
</td>
</tr>
<tr>
<td class="textCenter">
<a href="ShowBank.aspx" class="divSargel">
View Bank
</a>
</td>
<td class="textCenter">
<a href="ShowCreditCards.aspx" class="divSargel">
View credit cards
</a>
</td>
<td class="textCenter">
<a href="ShowOrders.aspx" class="divSargel">
View Orders
</a>
</td>
<td class="textCenter">
<a href="AdminPage.aspx" class="divSargel">
Admin actions
</a>
</td>
</tr>
<%} %></table>
</td>
<%if (Session["UserName"] == null)
{ %>
Try setting the height of the table as desired and mark it as important like
table{
height : 150px !important;
}
Managed to find the problem. for some reason I had a height:100% on the table itself, and so even though the rows had specified heights, upon adding position:fixed the table stretched across the screen.
I am trying to put the social media icones of my website in the page center.
But I couldn't.
This is my code:
https://jsfiddle.net/2ahgL130/1/
CSS:
.table1{
margin:0;
padding:0;
min-width:100%
}
.table2{
font-family:'Open Sans','Helvetica Neue',Helvetica,Arial,sans-serif;
font-size:1em;
line-height:1.5;
max-width:600px;
padding:0 20px 0 20px;
}
.table3{
padding:20px;
}
.table4{
padding-bottom:20px;
padding-top: 0px;
align-items: center;
}
.table5{
padding-bottom:20px;
}
So please how can I correct my code to get the elements in the page center
You have to update your entire code and use below snippet using flexbox.
html,
body {
height: 100%;
padding: 0;
margin: 0;
}
.container {
width: 100%;
height: 100%;
background-color: #ccc;
display: flex;
justify-content: center;
align-items: center;
}
<div class="container">
<a href="" target="_blank" data-saferedirecturl="">
<img src="https://dummyimage.com/32x32/000/fff" width="32" height="32">
</a>
<a href="" target="_blank" data-saferedirecturl="">
<img src="https://dummyimage.com/32x32/000/fff" alt="" width="32" height="32">
</a>
</div>
You can use this code
body {
margin: 0;
padding: 0;
}
.table1 {
margin: 0;
padding: 0;
min-width: 100%
}
.table2 {
font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 1em;
line-height: 1.5;
max-width: 600px;
padding: 0 20px 0 20px;
margin: 0 auto;
}
.table3 {
padding: 20px;
}
.table4 {
padding-bottom: 20px;
padding-top: 0px;
align-items: center;
}
.table5 {
padding-bottom: 20px;
}
table {
border-collapse: collapse;
margin: 0 auto;
}
<div>
<div lang="en" dir="ltr" class="table1">
<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%" class="table2">
<tbody>
<tr>
<td class="table3">
<table role="presentation" width="100%" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td class="table4">
<table role="presentation" border="0" cellpadding="0" cellspacing="0" width="210">
<tbody>
<tr style="text-align: center;">
<td height="32" width="42">
<a href="" target="_blank" data-saferedirecturl="">
<img src="https://www.w3schools.com/images/picture.jpg" width="32" height="32">
</a>
</td>
<td height="32" width="42">
<a href="" target="_blank" data-saferedirecturl="">
<img src="https://www.w3schools.com/images/picture.jpg" width="32" height="32">
</a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td class="table5">
<a href="" target="_blank" data-saferedirecturl="">
<img src="" alt="" width="136" height="50">
</a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
</div>
Add Table align:center
<div>
<div lang="en" class="table1">
<table align="center" role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%" class="table2">
<tbody>
<tr>
<td class="table3">
<table role="presentation" width="100%" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td class="table4">
<table align="center" role="presentation" border="0" cellpadding="0" cellspacing="0" width="210">
<tbody>
<tr>
<td height="32" width="42">
<a href="" target="_blank" data-saferedirecturl="">
<img src="" width="32" height="32" >
</a>
</td>
<td height="32" width="42">
<a href="" target="_blank" data-saferedirecturl="">
<img src="" width="32" height="32" >
</a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td class="table5" style="text-align:center">
<a href="" target="_blank" data-saferedirecturl="">
<img src="" alt="" width="136" height="50">
</a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
</div>
https://jsfiddle.net/lalji1051/f2gs7erq/5/
I'm a really really new beginner. I have been tasked with making an email signature by my boss and I cannot figure out how to produce it. I'm using dreamweaver and have written really basic HTML emails that sent successfully, so my code isn't the absolute worst.
I'm trying to recreate this (made in word):
I want the four lines to the right of the logo to be left-aligned, and the bottom two lines to be centered. I don't have any alignment defined in table {} or tbody tr td {}.
Here is how it looks in the chrome preview:
I will comment to show you how it looks in dreamweaver
in style:
table {
border-collapse: collapse;
border-spacing: 0;
}
tbody tr td {
font-family: sans-serif;
font-style: bold;
color: black;
font-size: 13px;
}
.B {font-size: 14px;
text-align: left !important;
}
.smallcaps {
font-variant: small-caps;
font-size: 14px;
text-align: left !important;
}
.bcorp {
font-variant: small-caps;
font-size: 14px;
text-align: center;
}
.pad {
padding-left: 12px;
padding-right: 12px;
vertical-align: bottom;
text-align: center;
}
a {
text-decoration: none;
text-align: center;
}
And in table>tbody:
<tr>
<td width="96" rowspan="6"><a><img src="http:///wp-content/uploads/2016/09/Logo-01.jpg" alt="Logo" width="96" height="90"/></a></td>
<td height="1" colspan="2"> </td>
</tr>
<tr>
<td height="9" colspan="2"><span class="B">Name Here, Position Title</span></td>
</tr>
<tr>
<td height="20" colspan="2"><span class=smallcaps>Company Name</span>.</td>
</tr>
<tr>
<td height="20" colspan="2">12345 SW 22 P<span class=smallcaps>kwy</span> | P<span class=smallcaps>ortland</span>, OR 97111 | S<span class=smallcaps>te</span> 123</td>
</tr>
<tr>
<td height="7" colspan="2">D<span class=smallcaps>esk</span>: 503.123.4567 | C<span class=smallcaps>ell</span>: 503.987.6543</td>
</tr>
<tr>
<td height="1" colspan="2"> </td>
</tr>
<tr>
<td colspan="2" cellpadding="5">
<a href="https://www.facebook.com/">
<img class="pad" src="small-icons-03-03-[1].jpg" width="25" height="25" alt="Facebook" href="https://www.facebook.com/"/>
</a>
<a href="https://www.facebook.com/">
<img class="pad" src="small-icons-03-03-[1].jpg" width="25" height="25" alt="Facebook" href="https://www.facebook.com/"/>
</a>
<a href="https://www.facebook.com/">
<img class="pad" src="small-icons-03-03-[1].jpg" width="25" height="25" alt="Facebook" href="https://www.facebook.com/"/>
</a>
<a href="https://www.facebook.com/">
<img class="pad" src="small-icons-03-03-[1].jpg" width="25" height="25" alt="Facebook" href="https://www.facebook.com/"/>
</a>
<a href="https://www.facebook.com/">
<img class="pad" src="small-icons-03-03-[1].jpg" width="25" height="25" alt="Facebook" href="https://www.facebook.com/"/>
</a>
</td>
<td> </td>
</tr>
<tr>
<td height="30" colspan="2"><span class=bcorp>A Certified B Corporation®</span></td>
<td width="101"> </td>
</tr>
Edited: added code - hope it's clear enough to help
Ok, please check this and see if this will help you. About the table issue.
Some Email program don't render Inline-CSS to the body of email. You may consider use the style attributes to support what Table design is missing. I used to do this when generating newsletter.
<table width="400" cellspacing="0" cellpadding="0" border="0" style="background:#EEE;font:small-caps 400 14px sans-serif;color:#444;">
<tr>
<td>
<table cellspacing="0" cellpadding="0" border="0">
<tr>
<td valign="middle" align="center" width="125" bgcolor="#DDDDDD">Logo Here</td>
<td style="line-height:1.6;padding: 5px 15px;">
<div>Name Here, Position Title</div>
<div>Company Name</div>
<div>Stress address wrapped around here</div>
<div>Desk: 123.456.789 | Cell: 123.456.789</div>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="padding: 5px;">
<table width="100%" cellspacing="0" cellpadding="5" border="0">
<tr>
<td align="center">
<table align="center" width="50%" cellspacing="0" cellpadding="5" border="0">
<tr>
<td> Icon1 </td>
<td> Icon2 </td>
<td> Icon3 </td>
<td> Icon4 </td>
<td> Icon5 </td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center">
A Certified B Corporation <sup>®</sup>
</td>
</tr>
</table>
</td>
</tr>
</table>
You can achieve the required alignment in the cells using CSS properties: text-align:center and text-align:left. By the way, a row defaults to text-align:left so if you don't put the alignment then it by default goes to left alignment.
And for merging the cells, you can use rowspan and colspan attribute in the tag inside HTML.
I am posting a working example with complete CSS and HTML code for your consideration here: https://jsfiddle.net/rahuldhangar/0s5usofv/
HTML code:
<table width="400" cellspacing="0" cellpadding="0" border="0" style="background:#EEE;font:small-caps 400 14px sans-serif;color:#444;">
<tr>
<td>
<table cellspacing="0" cellpadding="0" border="0">
<tr>
<td valign="middle" align="center" width="125" bgcolor="#DDDDDD">Logo Here</td>
<td style="line-height:1.6;padding: 5px 15px;">
<div>Name Here, Position Title</div>
<div>Company Name</div>
<div>Stress address wrapped around here</div>
<div>Desk: 123.456.789 | Cell: 123.456.789</div>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="padding: 5px;">
<table width="100%" cellspacing="0" cellpadding="5" border="0">
<tr>
<td align="center">
<ul style="list-style:none;margin:0;padding:0;">
<li style="display:inline-block;padding:0 5px;"> Icon </li>
<li style="display:inline-block;padding:0 5px;"> Icon </li>
<li style="display:inline-block;padding:0 5px;"> Icon </li>
<li style="display:inline-block;padding:0 5px;"> Icon </li>
<li style="display:inline-block;padding:0 5px;"> Icon </li>
</ul>
</td>
</tr>
<tr>
<td align="center">
A Certified B Corporation <sup>®</sup>
</td>
</tr>
</table>
</td>
I am trying to add an image to a footer within an email client. Within older Safari browsers and Outlook Mac 2011, the image moves slightly to the right of the rest of the table.
I have the border zeroed out through the HTML attribute but it didn't help. I then attempted to zero out the border with an inline style and that didn't work.
Is there any available solutions? (I have also attached a snapshot of what my problem looks like)
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="center"><img src="http://image.efamilydollar.com/lib/feea1c79706d02/m/5/footer-arch.png" /></td>
</tr>
</table>
<table bgcolor="#efecef" class="content" width="600" border="0" cellpadding="10" cellspacing="0" align="center">
<!-- Footer 600px wrapper -->
<tr>
<td>
<!-- Social & Mobile Boxes -->
<table class="footerboxes" width="290" cellpadding="5" cellspacing="0" border="0" align="left">
<tr>
<td>
<!-- SocialBox -->
<table align="center" width="285" bgcolor="#ffffff" cellpadding="5" style="border: 1px; border-color: #aaaaaa; border-style: solid;" >
<tr>
<td height="35">
<span style="font-family:Arial, Helvetica, sans-serif; font-size: 19px; text-transform: uppercase;">
<strong>
Be social.
</strong>
</span>
</td>
<td>
<a href="http://facebook.com/familydollar" target="_blank" border="0">
<img src="http://image.efamilydollar.com/lib/feea1c79706d02/m/4/fb_icon.png" style="display: block; width: 25px; height: 25px;" border="0"/>
</a>
</td>
<td>
<a href="http://twitter.com/myfamilydollar" target="_blank" border="0">
<img src="http://image.efamilydollar.com/lib/feea1c79706d02/m/4/twitter_icon.png" style="display: block; width: 25px; height: 25px;" border="0"/>
</a>
</td>
<td>
<a href="http://pinterest.com/familydollar" target="_blank" border="0">
<img src="http://image.efamilydollar.com/lib/feea1c79706d02/m/4/pin_icon.png" style="display: block; width: 25px; height: 25px;" border="0"/>
</a>
</td>
<td>
<a href="http://youtube.com/thefamilydollar" target="_blank" border="0"><img src="http://image.efamilydollar.com/lib/feea1c79706d02/m/4/youtube_icon.png" style="display: block; width: 25px; height: 25px;" border="0"/>
</a>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<!-- MobileBox -->
<table align="center" width="285" bgcolor="#ffffff" cellpadding="5" style="border: 1px; border-color: #aaaaaa; border-style: solid;">
<tr>
<td height="35">
<span style="font-family:Arial, Helvetica, sans-serif; font-size: 19px; text-transform: uppercase;">
<strong>
Go mobile.
</strong>
</span>
</td>
<td style="font-family:Arial, Helvetica, sans-serif; font-size: 13px; color:#636363;">
<span>
Text
</span>
<strong style="color:#ff0000;">
VALUE
</strong>
to
<strong style="color:#ff0000;">
28767
</strong>
<br>
<span>
Visit
</span>
<a href="http://m.familydollar.com" style="text-decoration: none; color:#ff0000;">
m.familydollar.com
</a>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<!-- BlogBox -->
<table align="center" width="285" bgcolor="#ffffff" cellpadding="5" style="border: 1px; border-color: #aaaaaa; border-style: solid;">
<tr>
<td height="35">
<span style="font-family:Arial, Helvetica, sans-serif; font-size: 19px; text-transform: uppercase;">
<strong>
Get tips.
</strong>
</span>
</td>
<td align="right" style="font-family:Arial, Helvetica, sans-serif; font-size: 13px;">
<span>
Visit
</span>
<a href="http://blog.familydollar.com" style="text-decoration: none; color: #ff0000;">
blog.familydollar.com
</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- End of Social & Mobile Boxes -->
<table cellpadding="10" cellspacing="0" align="center" class="footer">
<tr>
<td align="left">
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td style="font-family: arial, helvetica, sans-serif; font-size:12px;">
<span style="font-style: italic;" >
While Quantities Last. No Sales To Dealers. Some Items Not Available At All Stores. Limited Quantities On Some Items
</span>
<br>
<br>
This email was sent to %%emailaddr%% by:
<br>
%%Member_Busname%%
<br>
%%Member_Addr%%
<br>
%%Member_City%%, %%Member_State%%, %%Member_PostalCode%%
</td>
</tr>
</table>
</td>
</tr>
</table>
<table cellpadding="5" width="100%">
<tr>
<td style="font-family: arial, helvetica, sans-serif; font-size:12px;">
To ensure future delivery of email, please add
<a href="http://www.memberlandingpages.com/address_book/address_book_add-a.htm" alias="Add Address Book-Email Address" target="_blank" style="text-decoration: none; color: #ff0000;">
familydollar#efamilydollar.com
</a>
to your safe sender list or address book.
<a href="http://www.memberlandingpages.com/address_book/address_book_add-a.htm" alias="Add Address Book Click Here" target="_blank" style="text-decoration: underline; color: #ff0000;">
Click here for instructions.
</a>
<br><br>
We respect your right to privacy - View our policy
</td>
</tr>
<tr>
<td colspan="2" align="center">
<font face="verdana" size="1" color="#777777">
<br>
Manage Subscriptions | Update Profile | Unsubscribe<br><br>
</font>
</td>
</tr>
</table>
</td>
</tr>
</table>
Just a heads up. Took me a bit of time to see what the issue was. Didn't realize it was the top of the footer that was out (hard to see since it's ever so slight).
Try:
<table width="600" border="0" cellpadding="0" cellspacing="0" align="center">
<tr>
<td><img src="http://image.efamilydollar.com/lib/feea1c79706d02/m/5/footer-arch.png" width="600" height="53" style="display: block; border: 0;" /></td>
</tr>
</table>
I made the footer image parent table the same width as the table below it.
Also I recommend setting width and heights for ALL images and do it in the HTML. Not sure if it would have a mass of difference but always better to do things in the most basic format possible (as in: if you can do it in the HTML over the CSS then do!)
Solution 2:
Wrap both tables in a 600 width table that is centered. Then make both child tables go 100%.
Building on lejimmie answer, try adding the image into the footer table and removing the cellpadding and insert it into the TD on the row below the image.
That should contain the image to same restrictions of footer below and remove possibility of misalignment.
See below for example:
<table bgcolor="#efecef" class="content" width="600" border="0" cellpadding="0" cellspacing="0" align="center">
<!-- Footer 600px wrapper -->
<tr>
<td align="center" bgcolor="#FFFFFF" style="display:block; border-collapse:collapse;"><img src="http://image.efamilydollar.com/lib/feea1c79706d02/m/5/footer-arch.png" style="display:block;" /></td>
</tr>
<tr>
<td style="padding:10px;">
<!-- Social & Mobile Boxes -->
<table class="footerboxes" width="290" cellpadding="5" cellspacing="0" border="0" align="left">
<tr>
<td>
<!-- SocialBox -->
<table align="center" width="285" bgcolor="#ffffff" cellpadding="5" style="border: 1px; border-color: #aaaaaa; border-style: solid;" >
<tr>
<td height="35">
<span style="font-family:Arial, Helvetica, sans-serif; font-size: 19px; text-transform: uppercase;">
<strong>
Be social.
</strong>
</span>
</td>
<td>
<a href="http://facebook.com/familydollar" target="_blank" border="0">
<img src="http://image.efamilydollar.com/lib/feea1c79706d02/m/4/fb_icon.png" style="display: block; width: 25px; height: 25px;" border="0"/>
</a>
</td>
<td>
<a href="http://twitter.com/myfamilydollar" target="_blank" border="0">
<img src="http://image.efamilydollar.com/lib/feea1c79706d02/m/4/twitter_icon.png" style="display: block; width: 25px; height: 25px;" border="0"/>
</a>
</td>
<td>
<a href="http://pinterest.com/familydollar" target="_blank" border="0">
<img src="http://image.efamilydollar.com/lib/feea1c79706d02/m/4/pin_icon.png" style="display: block; width: 25px; height: 25px;" border="0"/>
</a>
</td>
<td>
<a href="http://youtube.com/thefamilydollar" target="_blank" border="0"><img src="http://image.efamilydollar.com/lib/feea1c79706d02/m/4/youtube_icon.png" style="display: block; width: 25px; height: 25px;" border="0"/>
</a>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<!-- MobileBox -->
<table align="center" width="285" bgcolor="#ffffff" cellpadding="5" style="border: 1px; border-color: #aaaaaa; border-style: solid;">
<tr>
<td height="35">
<span style="font-family:Arial, Helvetica, sans-serif; font-size: 19px; text-transform: uppercase;">
<strong>
Go mobile.
</strong>
</span>
</td>
<td style="font-family:Arial, Helvetica, sans-serif; font-size: 13px; color:#636363;">
<span>
Text
</span>
<strong style="color:#ff0000;">
VALUE
</strong>
to
<strong style="color:#ff0000;">
28767
</strong>
<br>
<span>
Visit
</span>
<a href="http://m.familydollar.com" style="text-decoration: none; color:#ff0000;">
m.familydollar.com
</a>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<!-- BlogBox -->
<table align="center" width="285" bgcolor="#ffffff" cellpadding="5" style="border: 1px; border-color: #aaaaaa; border-style: solid;">
<tr>
<td height="35">
<span style="font-family:Arial, Helvetica, sans-serif; font-size: 19px; text-transform: uppercase;">
<strong>
Get tips.
</strong>
</span>
</td>
<td align="right" style="font-family:Arial, Helvetica, sans-serif; font-size: 13px;">
<span>
Visit
</span>
<a href="http://blog.familydollar.com" style="text-decoration: none; color: #ff0000;">
blog.familydollar.com
</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- End of Social & Mobile Boxes -->
<table cellpadding="10" cellspacing="0" align="center" class="footer">
<tr>
<td align="left">
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td style="font-family: arial, helvetica, sans-serif; font-size:12px;">
<span style="font-style: italic;" >
While Quantities Last. No Sales To Dealers. Some Items Not Available At All Stores. Limited Quantities On Some Items
</span>
<br>
<br>
This email was sent to %%emailaddr%% by:
<br>
%%Member_Busname%%
<br>
%%Member_Addr%%
<br>
%%Member_City%%, %%Member_State%%, %%Member_PostalCode%%
</td>
</tr>
</table>
</td>
</tr>
</table>
<table cellpadding="5" width="100%">
<tr>
<td style="font-family: arial, helvetica, sans-serif; font-size:12px;">
To ensure future delivery of email, please add
<a href="http://www.memberlandingpages.com/address_book/address_book_add-a.htm" alias="Add Address Book-Email Address" target="_blank" style="text-decoration: none; color: #ff0000;">
familydollar#efamilydollar.com
</a>
to your safe sender list or address book.
<a href="http://www.memberlandingpages.com/address_book/address_book_add-a.htm" alias="Add Address Book Click Here" target="_blank" style="text-decoration: underline; color: #ff0000;">
Click here for instructions.
</a>
<br><br>
We respect your right to privacy - View our policy
</td>
</tr>
<tr>
<td colspan="2" align="center">
<font face="verdana" size="1" color="#777777">
<br>
Manage Subscriptions | Update Profile | Unsubscribe<br><br>
</font>
</td>
</tr>
</table>
</td>
</tr>
</table>
When #lejimmie presented a couple of solutions for me to try out, it worked perfectly but not quite for a responsive email, it did however provided an excellent guide to develop a proper solution.
For this email, a simple solution to add a media query to the header wouldn't have done the job, because we don't have control over the header code content. Frustrating working with Exact Target sometimes on SalesForce.
This is what got the job done and so far seems to work perfectly across both mobile and desktop email clients...
<table width="100%" border="0" cellpadding="0" cellspacing="0" align="center">
<tbody>
<tr>
<td align="center"><img src="http://image.efamilydollar.com/lib/feea1c79706d02/m/5/footerarch.png" width="100%" style="max-width: 600px; display: block; border: 0;"></td>
</tr>
</tbody>
</table>
<table bgcolor="#efecef" class="content" width="600" border="0" cellpadding="10" cellspacing="0" align="center">
<!-- Footer 600px wrapper -->
<tr>
<td>
<!-- Social & Mobile Boxes -->
<table class="footerboxes" width="290" cellpadding="5" cellspacing="0" border="0" align="left">
<tr>
<td>
<!-- SocialBox -->
<table align="center" width="285" bgcolor="#ffffff" cellpadding="5" style="border: 1px; border-color: #aaaaaa; border-style: solid;" >
<tr>
<td height="35">
<span style="font-family:Arial, Helvetica, sans-serif; font-size: 19px; text-transform: uppercase;">
<strong>
Be social.
</strong>
</span>
</td>
<td>
<a href="http://facebook.com/familydollar" target="_blank" border="0">
<img src="http://image.efamilydollar.com/lib/feea1c79706d02/m/4/fb_icon.png" style="display: block; width: 25px; height: 25px;" border="0"/>
</a>
</td>
<td>
<a href="http://twitter.com/myfamilydollar" target="_blank" border="0">
<img src="http://image.efamilydollar.com/lib/feea1c79706d02/m/4/twitter_icon.png" style="display: block; width: 25px; height: 25px;" border="0"/>
</a>
</td>
<td>
<a href="http://pinterest.com/familydollar" target="_blank" border="0">
<img src="http://image.efamilydollar.com/lib/feea1c79706d02/m/4/pin_icon.png" style="display: block; width: 25px; height: 25px;" border="0"/>
</a>
</td>
<td>
<a href="http://youtube.com/thefamilydollar" target="_blank" border="0"><img src="http://image.efamilydollar.com/lib/feea1c79706d02/m/4/youtube_icon.png" style="display: block; width: 25px; height: 25px;" border="0"/>
</a>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<!-- MobileBox -->
<table align="center" width="285" bgcolor="#ffffff" cellpadding="5" style="border: 1px; border-color: #aaaaaa; border-style: solid;">
<tr>
<td height="35">
<span style="font-family:Arial, Helvetica, sans-serif; font-size: 19px; text-transform: uppercase;">
<strong>
Go mobile.
</strong>
</span>
</td>
<td style="font-family:Arial, Helvetica, sans-serif; font-size: 13px; color:#636363;">
<span>
Text
</span>
<strong style="color:#ff0000;">
VALUE
</strong>
to
<strong style="color:#ff0000;">
28767
</strong>
<br>
<span>
Visit
</span>
<a href="http://www.familydollar.com" style="text-decoration: none; color:#ff0000;">
familydollar.com
</a>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<!-- BlogBox -->
<table align="center" width="285" bgcolor="#ffffff" cellpadding="5" style="border: 1px; border-color: #aaaaaa; border-style: solid;">
<tr>
<td height="35">
<span style="font-family:Arial, Helvetica, sans-serif; font-size: 19px; text-transform: uppercase;">
<strong>
Get tips.
</strong>
</span>
</td>
<td align="right" style="font-family:Arial, Helvetica, sans-serif; font-size: 13px;">
<span>
Visit
</span>
<a href="http://blog.familydollar.com" style="text-decoration: none; color: #ff0000;">
blog.familydollar.com
</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- End of Social & Mobile Boxes -->
<table cellpadding="10" cellspacing="0" align="center" class="footer">
<tr>
<td align="left">
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td style="font-family: arial, helvetica, sans-serif; font-size:12px;">
<span style="font-style: italic;" >
While Quantities Last. No Sales To Dealers. Some Items Not Available At All Stores. Limited Quantities On Some Items
</span>
<br>
<br>
This email was sent to %%emailaddr%% by:
<br>
%%Member_Busname%%
<br>
%%Member_Addr%%
<br>
%%Member_City%%, %%Member_State%%, %%Member_PostalCode%%
</td>
</tr>
</table>
</td>
</tr>
</table>
<table cellpadding="5" width="100%">
<tr>
<td style="font-family: arial, helvetica, sans-serif; font-size:12px;">
To ensure future delivery of email, please add
<a href="http://www.memberlandingpages.com/address_book/address_book_add-a.htm" alias="Add Address Book-Email Address" target="_blank" style="text-decoration: none; color: #ff0000;">
familydollar#efamilydollar.com
</a>
to your safe sender list or address book.
<a href="http://www.memberlandingpages.com/address_book/address_book_add-a.htm" alias="Add Address Book Click Here" target="_blank" style="text-decoration: underline; color: #ff0000;">
Click here for instructions.
</a>
<br><br>
We respect your right to privacy - View our policy
</td>
</tr>
<tr>
<td colspan="2" align="center">
<font face="verdana" size="1" color="#777777">
<br>
Manage Subscriptions | Update Profile | Unsubscribe<br><br>
</font>
</td>
</tr>
</table>
</td>
</tr>
</table>
Thank you #lejimmie again, you led me to the right direction.