I'm trying to create an excel spreadsheet with a landing page where I input a specific week number, period number and/or year.
I would then click a button to open an instance of Internet Explorer, navigate to the web form, input the data from the cells in the spreadsheet and then load up the reports selected.
Code for the web form
<br>
<body>
</body>
</html>
<head>
<!--include file="../../Connections/SQL.asp" -->
<title>Performance Reporting</title>
<link href="../../CSS/KPI_Style.css" rel="stylesheet" type="text/css">
<link href="../../CSS/KPI_Style.css" rel="stylesheet" type="text/css">
<link href="../CSS/KPI_Style.css" rel="stylesheet" type="text/css">
<style type="text/css">
<!--
.style45 {color: #990000}
-->
</style>
<script type="text/javascript" language="javascript">
<!--
function makeDisable(){
var y=document.getElementById("store")
var x=document.getElementById("CHNSplits")
if (y.value=='CP11')
{
x.disabled=true
}
}
function makeEnable(){
var x=document.getElementById("CHNSplits")
x.disabled=false
}
-->
</script>
</head>
<body>
<div align="center">
<link href="../CSS/PL_Style.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
.style2 {font-size: 16px}
.style33 {color: #ffffff}
-->
</style>
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td bgcolor="#001446" class="border9"><div align="left"><img src="80.gif" alt="DSGi" /></div></td>
<td valign="bottom" bgcolor="#001446" class="border16"><div align="right" class="xbig style1 style33"><span class="style2">Store Performance</span> </div></td>
</tr>
</table>
<br>
<br>
<style type="text/css">
<!--
body,td,th {
font-family: Arial, Helvetica, sans-serif;
}
body {
background-image: url();
}
.style1 {
color: #d33;
font-size: 18px;
}
.style2 {color: #000000; font-size: 2px; }
.style10 {color: #d33}
.style15 {font-size: 12px}
-->
</style>
<title></title>
</div>
<link href="../../../Testing/KPI/NewKPI/Digital_KPI/stylesheet.css" rel="stylesheet" type="text/css">
<div align="center"><span class="reportname"> Reporting Selection</span></div>
<form name="form1" id="form1" method="post" action="Get_Page_V4.asp">
<input name="store" type="hidden" value="2397" >
<input name="ViewType" type="hidden" value="store" >
<table width="60%" border="1px" align="center" cellpadding="0" cellspacing="0" bordercolor="#000000">
<td colspan="2"><div align="center" class="formnamesmall">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr height="4">
<td></td>
</tr>
<tr height="5">
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td colspan="6"><div align="center" class="formtextverylarge">Selected Location:</span> 1111</div></td>
</tr>
<tr>
<td><input name="RadioGroup1" type="radio" value="1" checked></td>
<td class="formnamesmall" ><strong>Yesterday</td>
<td class="formtext"> </td>
<td class="formtext"> </td>
<td class="formtext"> </td>
<td class="formtext"> </td>
</tr>
<tr height="15">
<td height="10"></td>
<td height="10" class="formtext"></td>
<td height="10" class="formtext"></td>
<td height="10" class="formtext"></td>
<td height="10" class="formtext"></td>
<td height="10" class="formtext"></td>
</tr>
<tr class="formtext">
<td><input type="radio" name="RadioGroup1" value="2"></td>
<td class="formnamesmall" ></td>
<td class="formtext"> </td>
<td class="formtext"> </td>
<td class="formnamesmall"> </td>
<td class="formtext">
<input name="datebox" type="hidden" id="datebox" value="07/10/2018" size="10" maxlength="10"></td>
</tr>
<tr height="15">
<td height="10"></td>
<td height="10" class="formtext"></td>
<td height="10" class="formtext"></td>
<td height="10" class="formtext"></td>
<td height="10" class="formtext"></td>
<td height="10" class="formtext"></td>
</tr>
<tr>
<td><input type="radio" name="RadioGroup1" value="3"></td>
<td class="formnamesmall" ><strong>Week</td>
<td class="formtext"> </td>
<td class="formtext"> </td>
<td class="formnamesmall">Enter Week </td>
<td class="formtext">
<input name="week" type="text" id="week" value="24" size="2" maxlength="2"></td>
</tr>
<tr>
<td> </td>
<td class="formtext"> </td>
<td class="formtext"> </td>
<td class="formtext"> </td>
<td class="formnamesmall">Enter Financial Year </td>
<td class="formtext">
<input name="weekyear" type="text" id="weekyear" value="2019" size="4" maxlength="4"></td>
</tr>
<tr height="15">
<td height="10"></td>
<td height="10" class="formtext"></td>
<td height="10" class="formtext"></td>
<td height="10" class="formtext"></td>
<td height="10" class="formtext"></td>
<td height="10" class="formtext"></td>
</tr>
<tr class="formtext">
<td><label>
<input type="radio" name="RadioGroup1" value="4">
</label></td>
<td class="formnamesmall" ><strong>Period</td>
<td class="formtext"> </td>
<td class="formtext"> </td>
<td class="formnamesmall">Enter Period </td>
<td class="formtext">
<input name="period" type="text" id="period" value="6" size="2" maxlength="2"></td>
</tr>
<tr class="formtext">
<td> </td>
<td class="formtext"> </td>
<td class="formtext"> </td>
<td class="formtext"> </td>
<td class="formnamesmall">Enter Financial Year </td>
<td class="formtext">
<input name="periodyear" type="text" id="periodyear" value="2019" size="4" maxlength="4"></td>
</tr>
<tr height="15">
<td height="10"></td>
<td height="10" class="formtext"></td>
<td height="10" class="formtext"></td>
<td height="10" class="formtext"></td>
<td height="10" class="formtext"></td>
<td height="10" class="formtext"></td>
</tr>
<tr height="15">
<td height="10"></td>
<td height="10" class="formtext"></td>
<td height="10" class="formtext"></td>
<td height="10" class="formtext"></td>
<td height="10" class="formtext"></td>
<td height="10" class="formtext"></td>
</tr>
<tr class="formtext">
<td><input type="radio" name="RadioGroup1" value="6"></td>
<td class="formnamesmall" ><strong>Year </td>
<td class="formtext"> </td>
<td class="formtext"> </td>
<td class="formnamesmall">Enter Financial Year </td>
<td class="formtext">
<input name="YearYear" type="text" id="YearYear" size="4" maxlength="4" value="2019" ></td>
</tr>
<tr><td height="10"> </td>
<td height="10"> </td>
<td height="10"> </td>
<td height="10"> </td>
<td height="10"> </td>
<td height="10"> </td>
</tr>
<!--
<tr>
<td colspan="4"><div align="center"><span class="formnamesmall style45">Select Report Type</span></div></td>
<td> </td>
<td colspan="2" class="formname" ><strong></td>
</tr>
-->
<td height="10"> </td>
<td height="10"> </td>
<td height="10"> </td>
<td height="10"> </td>
<td height="10"> </td>
<td height="10"> </td>
<tr>
<!--
<td><div align="center">
<input name="RadioGroup2" type="radio" class="Style10" value="1" >
</div></td>
<td>
<div align="right" class="formnamesmall style45">
<div align="left">Charts </div>
</div></td>
-->
<input name="RadioGroup2" type="hidden" class="Style10" value="6" checked="Checked">
<!--
<td><div align="right" class="formnamesmall">
<div align="left" class="style45">League Tables
</div>
</div></td>
-->
<td class="formnamesmall" colspan="4"> </td>
<td><input type="submit" name="Submit" value="Display Report"></td>
</tr>
</table>
<p> </p>
</div></td>
</tr>
</table>
<input name="page_name" type="hidden" value="Region_Page1_" />
</form>
<br>
<br>
<style type="text/css">
<!--
.style1 {
font-size: 10px;
color: #FFFFFF;
}
-->
</style>
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td valign="bottom" bgcolor="#001446"><div align="right" class="xbig style1 style1"> </div></td>
</tr>
</table>
</body>
VBA code
Sub Get_Data()
Dim i As Long
Dim IE As Object
Dim objElement As Object
Dim objCollection As Object
Dim HWNDSrc As Long
Dim dates As Object
Set IE = CreateObject("InternetExplorer.Application")
With IE
.Visible = True
.navigate "http://INTRANETSITE/Summary_Select.asp"
Do Until .readyState = 4 And Not .Busy
DoEvents
Loop
.document.all.Item("radioGroup1")(3).Checked = True 'Select the 4th checkbox down on the list
.document.forms(0).submit 'Submit the form to generate the result
End With
Pause (2)
With IE
.navigate "http://INTRANETSITE/ReportDetail2.asp?"
Do Until .readyState = 4 And Not .Busy
DoEvents
Loop
End With
End Sub
The code above navigates to the web form and does select the 4th radio button which is for period reports, then submits the form and displays the first page.
How do I interact with the text boxes to also amend which week or period I want to select reports for?
Also, when it tries to navigate to ReportDetail2.asp it returns the following error and then crashes the VBA code.
Method 'Navigate' of object 'IWebBrowser2' failed
The long term goal of this is to navigate through 20+ pages of reports, pulling the data from each table into a tab on the spreadsheet, so if it can't navigate between the reports, even before we get to the code to pull the data, then that's a problem.
Try something like the following. I am showing the different options you might consider so remember to comment out those you don't want to use.
You need to add a reference to Microsoft Internet Controls via VBE > Tools > References or use late bound call of
Dim ie As New InternetExplorer : Set ie = CreateObject("InternetExplorer.Application")
VBA:
Option Explicit
Public Sub MakeSelections()
Dim ie As New InternetExplorer
Const URL As String = "yourURL"
With ie
.Visible = True
.navigate URL
While .Busy Or .readyState < 4: DoEvents: Wend
With .document
.querySelector("[value='1']").Checked = True 'Yesterday. CSS attribute = value selector
.querySelector("[value='3']").Checked = True 'Week
.querySelector("[value='4']").Checked = True 'Period
.querySelector("[value='6']").Checked = True 'Year
.getElementById("week").Value = 6 'week value
.getElementById("weekyear").Value = 2018 'financial year value
.getElementById("period").Value = 6 'period value
.getElementById("periodyear").Value = 2018 'period financial year value
.getElementById("yearyear").Value = 2019 'financial year value
.querySelector("[value='Display Report']").Click 'display report
End With
Stop '<== Delete me later
'.Quit '<== Remember to quit application
End With
End Sub
Problem: td with image tag {{im.url}} shows images one below the other, but what I need is to show them side by side horizontally,
Is it possible to expand/merge that td to a size of first row so that I can put 5 images side by side ?
<tbody>
<tr *ngFor="let row of tasks; let i = index" colspan="6">
<td class="text-left" >
<b>
<u>{{row.lowtask}}</u>
</b>
<tr *ngFor="let t of row.time">
<td class="text-left">{{t.time1}}</td>
<td class="text-center">{{t.time2}}</td>
<td class="text-center">{{t.time3}}</td>
<td class="text-right">{{cnvert(t.cur1)}} </td>
<td class="text-right">{{convert(t.cur2)}} </td>
</tr>
<tr *ngFor="let im of row.images">
<td>
<img src="{{im.url}}" class="thumb"/>
</td>
</tr>
</td>
</tr>
</tbody>
You need to adjust your ngFor. Here you go:
<tbody>
<tr *ngFor="let row of tasks; let i = index" colspan="6">
<td class="text-left" >
<b>
<u>{{row.lowtask}}</u>
</b>
<tr *ngFor="let t of row.time">
<td class="text-left">{{t.time1}}</td>
<td class="text-center">{{t.time2}}</td>
<td class="text-center">{{t.time3}}</td>
<td class="text-right">{{cnvert(t.cur1)}} </td>
<td class="text-right">{{convert(t.cur2)}} </td>
</tr>
<tr>
<td *ngFor="let im of row.images">
<img src="{{im.url}}" class="thumb"/>
</td>
</tr>
</td>
</tr>
</tbody>
wrap your td in <ng-container>
<tbody>
<tr *ngFor="let row of tasks; let i = index" colspan="6">
<td class="text-left" >
<b>
<u>{{row.lowtask}}</u>
</b>
<tr *ngFor="let t of row.time">
<td class="text-left">{{t.time1}}</td>
<td class="text-center">{{t.time2}}</td>
<td class="text-center">{{t.time3}}</td>
<td class="text-right">{{cnvert(t.cur1)}} </td>
<td class="text-right">{{convert(t.cur2)}} </td>
</tr>
<tr>
<ng-container *ngFor="let im of row.images">
<td>
<img src="{{im.url}}" class="thumb"/>
</td>
</ng-container>
</tr>
</td>
</tr>
</tbody>
I have a table:
<table class="table table-bordered">
<tr>
<th class="text-center" colspan="3">
DRUG INFO
</th>
</tr>
<tr>
<td class="col-md-4"><span>{{item.fields[18].displayName}}</span></td>
<td class="col-md-3"><span>{{item.fields[25].displayName}}</span></td>
<td class="col-md-5"><span>{{item.fields[14].displayName}}</span></td>
</tr>
<tr>
<td>
<div data-strat-form-control data-field-display-id="1" data-vmformreadonly="formReadOnly" data-show-tool-tip="showToolTip(item.fields[19].htmlName)" data-strat-model="item" data-field="item.fields[18]"></div>
</td>
<td>
<div data-strat-form-control data-field-display-id="1" data-vmformreadonly="formReadOnly" data-show-tool-tip="showToolTip(item.fields[26].htmlName)" data-strat-model="item" data-field="item.fields[25]"></div>
</td>
<td>
<div data-strat-form-control data-field-display-id="1" data-vmformreadonly="formReadOnly" data-show-tool-tip="showToolTip(item.fields[15].htmlName)" data-strat-model="item" data-field="item.fields[14]"></div>
</td>
<tr>
<td colspan="1">UD_UU_PKG</td>
<td></td>
<td colspan="1">SHORT_CYCL</td>
</tr>
<tr>
<td>
<div data-strat-form-control data-field-display-id="1" data-vmformreadonly="formReadOnly" data-show-tool-tip="showToolTip(item.fields[52].htmlName)" data-strat-model="item" data-field="item.fields[52]"></div>
</td>
<td>
</td>
<td>
<div data-strat-form-control data-field-display-id="20" data-vmformreadonly="formReadOnly" data-show-tool-tip="showToolTip(item.fields[53].htmlName)" data-strat-model="item" data-field="item.fields[53]"></div>
</td>
</tr>
</tr>
</table>
Currently it looks like this:
I am trying to figure out how to make the middle cell on the bottom 2 rows go away so that the 2 fields will be equal in size (50/50). I have tried a ton of html properties (width, colspan etc) as well as trying to manipulate the columns with bootstrap (class="col-md-6").
What am I doing wrong and how do I fix it?
EDIT: This is what I get with Banzay's recommendations:
You need to plan the table that contains of 4 cells in each row, than set colspan respectively.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<table class="table table-bordered">
<tr>
<th class="text-center" colspan="4">
DRUG INFO
</th>
</tr>
<tr>
<td class="col-md-4"><span>{{item.fields[18].displayName}}</span></td>
<td class="col-md-3" colspan="2"><span>{{item.fields[25].displayName}}</span></td>
<td class="col-md-5"><span>{{item.fields[14].displayName}}</span></td>
</tr>
<tr>
<td>
<div data-strat-form-control data-field-display-id="1" data-vmformreadonly="formReadOnly" data-show-tool-tip="showToolTip(item.fields[19].htmlName)" data-strat-model="item" data-field="item.fields[18]"></div>
</td>
<td colspan="2">
<div data-strat-form-control data-field-display-id="1" data-vmformreadonly="formReadOnly" data-show-tool-tip="showToolTip(item.fields[26].htmlName)" data-strat-model="item" data-field="item.fields[25]"></div>
</td>
<td>
<div data-strat-form-control data-field-display-id="1" data-vmformreadonly="formReadOnly" data-show-tool-tip="showToolTip(item.fields[15].htmlName)" data-strat-model="item" data-field="item.fields[14]"></div>
</td>
<tr>
<td colspan="2">UD_UU_PKG</td>
<td colspan="2">SHORT_CYCL</td>
</tr>
<tr>
<td colspan="2">
<div data-strat-form-control data-field-display-id="1" data-vmformreadonly="formReadOnly" data-show-tool-tip="showToolTip(item.fields[52].htmlName)" data-strat-model="item" data-field="item.fields[52]"></div>
</td>
<td colspan="2">
<div data-strat-form-control data-field-display-id="20" data-vmformreadonly="formReadOnly" data-show-tool-tip="showToolTip(item.fields[53].htmlName)" data-strat-model="item" data-field="item.fields[53]"></div>
</td>
</tr>
</table>
Just play with colspans:
<table>
<tr>
<th colspan="6">
DRUG INFO
</th>
</tr>
<tr>
<td colspan="2">Effective date</td>
<td colspan="2">Minimum order</td>
<td colspan="2">Total package</td>
</tr>
<tr>
<td colspan="2">
<input type="text">
</td>
<td colspan="2">
<input type="text">
</td>
<td colspan="2">
<input type="text">
</td>
<tr>
<td colspan="3">UD_UU_PKG</td>
<td colspan="3">SHORT_CYCL</td>
</tr>
<tr>
<td colspan="3">
<input type="text">
</td>
<td colspan="3">
<input type="checkbox">
</td>
</tr>
</table>
And don't use "col-*-*" classes with table columns. They are designed to build responsive grids.
I am putting together a html based e-mail for distribution to our subscribers. However, when I render it in various clients, it is coming out slightly differently. The major difference that I see is that in some clients the main picture is offset to the left, and the grid boxes may have a different height depending on the number of lines contained. My aim was to reserve enough space for multiple lines so that all boxes would be the same height. Can anyone help me to locate the problem areas? The client in the picture with the problems is Outlook 2003, and the correct one is gmail in Chrome.
Because the html is too long to fit in stackoverflow, I'm including extracts that produce the main item with the offset picture, and the various sized grid box.
Strange offset:
<tr>
<td height="15" style="text-align:center" width="100%"></td></tr><tr>
<td border="0" width="600" style="text-align:center" align="center">
<img alt="" border="0" width="600" height="400" align="top" src="https://ci5.googleusercontent.com/proxy/vTfZfEiq_KN8RAd8D80hICfjyqCddT8oyJJNwnuvZ8D7jg4mbFEbJab51vi_ZiMrHNRitMhAtMu_hSU9Eiy1iNjIEz8YmmlkCx6M6C1lQmBkC6jm7ye1uSoKDMmq8XVo-qD0ZXA=s0-d-e1-ft#https://img.grouponcdn.com/deal/3YewhZBYt2iywAzJsuHy/ZP-960x582/v1/t440x300.jpg" style="width:600px;min-height:400px">
</td>
</tr>
<tr>
<td>
<table align="center" border="0" cellpadding="0" cellspacing="0" width="600">
<tbody>
<tr><td>
<table width="100%" border="0" cellpadding="10" cellspacing="0">
<tbody>
<tr>
<td border="0" bgcolor="#403e3e" style="background-color:#403e3e;font-family:Myriad Pro,Helvetica,Arial,sans-serif;font-size:16px;font-weight:normal;color:#ffffff;line-height:18px;text-align:left">
<img height="23" style="min-height:23px" src="https://ci3.googleusercontent.com/proxy/FYU-iKV58t7t1Y09W8HkB8ZvJUWC53Zs279rZhUHmFlI6GwdK9THzm1007Ty7LgiJAlwsOhpGzsZL7-IU-1WHk5fdBo80RCk0b8_Xc_LfDNnqw=s0-d-e1-ft#http://www.example.com/images/logos/partners/small/groupon.png" alt="Gourmet All-Inclusive 4.5-Star Playa del Carmen Resort">
</td>
<td border="0" bgcolor="#403e3e" style="background-color:#403e3e;font-family:Myriad Pro,Helvetica,Arial,sans-serif;font-size:16px;font-weight:normal;color:#ffffff;line-height:18px;text-align:right">
<span>$1179</span>
</td>
</tr>
<tr>
<td border="0" height="30" colspan="2" valign="top" bgcolor="#403e3e" style="vertical-align:top;height:30px;background-color:#403e3e;font-family:Myriad Pro,Helvetica,Arial,sans-serif;font-size:16px;font-weight:normal;color:#ffffff;line-height:18px;text-align:left">
Gourmet All-Inclusive 4.5-Star Playa del Carmen Resort
</td>
</tr>
<tr>
<td border="0" height="30" colspan="2" valign="top" bgcolor="#403e3e" style="vertical-align:top;height:30px;background-color:#403e3e;font-family:Myriad Pro,Helvetica,Arial,sans-serif;font-size:16px;font-weight:normal;color:#ffffff;line-height:18px;text-align:left">
Branchville, NJ, USA
</td>
</tr>
</tbody>
</table>
</td>
</tr></tbody>
</table>
</td>
</tr>
Various sized boxes:
<tr>
<td align="center" valign="top">
<table align="center" cellpadding="0" cellspacing="0" width="600">
<tbody>
<tr>
<td>
<table align="left" border="0" cellpadding="0" cellspacing="0" style=
"background-color:#403e3e" width="290">
<tbody>
<tr>
<td border="0" width="290"><a href=
"#147d3134c7aae5a7_147d3131083faac4_" style="border:none"><img alt=
"" border="0" height="180" src=
"https://ci4.googleusercontent.com/proxy/2iCMcbaq9UymG0sHx0JXF9wuBHu-8ibBC66U7s1q7i7Lo5zNS83olrIm7NNBuhybni869s64dxK1_5u13bYUudnGh3fh680G2yLGIc9rQ_YFWe2YLdExA4UUO5A2j_7rJlhLmXQ=s0-d-e1-ft#https://img.grouponcdn.com/deal/rHsqnohK7vGd79o7hGUq/VQ-960x582/v1/t440x300.jpg"
style="width:290px;min-height:180px;display:block" width=
"290" /></a></td>
</tr>
<tr>
<td>
<table border="0" cellpadding="7" cellspacing="0" width="100%">
<tbody>
<tr>
<td border="0" bgcolor="#403E3E" style=
"background-color:#403e3e;font-family:Myriad Pro,Helvetica,Arial,sans-serif;font-size:13px;font-weight:normal;color:#ffffff;line-height:18px;text-align:left">
<img height="15" src=
"https://ci3.googleusercontent.com/proxy/FYU-iKV58t7t1Y09W8HkB8ZvJUWC53Zs279rZhUHmFlI6GwdK9THzm1007Ty7LgiJAlwsOhpGzsZL7-IU-1WHk5fdBo80RCk0b8_Xc_LfDNnqw=s0-d-e1-ft#http://www.example.com/images/logos/partners/small/groupon.png"
style="min-height:15px" alt="Groupon" /></td>
<td border="0" bgcolor="#403E3E" style=
"background-color:#403e3e;font-family:Myriad Pro,Helvetica,Arial,sans-serif;font-size:13px;font-weight:normal;color:#ffffff;line-height:15px;text-align:right">
<span>$285</span></td>
</tr>
<tr>
<td border="0" height="30" valign="top" bgcolor="#403E3E"
colspan="2" style=
"overflow:hidden;vertical-align:top;height:30px;background-color:#403e3e;font-family:Myriad Pro,Helvetica,Arial,sans-serif;font-size:13px;font-weight:normal;color:#ffffff;line-height:15px;text-align:left">
<a href="http://-featured_url-" style=
"text-decoration:none;color:#ffffff;font-size:13px" target=
"_blank">Luxury Villas & Gourmet Meals in Puerto
Vallarta</a></td>
</tr>
<tr>
<td border="0" height="30" valign="top" bgcolor="#403E3E"
colspan="2" style=
"vertical-align:top;height:30px;background-color:#403e3e;font-family:Myriad Pro,Helvetica,Arial,sans-serif;font-size:13px;font-weight:normal;color:#ffffff;line-height:15px;text-align:left">
Puerto Vallarta, Mexico</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td border="0" bgcolor="#FFFFFF" height="15" width="100%">
</td>
</tr>
</tbody>
</table>
<table align="right" border="0" cellpadding="0" cellspacing="0" style=
"background-color:#403e3e" width="290">
<tbody>
<tr>
<td border="0" width="290"><a href=
"#147d3134c7aae5a7_147d3131083faac4_" style="border:none"><img alt=
"" border="0" height="180" src=
"https://ci6.googleusercontent.com/proxy/rhQa6yfks-smgpfVft9mFyFjy-buDbxqyC7skH8tBNv-KfX5FspdLl6GpcdipcquRGoQreMi29C5cmhGaXFp8c6kF4P84Duam0ZfHGGqQZUudPbo5dXvcAOmj2qFfCfTB3KnZEg=s0-d-e1-ft#https://img.grouponcdn.com/deal/deYNpeAfGJxahmvmev46/SV-960x582/v1/t440x300.jpg"
style="width:290px;min-height:180px;display:block" width=
"290" /></a></td>
</tr>
<tr>
<td>
<table border="0" cellpadding="7" cellspacing="0" width="100%">
<tbody>
<tr>
<td border="0" bgcolor="#403E3E" style=
"background-color:#403e3e;font-family:Myriad Pro,Helvetica,Arial,sans-serif;font-size:13px;font-weight:normal;color:#ffffff;line-height:18px;text-align:left">
<img height="15" src=
"https://ci3.googleusercontent.com/proxy/FYU-iKV58t7t1Y09W8HkB8ZvJUWC53Zs279rZhUHmFlI6GwdK9THzm1007Ty7LgiJAlwsOhpGzsZL7-IU-1WHk5fdBo80RCk0b8_Xc_LfDNnqw=s0-d-e1-ft#http://www.example.com/images/logos/partners/small/groupon.png"
style="min-height:15px" alt="Groupon" /></td>
<td border="0" bgcolor="#403E3E" style=
"background-color:#403e3e;font-family:Myriad Pro,Helvetica,Arial,sans-serif;font-size:13px;font-weight:normal;color:#ffffff;line-height:15px;text-align:right">
<span>$99</span></td>
</tr>
<tr>
<td border="0" height="30" valign="top" bgcolor="#403E3E"
colspan="2" style=
"overflow:hidden;vertical-align:top;height:30px;background-color:#403e3e;font-family:Myriad Pro,Helvetica,Arial,sans-serif;font-size:13px;font-weight:normal;color:#ffffff;line-height:15px;text-align:left">
<a href="http://-featured_url-" style=
"text-decoration:none;color:#ffffff;font-size:13px" target=
"_blank">Charming Northern Michigan Inn near Lakes</a></td>
</tr>
<tr>
<td border="0" height="30" valign="top" bgcolor="#403E3E"
colspan="2" style=
"vertical-align:top;height:30px;background-color:#403e3e;font-family:Myriad Pro,Helvetica,Arial,sans-serif;font-size:13px;font-weight:normal;color:#ffffff;line-height:15px;text-align:left">
Denton Township, MI, USA</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td border="0" bgcolor="#FFFFFF" height="15" width="100%">
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
This is a picture of how it should look (gmail):
This is a picture of how it looks in outlook 2003:
Your question is a neverending story.... few suggestions.
reset as much default value, as possible
use tables, but reset cellpadding cellspacing and border values to 0
do not use colspan, rowspan, because a few clients do not support it, and rest of the clients may handle it differently
you need to double/triple declare the css values (always write css inline, and in head style)
no margins, only padding values, and only on TD elements
always give exact width and height for images, (and apply display:block to remove unwanted spaces below)
set font-size 0 on body, and after set font-size on every element where you need, to avoid invisible characters on inline elements.
Height values on TD sometimes works, sometimes not, thats why a lot of ppl use spacer images. I recommend an empty TD with padding-top:30px is much stable....
I'm a frontend developer #EDMdesigner.com
what I'm trying to do is create a marque of images going up to down
Here is my code
<table>
<tr>
<td></td>
<td style="table-layout:fixed;border-collapse:collapse;">
<marquee direction="down">
<table >
<tr>
<td>
<img src="../Advertise/Add1.jpg" />
</td>
</tr>
<tr>
<td>
<img src="../Advertise/Add2.jpg" />
</td>
</tr>
<tr>
<td>
<img src="../Advertise/Add3.jpg" />
</td>
</tr>
</table></marquee>
<td/>
</tr>
</table>
Add1,Add2,Add3 are inside a folder
Now the problem is the size of the image was same as it is actually
i want to wrap it according to the size of my <td>
please give me suggestions how to do it
thanks in advance.
set height and width to 100% as mentioned below :
<img src="../Advertise/Add1.jpg" style="height:100%;width:100%" />
HTML:
<table>
<tr>
<td></td>
<td style="table-layout: fixed; border-collapse: collapse;">
<marquee direction="down">
<table>
<tr>
<td>
<img src="../Advertise/Add1.jpg" style="height: 100%;width: 100%" />
</td>
</tr>
<tr>
<td>
<img src="../Advertise/Add2.jpg" style="height: 100%;width: 100%" />
</td>
</tr>
<tr>
<td>
<img src="../Advertise/Add3.jpg" style="height: 100%;width: 100%" />
</td>
</tr>
</table>
</marquee>
</td>
</tr>
</table>