Hi I'm working with a Mail template. Facing some issues with alignment in some versions of Outlook in the icons sections, maybe because of it's Word rendering engine. What alternative solution do we have to make the image align with text in Outlook ?
Icons not aligning with text.
<td style="background:#fff;">
<h2 style="color:#000000;font-size:30px;line-height:22px;font-family:'Francois One',Arial,Sans-Serif;margin:30px 0 10px;font-weight: 400;">TU PEDIDO</h2>
<h3 style="color:#000000;font-size:20px;line-height:22px;font-family:'Francois One',Arial,Sans-Serif;margin:0 0 12px;font-weight: 400;">PEDIDO #{{orderNumber}}</h3>
<p style="color:#000000;font-size:14px;line-height:22px;font-family:Helvetica,Arial,Sans-Serif;margin:0 0 10px;">
<img src="https://i.postimg.cc/nzZ5SbZ8/ico-calendar2x.png" width="20" height="21" alt="" border="0" style="vertical-align: middle;" /> {{orderDate}}
</p>
<p style="color:#000000;font-size:14px;line-height:22px;font-family:Helvetica,Arial,Sans-Serif;margin:0 0 10px;">
<img src="https://i.postimg.cc/NffxJGH7/ico-shop2x.png" width="20" height="21" alt="" border="0" style="vertical-align: middle;" /> {{storeName}}
</p>
<p style="font-size:14px;line-height:22px;font-family:Helvetica,Arial,Sans-Serif;margin:0 0 10px;">
<img src="https://i.postimg.cc/sf58d2xk/ico-phone2x.png" width="20" height="21" alt="" border="0" style="vertical-align: middle;" /> {{storePhone}}
</p>
<p style="color:#000000;font-size:14px;line-height:22px;font-family:Helvetica,Arial,Sans-Serif;margin:0 0 10px;">
<img src="https://i.postimg.cc/4xyBd44N/ico-pin2x.png" width="20" height="21" alt="" border="0" style="vertical-align: middle;" /> {{deliveryAddress}}
</p>
<p style="color:#000000;font-size:16px;line-height:22px;font-family:Helvetica,Arial,Sans-Serif;margin:20px 0 10px;letter-spacing: 1.6px;text-align: center;">
<img src="https://i.postimg.cc/8cv1dgm2/asterisco.png" width="395" height="5" alt="" border="0" style="vertical-align: middle;" />
</p>
<table align="center" border="0" cellpadding="0" cellspacing="0" id="templateContainer" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-collapse: collapse !important;width:100%;">
{{#each items}}
<tr>
<td width="45%" style="color:#000000;font-size:14px;line-height:22px;font-family:Helvetica,Arial,Sans-Serif;padding:0 0 4px;">
x{{quantity}} {{name}}
</td>
<td width="35%" style="color:#000000;font-size:14px;line-height:22px;font-family:Helvetica,Arial,Sans-Serif;padding:0 0 4px;text-align:right;">
+{{price}} €
</td>
</tr>
{{#each modifiers}}
<tr>
<td style="color:#000000;font-size:14px;line-height:22px;font-family:Helvetica,Arial,Sans-Serif;padding:0 0 16px 14px;">
- {{quantity}} {{name}}
</td>
<td style="color:#000000;font-size:14px;line-height:22px;font-family:Helvetica,Arial,Sans-Serif;padding:0 0 16px;text-align:right;">
{{price}}
</td>
</tr>
{{/each}} {{/each}}
<tr>
<td colspan="3" style="border-bottom: 1px solid #000000;"> </td>
</tr>
<tr>
<td width="45%" style="color:#000000;font-size:14px;line-height:22px;font-family:Helvetica,Arial,Sans-Serif;padding:0 0 4px;">
</td>
<td width="35%" style="color:#000000;font-size:16px;line-height:22px;font-family:Helvetica,Arial,Sans-Serif;padding:10px 0 4px;text-align:right;">
<strong>{{subTotal}} €</strong>
</td>
</tr>
<tr>
<td style="color:#000000;font-size:16px;line-height:22px;font-family:Helvetica,Arial,Sans-Serif;padding:2px 0 10px">
Envío
</td>
<td style="color:#000000;font-size:16px;line-height:22px;font-family:Helvetica,Arial,Sans-Serif;padding:2px 0 10px;text-align:right;">
+{{deliveryCharge}} €
</td>
</tr>
<tr>
<td style="color:#000000;font-size:20px;line-height:22px;font-family:Helvetica,Arial,Sans-Serif;padding:0 0 16px">
<strong>TOTAL</strong>
</td>
<td style="color:#000000;font-size:20px;line-height:22px;font-family:Helvetica,Arial,Sans-Serif;padding:0 0 16px;text-align:right;">
<strong>{{total}} €</strong>
</td>
</tr>
<tr>
<td style="color:#000000;font-size:12px;line-height:22px;font-family:Helvetica,Arial,Sans-Serif;padding:0 0 24px">
<img src="https://i.postimg.cc/sDq36XNt/ico-card2x.png" width="22" height="17" alt="" border="0" style="vertical-align: middle;" /> {{tender}}
</td>
<td style="color:#000000;font-size:20px;line-height:22px;font-family:Helvetica,Arial,Sans-Serif;padding:0 0 24px;text-align:right;">
</td>
</tr>
</table>
</td>
I've seen some sites with SOF. find some solutions. none of them seems working. Let me know If I'm missing any additional CSS property for Outlook ?
For this it appears the only way to get it working for Outlook is to wrap it in a table.
<tr>
<td style="background:#fff;">
<h2 style="color:#000000;font-size:30px;line-height:22px;font-family:'Francois One',Arial,Sans-Serif;margin:30px 0 10px;font-weight: 400;">TU PEDIDO</h2>
<h3 style="color:#000000;font-size:20px;line-height:22px;font-family:'Francois One',Arial,Sans-Serif;margin:0 0 12px;font-weight: 400;">PEDIDO #{{orderNumber}}</h3>
</td>
</tr>
<tr>
<td>
<table width="100%" cellpadding="0" cellspacing="0">
<tr>
<td width="22">
<!--Use this to control space between icon and text-->
<p style="color:#000000;font-size:14px;line-height:21px;font-family:Helvetica,Arial,Sans-Serif;margin:0;">
<img src="https://i.postimg.cc/nzZ5SbZ8/ico-calendar2x.png" width="20" height="21" alt="" border="0" style="vertical-align: middle;" />
</p>
</td>
<td>
<!--No need to put width here. It will automatically size (and is responsive without a width) -->
<p style="color:#000000;font-size:14px;line-height:14px;font-family:Helvetica,Arial,Sans-Serif;margin:0;">{{orderDate}}
</p>
</td>
</tr>
<tr>
<td width="22">
<p style="color:#000000;font-size:14px;line-height:21px;font-family:Helvetica,Arial,Sans-Serif;margin:0;">
<img src="https://i.postimg.cc/nzZ5SbZ8/ico-calendar2x.png" width="20" height="21" alt="" border="0" style="vertical-align: middle;" />
</p>
</td>
<td>
<p style="color:#000000;font-size:14px;line-height:14px;font-family:Helvetica,Arial,Sans-Serif;margin:0;"><span style="color:#000000;font-size:14px;line-height:22px;font-family:Helvetica,Arial,Sans-Serif;margin:0;">{{storeName}}</span></p>
</td>
</tr>
</table>
</td>
</tr>
I've put in an extra <tr><td><table> so that when you use two columns, you don't have to use colspan, which can cause issues.
You can now also fine-tune spacing with padding on the <td> elements.
I tried to align the html video tag and image in html table. But did not succeeded. Seems like video tag align more bottom instead of top.
Picture is attached how its look.
Css
.newsImage {
width: 354px;
height: 204px;
vertical-align: top;
text-align: left;
}
HTML:
<table cellpadding="0" cellspacing="0" class="auto-style1" align="center">
<tr>
<td colspan="5" style="height: 80px; margin-bottom: 20px;">
<h2>NYHETER</h2>
</td>
</tr>
<tr>
<td class="newsImage">
<span id="Content_lbImageNews1"><video width="354" height="240" controls="controls" preload="metadata"><source src="https://bokning.7a.se/Media/newsImages/11332241297A-v5.mp4#t=0.5" type="video/mp4">Your browser does not support the video tag.</video></span>
</td>
<td> </td>
<td class="newsImage">
<span id="Content_lbImageNews2"><img src="https://bokning.7a.se/Media/newsImages/1142145490news3.png" Height="204" Width="354"></span>
</td>
<td> </td>
<td class="newsImage">
<span id="Content_lbImageNews3"><img src="https://bokning.7a.se/Media/newsImages/279096911logga.jpg" Height="204" Width="354"></span>
</tr>
</table>
In your inline height value you set it to be 240 instead of 204 which matches your other elements:
<video width="354" height="240" controls="controls" preload="metadata">
Change that back and you should have to mess with any other code.
.newsImage {
min-width: 354px;
min-height: 204px;
vertical-align: top;
text-align: left;
}
<table cellpadding="0" cellspacing="0" class="auto-style1" align="center">
<tr>
<td colspan="5" style="height: 80px; margin-bottom: 20px;">
<h2>NYHETER</h2>
</td>
</tr>
<tr>
<td class="newsImage">
<span id="Content_lbImageNews1"><video width="354" height="204" controls="controls" preload="metadata"><source src="https://bokning.7a.se/Media/newsImages/11332241297A-v5.mp4#t=0.5" type="video/mp4">Your browser does not support the video tag.</video></span>
</td>
<td> </td>
<td class="newsImage">
<span id="Content_lbImageNews2"><img src="https://bokning.7a.se/Media/newsImages/1142145490news3.png" Height="204" Width="354"></span>
</td>
<td> </td>
<td class="newsImage">
<span id="Content_lbImageNews3"><img src="https://bokning.7a.se/Media/newsImages/279096911logga.jpg" Height="204" Width="354"></span>
</tr>
</table>
Have you try this to the css file
.newsImage {
vertical-align:top;
}
.newsImage {
vertical-align:top;
}
<html>
</html>
<body>
<table cellpadding="0" cellspacing="0" class="auto-style1" align="center">
<tr>
<td colspan="5" style="height: 80px; margin-bottom: 20px;">
<h2>NYHETER</h2>
</td>
</tr>
<tr>
<td class="newsImage">
<span id="Content_lbImageNews1"><div class="videoWrapper"><video width="100%" height="100%" controls="controls" preload="metadata"><source src="https://bokning.7a.se/Media/newsImages/11332241297A-v5.mp4#t=0.5" type="video/mp4">Your browser does not support the video tag.</video></div></span>
</td>
<td> </td>
<td class="newsImage">
<span id="Content_lbImageNews2"><img src="https://bokning.7a.se/Media/newsImages/1142145490news3.png" Height="204" Width="354"></span>
</td>
<td> </td>
<td class="newsImage">
<span id="Content_lbImageNews3"><img src="https://bokning.7a.se/Media/newsImages/279096911logga.jpg" Height="204" Width="354"></span>
</tr>
</table>
</body
The problem :
HTML
<div class="visible-sm visible-xs " id="aatablet" style="padding-left: 0px; padding-bottom:10px; padding-top:10px; text-align: center;">
<table border="1">
<tr>
<td colspan="4" class="item_title">
<div style="padding-top:5px;">
Available at:
</div>
</td>
</tr>
<tr>
<td >
<img src="img/amazon-lrg.gif" alt="amazon" />
</td>
<td>
<img src="img/ebay-lrg.gif" alt="ebay" />
</td>
<td >
<img src="img/tomatomill-lrg.gif" alt="tomatomill" />
</td>
<td ><img src="img/BBG-lrg.gif" alt="BBG" />
</td>
</tr>
<tr>
<td >
</td>
<td>
<img src="img/sears-lrg.gif" alt="sears" />
</td>
<td >
<img src="img/healthcraft-home-logo.gif" alt="Healthcraft" title="Healthcraft" />
</td>
<td >
<img src="img/paradisecozycabins.jpg" alt="paradisecozycabins" title="paradisecozycabins" />
</td>
</tr>
</table>
</div>
CSS
#aatablet > table {
margin:0 auto;
}
Framework:bootstrap 3.4.
I want to make td of tomato logo width 100px not 178px like Helt Craft and td of Paradise(last td) 50px not 150px like BIGGAME.
Can someone help me ?I'm not good at making custom tables.Is it possible to do it whit only CSS?
Ty all.
You can give inline:block for td and give separate widths. Target each td using :nth-of-type
td{
display: inline-block;
}
tr:first-child td:nth-of-type(3){
width: 100px;
}
tr:last-child td:nth-of-type(4){
width: 50px;
}
I am trying to add a scroll bar on my table but its not showing up on the table. I have tried to put my table in div as well. Here is my code:
<table class="table-condensed table-hover table-bordered" id="EligibiltyAndAccountingReportsTable" cellpadding="0" cellspacing="0" style="width: 45% !important; position: absolute;left: 52px;Top:100px">
<thead>
<tr>
<th>Eligibility Reports</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<img src="images/reports.png" class="icon" style="margin: 1px;" />
<a target="_blank" data-ng-href="{{vm.duplicateAndOverlappingCoveragesReportPath}}">Duplicate And Overlapping Coverages</a>
<br/>
<p align="left">This report provides a list of SR IDs where<br/> duplicated or overlapping coverage is present.</p>
</td>
</tr>
<tr>
<td>
<img src="images/reports.png" class="icon" style="margin: 1px;" />
<a target="_blank" data-ng-href="{{vm.openBatchReportPath}}">Open Batches </a>
<br />
<p align="left">This report provides a list of Open Batches<br/> for a given date range by Batch Type.</p>
</td>
</tr>
<tr>
<td>
<img src="images/reports.png" class="icon" style="margin: 1px;" />
<a target="_blank" data-ng-href="{{vm.refundReportPath}}">Refund</a>
<br />
<p align="left">This report provides a list of Refund Details<br/> for a given Bid Year and Client Number.</p>
</td>
</tr>
</tbody>
</table>
I have tried to put overflow property in CSS
You need to do two things. First, you have to wrap your table in a container that will do the scrolling, like this:
<div style="height: 200px; overflow: auto;">
<table>
...
</table>
</div>
And you have to remove position: absolute from the style of the table.
Here's an example: http://jsfiddle.net/qbkfbrwd/
Hope that helps!
Edit If instead you only want the body of the table to be able to scroll, it's as simple as adding the following CSS:
tbody {
display: block;
height: 200px; //or whatever you want the height to be
overflow: auto;
}
Example: http://jsfiddle.net/f91pzj6d/
Create a div with:
<div id="myTable">
and in css:
myTable {
overflow:auto;
}
I add a div as container and use overflow: auto. You have also to set a height for your table:
#tableContainer {
overflow: auto;
height: 200px;
position: relative;
width: 300px;
}
<div id="tableContainer">
<table class="table-condensed table-hover table-bordered" id="EligibiltyAndAccountingReportsTable" cellpadding="0" cellspacing="0" style="width: 45% !important; position: absolute;left: 52px;Top:100px">
<thead>
<tr>
<th>Eligibility Reports</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<img src="images/reports.png" class="icon" style="margin: 1px;" />
<a target="_blank" data-ng-href="{{vm.duplicateAndOverlappingCoveragesReportPath}}">Duplicate And Overlapping Coverages</a>
<br/>
<p align="left">This report provides a list of SR IDs where
<br/>duplicated or overlapping coverage is present.</p>
</td>
</tr>
<tr>
<td>
<img src="images/reports.png" class="icon" style="margin: 1px;" />
<a target="_blank" data-ng-href="{{vm.openBatchReportPath}}">Open Batches </a>
<br />
<p align="left">This report provides a list of Open Batches
<br/>for a given date range by Batch Type.</p>
</td>
</tr>
<tr>
<td>
<img src="images/reports.png" class="icon" style="margin: 1px;" />
<a target="_blank" data-ng-href="{{vm.refundReportPath}}">Refund</a>
<br />
<p align="left">This report provides a list of Refund Details
<br/>for a given Bid Year and Client Number.</p>
</td>
</tr>
<tr>
<td>
<img src="images/reports.png" class="icon" style="margin: 1px;" />
<a target="_blank" data-ng-href="{{vm.refundReportPath}}">Refund</a>
<br />
<p align="left">This report provides a list of Refund Details
<br/>for a given Bid Year and Client Number.</p>
</td>
</tr>
<tr>
<td>
<img src="images/reports.png" class="icon" style="margin: 1px;" />
<a target="_blank" data-ng-href="{{vm.refundReportPath}}">Refund</a>
<br />
<p align="left">This report provides a list of Refund Details
<br/>for a given Bid Year and Client Number.</p>
</td>
</tr>
</tbody>
</table>
</div>
I have been working on a dynamic page http://www.euroworker.no/order and I want my lovely rounded corners box (border-radius, not images) to fit over the generated products and ordrekommentar boxes. This is dynamic so I have set the HTML, and parent element of this div to height:100%;, but it just extends to the bottom of the page.
How can I get the rounded corners box to fit over the generated content?
Pris
Antall
<tr class="even first">
<td class="cartControl">
Slett
</td>
<td class="cartImage">
<a href="/Plantronics-CS361N.11">
<img src="upload/productimage/11-22-1.jpg?1249726571" alt="Plantronics CS361N" />
</a>
</td>
<td class="cartName">
<div>
Plantronics CS361N
<small>(Trådløse - duo)</small>
</div>
</td>
<td class="cartPrice discount">
11950.-
<div class="subTotalCalc">
5 x <span class="basePrice">2988.-</span><span class="actualPrice">2390.-</span>
</div>
</td>
<td class="cartQuant">
<input name="item_984" class="text" type="text" value="5"/>
</td>
</tr>
<tr class="odd">
<td class="cartControl">
Slett
</td>
<td class="cartImage">
<a href="/Target-7050CC-Duo-UNC.7">
<img src="upload/productimage/7-250-1.jpg?1251022192" alt="Target 7050CC Duo UNC" />
</a>
</td>
<td class="cartName">
<div>
Target 7050CC Duo UNC
<small>(Med ledning - duo)</small>
</div>
<div class="productOptions">
<div class="nonEditableOption">
Skal tilkobles:
Cisco
</div>
<div class="productOptionsMenu">
Endre valg
</div>
</div>
</td>
<td class="cartPrice discount">
<span class="basePrice">1124.-</span><span class="actualPrice">899.-</span>
</td>
<td class="cartQuant">
<input name="item_997" class="text" type="text" value="1"/>
</td>
</tr>
<tr class="even last">
<td class="cartControl">
Slett
</td>
<td class="cartImage">
<a href="/Sennheiser-MM-400.626">
<img src="upload/productimage/626-984-1.jpg?1264593017" alt="Sennheiser MM 400" />
</a>
</td>
<td class="cartName">
<div>
Sennheiser MM 400
<small>(Bluetooth headset)</small>
</div>
</td>
<td class="cartPrice discount">
<span class="basePrice">1938.-</span><span class="actualPrice">1550.-</span>
</td>
<td class="cartQuant">
<input name="item_998" class="text" type="text" value="1"/>
</td>
</tr>
<tr>
<td colspan="3" class="subTotalCaption">
Tilnærmet fraktpris:
</td>
<td class="amount shippingAmount">124.-</td>
<div id="roundbigbox">
<td id="cartUpdate"><!--<input type="submit" class="submit" value="Oppdater" />-->
<button type="submit" class="submit" id="oppdatersubmit" name="saveFields" title="Oppdater" value=""> </button> </td>
</tr>
<tr>
<td colspan="3" class="subTotalCaption">mva:</td>
<td class="amount taxAmount">3600.-</td>
</tr>
<tr>
<td colspan="3" class="subTotalCaption">Totalt:</td>
<td class="subTotal">18123.-</td>
<div id="eavContainer_556782" class="eavContainer">
<p class="required ">
<label for="product___specField_6"><span>Ordrekommentar:</span></label>
<fieldset class="error">
<div class="textarea" style="margin-left: 0;">
<textarea id="product__708_specField_6" name="specField_6" class="tinyMCE"></textarea>
<div class="errorText hidden"></div>
</div>
<div class="errorText hidden"></div>
</fieldset>
</p>
</div>
CSS
roundbigbox {
padding:10px;
width:760px;
height:1%;
border-width:1px;
border-radius:10px;
border-color:#dddddd;
-moz-border-radius:10px;
-webkit-border-radius:10px;
z-index:-1;
position:relative;
overflow:hidden;
}
<div id="products">
<div class="product">...</div>
<div class="product">...</div>
</div>
#products
{
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
position: relative;
height: 1%;
overflow: hidden;
padding: 10px;
}
You won't get the border-radius to work in IE but the box will extend dynamically to accommodate x amount of products in IE6+, FF, S, C & O