I have an email template that I need to update. I have to make the right image show at the bottom below repair id when it is viewed only in mobile. As of right now I have tried media queries but I had no luck but possible I didn't use correctly. Would love a solution to make it more responsive.
<style>
#media (max-width: 480px){
#productimage {
position: relative ;
top: 200px;
left: -100px;
}
}
</style>
<table align="center" border="0" cellpadding="0" cellspacing="0" width="570" style="background-image: url('https://www.marahlago.com/assets/images/ml-flower-watermark-.png'); background-repeat:no-repeat ;background-position:center;">
<tbody>
<tr>
<td height="15">
<div class="wrapper" style="width: 400px;margin-left: auto;margin-right: auto;">
<div class="top-mar-logo" style="text-align: center;padding: 40px 0px;">
<p>Dear [ADMIN NAME],</p>
<p>[FIRST NAME] has sent a repair piece. Please check the details below</p>
</div>
</div>
</td>
</tr>
<tr>
<td align="" style="border:0px solid #999999;">
<table border="0" width="100%">
<tbody>
<tr>
<td valign="top" width="60%">
<table border="0" cellpadding="4" cellspacing="" width="100%">
<tbody>
<tr>
<td><span class="text" style="color:#999999;font-family:Helvetica,Arial,sans-serif;font-size:14px;line-height:150%;"><strong>Customer Name</strong> </span></td>
<td><span class="text" style="color:#999999;font-family:Helvetica,Arial,sans-serif;font-size:14px;line-height:150%;">:</span></td>
<td><span class="text" style="color:#999999;font-family:Helvetica,Arial,sans-serif;font-size:14px;line-height:150%;">[FIRST NAME] [LAST NAME]</span></td>
</tr>
<tr>
<td><span class="text" style="color:#999999;font-family:Helvetica,Arial,sans-serif;font-size:14px;line-height:150%;"><strong>Customer Email</strong> </span></td>
<td><span class="text" style="color:#999999;font-family:Helvetica,Arial,sans-serif;font-size:14px;line-height:150%;">:</span></td>
<td><span class="text" style="color:#999999;font-family:Helvetica,Arial,sans-serif;font-size:14px;line-height:150%;">[EMAIL]</span></td>
</tr>
<tr>
<td><span class="text" style="color:#999999;font-family:Helvetica,Arial,sans-serif;font-size:14px;line-height:150%;"><strong>Product Name</strong> </span></td>
<td><span class="text" style="color:#999999;font-family:Helvetica,Arial,sans-serif;font-size:14px;line-height:150%;">:</span></td>
<td><span class="text" style="color:#999999;font-family:Helvetica,Arial,sans-serif;font-size:14px;line-height:150%;">[PRODUCT NAME]</span></td>
</tr>
<tr>
<td><span class="text" style="color:#999999;font-family:Helvetica,Arial,sans-serif;font-size:14px;line-height:150%;"><strong>Purchased On</strong> </span></td>
<td><span class="text" style="color:#999999;font-family:Helvetica,Arial,sans-serif;font-size:14px;line-height:150%;">:</span></td>
<td><span class="text" style="color:#999999;font-family:Helvetica,Arial,sans-serif;font-size:14px;line-height:150%;">[DATE]</span></td>
</tr>
<tr>
<td><span class="text" style="color:#999999;font-family:Helvetica,Arial,sans-serif;font-size:14px;line-height:150%;"><strong>Return Reason</strong></span></td>
<td><span class="text" style="color:#999999;font-family:Helvetica,Arial,sans-serif;font-size:14px;line-height:150%;">:</span></td>
<td><span class="text" style="color:#999999;font-family:Helvetica,Arial,sans-serif;font-size:14px;line-height:150%;">[CUS NOTE]</span></td>
</tr>
<tr>
<td><span class="text" style="color:#999999;font-family:Helvetica,Arial,sans-serif;font-size:14px;line-height:150%;"><strong>Repair ID</strong></span></td>
<td><span class="text" style="color:#999999;font-family:Helvetica,Arial,sans-serif;font-size:14px;line-height:150%;">:</span></td>
<td><span class="text" style="color:#999999;font-family:Helvetica,Arial,sans-serif;font-size:14px;line-height:150%;">[REPAIR ID]</span></td>
</tr>
</tbody>
</table>
</td>
<td align="center" width="40%" id="productimage"><img src="[PRODUCTIMAGE]" alt="" width="100%" height="250px" class="fr-fic fr-dii"></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
Not sure what to use.
Hope this may help you.
Please don't forget to add <meta name="viewport" content="width=device-width, initial-scale=1"> in your head tag.
#media (max-width: 480px){
.table-row{
display: block;
}
#productimage {
position: relative ;
display: block;
width:100%;
}
}
<table align="center" border="0" cellpadding="0" cellspacing="0" width="570" style="background-image: url('https://www.marahlago.com/assets/images/ml-flower-watermark-.png'); background-repeat:no-repeat ;background-position:center;">
<tbody>
<tr>
<td height="15">
<div class="wrapper" style="width: 400px;margin-left: auto;margin-right: auto;">
<div class="top-mar-logo" style="text-align: center;padding: 40px 0px;">
<p>Dear [ADMIN NAME],</p>
<p>[FIRST NAME] has sent a repair piece. Please check the details below</p>
</div>
</div>
</td>
</tr>
<tr>
<td align="" style="border:0px solid #999999;">
<table border="0" width="100%">
<tbody>
<tr class="table-row">
<td valign="top" width="60%">
<table border="0" cellpadding="4" cellspacing="" width="100%">
<tbody>
<tr>
<td><span class="text" style="color:#999999;font-family:Helvetica,Arial,sans-serif;font-size:14px;line-height:150%;"><strong>Customer Name</strong> </span></td>
<td><span class="text" style="color:#999999;font-family:Helvetica,Arial,sans-serif;font-size:14px;line-height:150%;">:</span></td>
<td><span class="text" style="color:#999999;font-family:Helvetica,Arial,sans-serif;font-size:14px;line-height:150%;">[FIRST NAME] [LAST NAME]</span></td>
</tr>
<tr>
<td><span class="text" style="color:#999999;font-family:Helvetica,Arial,sans-serif;font-size:14px;line-height:150%;"><strong>Customer Email</strong> </span></td>
<td><span class="text" style="color:#999999;font-family:Helvetica,Arial,sans-serif;font-size:14px;line-height:150%;">:</span></td>
<td><span class="text" style="color:#999999;font-family:Helvetica,Arial,sans-serif;font-size:14px;line-height:150%;">[EMAIL]</span></td>
</tr>
<tr>
<td><span class="text" style="color:#999999;font-family:Helvetica,Arial,sans-serif;font-size:14px;line-height:150%;"><strong>Product Name</strong> </span></td>
<td><span class="text" style="color:#999999;font-family:Helvetica,Arial,sans-serif;font-size:14px;line-height:150%;">:</span></td>
<td><span class="text" style="color:#999999;font-family:Helvetica,Arial,sans-serif;font-size:14px;line-height:150%;">[PRODUCT NAME]</span></td>
</tr>
<tr>
<td><span class="text" style="color:#999999;font-family:Helvetica,Arial,sans-serif;font-size:14px;line-height:150%;"><strong>Purchased On</strong> </span></td>
<td><span class="text" style="color:#999999;font-family:Helvetica,Arial,sans-serif;font-size:14px;line-height:150%;">:</span></td>
<td><span class="text" style="color:#999999;font-family:Helvetica,Arial,sans-serif;font-size:14px;line-height:150%;">[DATE]</span></td>
</tr>
<tr>
<td><span class="text" style="color:#999999;font-family:Helvetica,Arial,sans-serif;font-size:14px;line-height:150%;"><strong>Return Reason</strong></span></td>
<td><span class="text" style="color:#999999;font-family:Helvetica,Arial,sans-serif;font-size:14px;line-height:150%;">:</span></td>
<td><span class="text" style="color:#999999;font-family:Helvetica,Arial,sans-serif;font-size:14px;line-height:150%;">[CUS NOTE]</span></td>
</tr>
<tr>
<td><span class="text" style="color:#999999;font-family:Helvetica,Arial,sans-serif;font-size:14px;line-height:150%;"><strong>Repair ID</strong></span></td>
<td><span class="text" style="color:#999999;font-family:Helvetica,Arial,sans-serif;font-size:14px;line-height:150%;">:</span></td>
<td><span class="text" style="color:#999999;font-family:Helvetica,Arial,sans-serif;font-size:14px;line-height:150%;">[REPAIR ID]</span></td>
</tr>
</tbody>
</table>
</td>
<td align="center" width="40%" id="productimage"><img src="[PRODUCTIMAGE]" alt="img here" width="100%" height="250px" class="fr-fic fr-dii"></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
Related
I have a table generated through a foreach (PHP) The problem is that I want to modify some specific cell on this table (in red) Knowing that I can not add a class, I must access it with a CSS style
EDIT :
I need add style to the first and last <td>, of the last <tr> with the .child class
Indeed, it is an ajax request that creates the <tr> with .child class So sometimes there are 2 <tr> and sometimes 10 <tr>
.tb-child .child th, .tb-child .child td, .details-close {
background: #f3f3f3;
text-align: center;
}
tbody > tr.child:last-child > td:first-child {
border-radius: 4px
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet"/>
<div class="table-responsive table-padding tb-child">
<table id="data-tb" class="table table-striped table-bordered dataTable no-footer" role="grid" aria-describedby="data-tb_info">
<thead>
<tr>
<th></th>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
<th>5</th>
<th>6</th>
</tr>
</thead>
<tbody>
<tr class="5007963">
<td id="5007963"></td>
<td>
<a rel="details">5007963</a>
</td>
<td>25</td>
<td data-sort="0" class="sorting_1">
<div>25</div>
</td>
<td data-sort="68">
<div>42</div>
</td>
<td data-sort="-16">
<div>21</div>
</td>
<td></td>
</tr>
<tr class="5012152">
<td class="details-control details-close first-plan"></td>
<td>
<a rel="details">5012152</a>
</td>
<td>3000</td>
<td data-sort="-22.23">
<div>2333</div>
</td>
<td data-sort="-22.2">
<div>2334</div>
</td>
<td data-sort="-29.63">
<div>2111</div>
</td>
<td></td>
</tr>
<tr class="child 5012152">
<th></th>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
<th>5</th>
<th></th>
</tr>
<tr class="child 5012152">
<td></td>
<td>
<a rel="bin">
AZERTY1
</a>
</td>
<td>1000</td>
<td data-sort="66.7">
<div>1667</div>
</td>
<td data-sort="16.7">
<div>1167</div>
</td>
<td data-sort="44.4">
<div>1444</div>
</td>
<td></td>
</tr>
<tr class="child 5012152">
<td style="background: red"></td>
<td>
<a rel="bin">
AZERTY2
</a>
</td>
<td>1000</td>
<td data-sort="-33.3">
<div>667</div>
</td>
<td data-sort="-33.3">
<div>667</div>
</td>
<td data-sort="-66.7">
<div>333</div>
</td>
<td style="background: red"></td>
</tr>
<tr class="5012277">
<td id="5012277"></td>
<td>
<a rel="details">5012277</a>
</td>
<td>10</td>
<td data-sort="-30" class="sorting_1">
<div>7</div>
</td>
<td data-sort="-30">
<div>7</div>
</td>
<td data-sort="-30">
<div>7</div>
</td>
<td></td>
</tr>
</tbody>
</table>
</div>
jsiddle
I tried several things like:
tbody > tr.child:last-child > td:first-child {
border-radius: 4px
}
But nothing works .. How to do?
This will work for you.
I have used nth-last-child(2) to target the td's in red.
My added Code:
tbody > tr:nth-last-child(2)>td:first-child,tbody > tr:nth-last-child(2)>td:last-child {
border-radius: 4px;
}
.tb-child .child th, .tb-child .child td, .details-close {
background: #f3f3f3;
text-align: center;
}
tbody > tr:nth-last-child(2)>td:first-child,tbody > tr:nth-last-child(2)>td:last-child {
border-radius: 4px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet"/>
<div class="table-responsive table-padding tb-child">
<table id="data-tb" class="table table-striped table-bordered dataTable no-footer" role="grid" aria-describedby="data-tb_info">
<thead>
<tr>
<th></th>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
<th>5</th>
<th>6</th>
</tr>
</thead>
<tbody>
<tr class="5007963">
<td id="5007963"></td>
<td>
<a rel="details">5007963</a>
</td>
<td>25</td>
<td data-sort="0" class="sorting_1">
<div>25</div>
</td>
<td data-sort="68">
<div>42</div>
</td>
<td data-sort="-16">
<div>21</div>
</td>
<td></td>
</tr>
<tr class="5012152">
<td class="details-control details-close first-plan"></td>
<td>
<a rel="details">5012152</a>
</td>
<td>3000</td>
<td data-sort="-22.23">
<div>2333</div>
</td>
<td data-sort="-22.2">
<div>2334</div>
</td>
<td data-sort="-29.63">
<div>2111</div>
</td>
<td></td>
</tr>
<tr class="child 5012152">
<th></th>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
<th>5</th>
<th></th>
</tr>
<tr class="child 5012152">
<td></td>
<td>
<a rel="bin">
AZERTY1
</a>
</td>
<td>1000</td>
<td data-sort="66.7">
<div>1667</div>
</td>
<td data-sort="16.7">
<div>1167</div>
</td>
<td data-sort="44.4">
<div>1444</div>
</td>
<td></td>
</tr>
<tr class="child 5012152">
<td style="background: red"></td>
<td>
<a rel="bin">
AZERTY2
</a>
</td>
<td>1000</td>
<td data-sort="-33.3">
<div>667</div>
</td>
<td data-sort="-33.3">
<div>667</div>
</td>
<td data-sort="-66.7">
<div>333</div>
</td>
<td style="background: red"></td>
</tr>
<tr class="5012277">
<td id="5012277"></td>
<td>
<a rel="details">5012277</a>
</td>
<td>10</td>
<td data-sort="-30" class="sorting_1">
<div>7</div>
</td>
<td data-sort="-30">
<div>7</div>
</td>
<td data-sort="-30">
<div>7</div>
</td>
<td></td>
</tr>
</tbody>
</table>
</div>
But some of the styles are there which comes from bootstarap css so if you want to over-right them also you will have to use !important in your style.
sample -
tbody > tr:nth-last-child(2)>td:first-child,tbody > tr:nth-last-child(2)>td:last-child {
border-radius: 4px !important;
}
Hope this was helpfull for you.
I am creating HTML Emailer.
I want to have the td elements to be center in the next tr. if there is 1 td element then it should be center of tr , if there is 2 td elements then also it should be in the center of tr and if there is 3 td elements then it should be in the center of tr.
How can I do so?
I can't use any external CSS or library as I am making HTML Emailer.
I have used the below code.
<table cellspacing="0" cellpadding="0" border="0" style="background:white; text-align:center; margin: 0 auto !important; padding: 0px; width:600px !important; line-height: 100% !important; border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;font-family:Arial" >
<tbody>
<tr>
<td >
<table style="width:450px;margin:0 auto;">
<tbody>
<tr>
<td align="center">
<table style="margin:0 15px;">
<tbody>
<tr>
<td valign="middle">
<img src="http://i.imgur.com/LVHwl97.png" style="padding-right:5px;" alt="" width="18" height="18">
</td>
<td style="border-left:thin black solid; padding:0 0 0 10px;text-align:left;">
<span style="margin:0;font-size:11px;">element 1
</span>
</td>
</tr>
</tbody>
</table>
</td>
<td align="center">
<table style="margin:0 15px;">
<tbody>
<tr>
<td valign="middle">
<img src="http://i.imgur.com/LVHwl97.png" style="padding-right:5px;" alt="" width="18" height="18">
</td>
<td style="border-left:thin black solid; padding:0 0 0 10px;text-align:left;">
<span style="margin:0;font-size:11px;">element 1
</span>
</td>
</tr>
</tbody>
</table>
</td><td align="center">
<table style="margin:0 15px;">
<tbody>
<tr>
<td valign="middle">
<img src="http://i.imgur.com/LVHwl97.png" style="padding-right:5px;" alt="" width="18" height="18">
</td>
<td style="border-left:thin black solid; padding:0 0 0 10px;text-align:left;">
<span style="margin:0;font-size:11px;">element 1
</span>
</td>
</tr>
</tbody>
</table>
</td><td align="center">
<table style="margin:0 15px;">
<tbody>
<tr>
<td valign="middle">
<img src="http://i.imgur.com/LVHwl97.png" style="padding-right:5px;" alt="" width="18" height="18">
</td>
<td style="border-left:thin black solid; padding:0 0 0 10px;text-align:left;">
<span style="margin:0;font-size:11px;">element 1
</span>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td align="center">
<table style="margin:0 15px;">
<tbody>
<tr>
<td valign="middle">
<img src="http://i.imgur.com/LVHwl97.png" style="padding-right:5px;" alt="" width="18" height="18">
</td>
<td style="border-left:thin black solid; padding:0 0 0 10px;text-align:left;">
<span style="margin:0;font-size:11px;">element 1
</span>
</td>
</tr>
</tbody>
</table>
</td><td align="center">
<table style="margin:0 15px;">
<tbody>
<tr>
<td valign="middle">
<img src="http://i.imgur.com/LVHwl97.png" style="padding-right:5px;" alt="" width="18" height="18">
</td>
<td style="border-left:thin black solid; padding:0 0 0 10px;text-align:left;">
<span style="margin:0;font-size:11px;">element 1
</span>
</td>
</tr>
</tbody>
</table>
</td><td align="center">
<table style="margin:0 15px;">
<tbody>
<tr>
<td valign="middle">
<img src="http://i.imgur.com/LVHwl97.png" style="padding-right:5px;" alt="" width="18" height="18">
</td>
<td style="border-left:thin black solid; padding:0 0 0 10px;text-align:left;">
<span style="margin:0;font-size:11px;">element 1
</span>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
Any help would be great.
I'm not sure I get what you want. But I think you are looking for colspan.
<table>
<tr>
<td>Element 1</td>
<td>Element 2</td>
<td>Element 3</td>
</tr>
<tr>
<td colspan="3" style="text-align: center">Centered</td>
</tr>
</table>
Working with colspan and rowspan should also make those nested tables a little more manageable.
Your question is not clear to me ,and also you need to be cautious when nesting tables.
you can use 'colspan'
Your question is not really clear about what you want to do but if you want a pure HTML one then,
<!DOCTYPE html>
<html>
<head>
<style>
table,
th,
td {
border: 1px solid black;
}
</style>
</head>
<body>
<table style="width:100%">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td align="right">Right</td>
</tr>
<tr>
<td>February</td>
<td align="center">Centered</td>
</tr>
<tr>
<td>February</td>
<td align="left">left</td>
</tr>
</table>
</body>
</html>
Another example with colspan,
<html>
<head>
<style>
table,
th,
td {
border: 1px solid black;
}
</style>
</head>
<body>
<table style="width:100%">
<tr style="text-align:center">
<td>Month</td>
<td>Savings</td>
<td>Gone</td>
</tr>
<tr>
<td colspan="3">
<table style="width:100%">
<tr style="text-align:center;">
<td>
test
</td>
<td>
test2
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
You need to make use of colspan and text-align: center. Just remember that if a column has less than the maximum number of TDs in it, then colspan must be set to that. So below the columns with one and two TDs are set to 3 to line up with the one with three. I put the two TDs in an individual table which is also another techniques you can use to have different TDs in a TR. Note that the TD the table is in also has its colspan declared as 3 they must also be equal.
Think of it in an excel sheet, you have column a, b, c and so on. If you want a column to be the centre of three then it has to cross a, b and c.
<table cellspacing="1" cellpadding="0" border="1" style=" width:100%; text-align:center;">
<tr>
<td colspan="3">ipsum</td>
</tr>
<tr>
<td colspan="3">
<table cellspacing="1" cellpadding="0" border="1" style=" width:100%; text-align:center;">
<tr>
<td>ipsum</td>
<td>ipsum</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>ipsum</td>
<td>ipsum</td>
<td>ipsum</td>
</tr>
</table>
I think what you need is the hybrid approach. It requires more code than what you might be used to.
To see the code in action:
Run the code snippet, do full screen and resize your browser.
Hybrid method of coding:
Hybrid coding uses outlook conditional statements to create the columns specifically for outlook while all other email clients read the div tags to create the columns.
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<!--[if (gte mso 9)|(IE)]>
<table width="600" align="center" cellpadding="0" cellspacing="0" border="0">
<tr>
<td align="left" valign="top" width="600">
<![endif]-->
<table class="container hundred" width="100%" border="0" align="center" cellpadding="0" cellspacing="0" style="width:100%; max-width: 600px;">
<tr>
<!-- 5 column starts -->
<td style="text-align: center; vertical-align: top; font-size: 0px; padding: 0px;">
<!--[if (gte mso 9)|(IE)]>
<table width="600" align="center" cellpadding="0" cellspacing="0" border="0">
<tr>
<td align="left" valign="top" width="120">
<![endif]-->
<div style="width:20%;min-width:120px; display: inline-block; vertical-align: top;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="font-size:12px; font-family:Arial; color:#000000;">Column 1 of 5</td>
</tr>
</tbody>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td><td align="left" valign="top" width="120">
<![endif]-->
<div style="width:20%;min-width:120px; display: inline-block; vertical-align: top;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="font-size:12px; font-family:Arial; color:#000000;">Column 2 of 5</td>
</tr>
</tbody>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td><td align="left" valign="top" width="120">
<![endif]-->
<div style="width:20%;min-width:120px; display: inline-block; vertical-align: top;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="font-size:12px; font-family:Arial; color:#000000;">Column 3 of 5</td>
</tr>
</tbody>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td><td align="left" valign="top" width="120">
<![endif]-->
<div style="width:20%;min-width:120px; display: inline-block; vertical-align: top;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="font-size:12px; font-family:Arial; color:#000000;">Column 4 of 5</td>
</tr>
</tbody>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td><td align="left" valign="top" width="120">
<![endif]-->
<div style="width:20%;min-width:120px; display: inline-block; vertical-align: top;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="font-size:12px; font-family:Arial; color:#000000;">Column 5 of 5</td>
</tr>
</tbody>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
<!-- 5 column ends -->
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</table>
Hope this is the answer you were looking for.
Cheers
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>
My html code with inline css:
<div id="ggicci_syntax_highlighter" style="border: solid 3px black; cursor: text; overflow-x: auto; width: 100%;">
<table id="ggicci_outer_table" cellspacing="0" style="font-family:Consolas;">
<colgroup>
<col style="background-color: #44F;"><!-- You can set font here -->
<col style="background-color: #f4f4f4; width: 100%;">
</colgroup>
<tr>
<td></td><!-- corner -->
<td id="ggicci_language_text" style="font-size:25px; color: #777; font-family: Arial Black;"> <!-- header -->
C++
</td>
</tr>
<tr>
<td>
<table id="ggicci_line_number" style="font-size: 14px; color: #DDD;"><!-- You can set style here -->
<tr>
<td>1:</td>
</tr>
<tr>
<td>2:</td>
</tr>
<tr>
<td>3:</td>
</tr>
<tr>
<td>4:</td>
</tr>
<tr>
<td>5:</td>
</tr>
<tr>
<td>6:</td>
</tr>
<tr>
<td>7:</td>
</tr>
<tr>
<td>8:</td>
</tr>
</table>
</td>
<td>
<table id="ggicci_code_body" style="font-size: 14px; width: 100%;"><!-- You can set style here -->
<tr>
<td style="background: #FFF">
<span style="color:#FF7700; font-weight:bold;">#include</span> <iostream>
</td>
</tr>
<tr>
<td>
<span style="color:blue; font-weight:bold;">using</span> namespace std;
</td>
</tr>
<tr>
<td style="background: #FFF">
</td>
</tr>
<tr>
<td>
<span style="color:blue; font-weight:bold;">int</span> main()
</td>
</tr>
<tr>
<td style="background:#FFF;">
{
</td>
</tr>
<tr>
<td>
std::cout << <span style="color:#EB2244;">"Hello World!"</span> << std::endl;<span style="color:green;">//write "Hello World!" to console............................................................</span>
</td>
</tr>
<tr>
<td style="background: #FFF"> <span style="color:blue; font-weight:bold;">return</span> 0;</td>
</tr>
<tr>
<td>
}
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
and I can't make the content in div scroll when the text in a line in the table where the id is "ggicci_code_body" overflows. I'm new to css and now I'm designing a syntax highlighter for programming practice. So any solution? and why this can't work?
Add '<!doctype html>' at the start of html file.
I have a designed landing page in asp.net 4.0 i am using repeater control to generate Boxes.
Issue is that it looks good in FF and Crome but design move up adds space under image and look smessy. it is pretty clear from the screen shot also
<div id="bodyContainer" class="bodyContainer">
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td width="32px" ></td>
<td width="836px" valign="top">
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td height="32px" width="836px" >
</td>
</tr>
<tr>
<td height="400px" width="836px" valign="top">
<!--Table Frame for 4 Article & Top 10 -->
<table border="0" cellpadding="0" cellspacing="0" width="836">
<tr>
<td height="330" valign="top" style="width: 616px;">
<!--Table Frame for 4 Article -->
<a id="MainContent_rpt4x4_hylTopFour_0" href="ArticleDetails.aspx?Language=en-US&PageID=19&ArticleID=4" style="display:inline-block;border-width:0px;">
<div id="articleContainer" class="articleContainer" >
<table border="0" cellpadding="0" cellspacing="0" width="281">
<tr>
<td colspan="3" width="280" height="252">
<img id="MainContent_rpt4x4_imgTopFourImg_0" border="0" src="ImagesArticles/f615fc99-e844-4872-86a8-bfbf5eea7d09.jpg" style="height:252px;width:281px;" />
</td>
</tr>
<tr>
<td colspan="3" width="280" height="28" bgcolor="#B49850" >
<div class="Title4x4" >
<span id="MainContent_rpt4x4_lblTopFourTitle_0">This is the first article used fo...</span>
</div>
</td>
</tr>
<tr>
<td rowspan="2" width="80" height="47" bgcolor="#B49850" valign="middle">
<div class="Date4x4">
<span id="MainContent_rpt4x4_lblTopFourDate_0">30/01/12</span>
</div>
</td>
<td rowspan="2" width="5" height="47" bgcolor="#B49850" valign="top">
<div style="background-color:White; height:35px; width:1px;"></div>
</td>
<td bgcolor="#B49850" class="Desc4x4" >
<div style="margin-left:10px; margin-right:10px;" >
<span id="MainContent_rpt4x4_lblTopFourDesc_0">Brief description of the article will go here and so on. Brief description of the article will go he...</span>
</div>
</td>
</tr>
<tr>
<td bgcolor="#B49850" align="right" class="more4x4">
<div style="margin-left:10px; margin-right:10px;">
<a id="MainContent_rpt4x4_hylTopFourLink_0">read more...</a>
</div>
</td>
</tr>
</table>
</div>
</a>
<a id="MainContent_rpt4x4_hylTopFour_1" href="ArticleDetails.aspx?Language=en-US&PageID=19&ArticleID=40" style="display:inline-block;border-width:0px;">
<div id="articleContainer" class="articleContainer" >
<table border="0" cellpadding="0" cellspacing="0" width="281">
<tr>
<td colspan="3" width="280" height="252">
<img id="MainContent_rpt4x4_imgTopFourImg_1" border="0" src="ImagesArticles/68244457-bd36-4560-b9b4-88cefb810501.jpg" style="height:252px;width:281px;" />
</td>
</tr>
<tr>
<td colspan="3" width="280" height="28" bgcolor="#B49850" >
<div class="Title4x4" >
<span id="MainContent_rpt4x4_lblTopFourTitle_1">Al Habtoor Group unveils its late...</span>
</div>
</td>
</tr>
<tr>
<td rowspan="2" width="80" height="47" bgcolor="#B49850" valign="middle">
<div class="Date4x4">
<span id="MainContent_rpt4x4_lblTopFourDate_1">19/01/12</span>
</div>
</td>
<td rowspan="2" width="5" height="47" bgcolor="#B49850" valign="top">
<div style="background-color:White; height:35px; width:1px;"></div>
</td>
<td bgcolor="#B49850" class="Desc4x4" >
<div style="margin-left:10px; margin-right:10px;" >
<span id="MainContent_rpt4x4_lblTopFourDesc_1">The Al Habtoor Group revealed today, in a press conference held at the Metropolitan Hotel, the launc...</span>
</div>
</td>
</tr>
<tr>
<td bgcolor="#B49850" align="right" class="more4x4">
<div style="margin-left:10px; margin-right:10px;">
<a id="MainContent_rpt4x4_hylTopFourLink_1">read more...</a>
</div>
</td>
</tr>
</table>
</div>
</a>
<a id="MainContent_rpt4x4_hylTopFour_2" href="ArticleDetails.aspx?Language=en-US&PageID=19&ArticleID=36" style="display:inline-block;border-width:0px;">
<div id="articleContainer" class="articleContainer" >
<table border="0" cellpadding="0" cellspacing="0" width="281">
<tr>
<td colspan="3" width="280" height="252">
<img id="MainContent_rpt4x4_imgTopFourImg_2" border="0" src="ImagesArticles/272216fd-d6e4-43e1-8a91-8fd3fa539dd5.jpg" style="height:252px;width:281px;" />
</td>
</tr>
<tr>
<td colspan="3" width="280" height="28" bgcolor="#B49850" >
<div class="Title4x4" >
<span id="MainContent_rpt4x4_lblTopFourTitle_2">The largest mosque in Dubai opens...</span>
</div>
</td>
</tr>
<tr>
<td rowspan="2" width="80" height="47" bgcolor="#B49850" valign="middle">
<div class="Date4x4">
<span id="MainContent_rpt4x4_lblTopFourDate_2">29/07/11</span>
</div>
</td>
<td rowspan="2" width="5" height="47" bgcolor="#B49850" valign="top">
<div style="background-color:White; height:35px; width:1px;"></div>
</td>
<td bgcolor="#B49850" class="Desc4x4" >
<div style="margin-left:10px; margin-right:10px;" >
<span id="MainContent_rpt4x4_lblTopFourDesc_2">Come the last Friday before holy month Ramadan, another landmark would be added to Dubai’s celebrate...</span>
</div>
</td>
</tr>
<tr>
<td bgcolor="#B49850" align="right" class="more4x4">
<div style="margin-left:10px; margin-right:10px;">
<a id="MainContent_rpt4x4_hylTopFourLink_2">read more...</a>
</div>
</td>
</tr>
</table>
</div>
</a>
<a id="MainContent_rpt4x4_hylTopFour_3" href="ArticleDetails.aspx?Language=en-US&PageID=19&ArticleID=38" style="display:inline-block;border-width:0px;">
<div id="articleContainer" class="articleContainer" >
<table border="0" cellpadding="0" cellspacing="0" width="281">
<tr>
<td colspan="3" width="280" height="252">
<img id="MainContent_rpt4x4_imgTopFourImg_3" border="0" src="ImagesArticles/d138d1f9-4712-40c5-9559-81cc9c4fa474.jpg" style="height:252px;width:281px;" />
</td>
</tr>
<tr>
<td colspan="3" width="280" height="28" bgcolor="#B49850" >
<div class="Title4x4" >
<span id="MainContent_rpt4x4_lblTopFourTitle_3">Al Farooq Omar Mosque in Jumeirah...</span>
</div>
</td>
</tr>
<tr>
<td rowspan="2" width="80" height="47" bgcolor="#B49850" valign="middle">
<div class="Date4x4">
<span id="MainContent_rpt4x4_lblTopFourDate_3">29/07/11</span>
</div>
</td>
<td rowspan="2" width="5" height="47" bgcolor="#B49850" valign="top">
<div style="background-color:White; height:35px; width:1px;"></div>
</td>
<td bgcolor="#B49850" class="Desc4x4" >
<div style="margin-left:10px; margin-right:10px;" >
<span id="MainContent_rpt4x4_lblTopFourDesc_3">Al Farooq Omar Mosque in Jumeirah: The Most Modern Mosque in the Region</span>
</div>
</td>
</tr>
<tr>
<td bgcolor="#B49850" align="right" class="more4x4">
<div style="margin-left:10px; margin-right:10px;">
<a id="MainContent_rpt4x4_hylTopFourLink_3">read more...</a>
</div>
</td>
</tr>
</table>
</div>
</a>
<!--Table Frame for 4 Article -->
</td>
<td width="220" height="330" valign="top">
<!--Table Frame for Top 10 Article -->
<div id="Top10container" class="Top10Container">
<div id="Top10NesCon" class="Top10NesCon" >
<table cellpadding="0" cellspacing="0" width="206px" align="left" border="0">
<tr>
<td height="30px" >
<a id="MainContent_hylTop10Viewed" class="Top10Heading" href="Archive-Most-Viewed.aspx?Language=en-US&PageID=21">TOP 10 VIEWED ARTICLES</a>
</td>
</tr>
<tr>
<td class="Top10Divider"></td>
</tr>
<tr>
<td class="Top10DividerSpace"></td>
</tr>
<tr>
<td class="Top10links">
<table id="MainContent_dlTop10" cellspacing="0" style="border-collapse:collapse;">
<tr>
<td>
<table cellpadding="0" cellspacing="0" width="206px" >
<tr>
<td width="23px" valign="top" align="centre">
<div id="Top10Bullet" class="Top10Bullet">
<span id="MainContent_dlTop10_lblSnNo_0">1</span>
</div>
</td>
<td width="184px" valign="top" align="left" >
<a id="MainContent_dlTop10_hylTopTen_0" href="ArticleDetails.aspx?Language=en-US&PageID=19&ArticleID=4" style="display:inline-block;border-width:0px;text-decoration:none;">
<div id="Top10ArticleHeading" class="Top10ArticleHeading">
<span id="MainContent_dlTop10_lblTopFourTitle_0">This is the first art...</span>
</div>
<div id="Top10ArticleDesc" class="Top10ArticleDesc">
<span id="MainContent_dlTop10_lblTopFourDesc_0">Brief description of the article will go here and so on. Brief description of the article...</span>
</div>
</a>
</td>
</tr>
<tr>
<td class="Top10Space"></td>
</tr>
</table>
</td>
</tr><tr>
<td>
<table cellpadding="0" cellspacing="0" width="206px" >
<tr>
<td width="23px" valign="top" align="centre">
<div id="Top10Bullet" class="Top10Bullet">
<span id="MainContent_dlTop10_lblSnNo_1">2</span>
</div>
</td>
<td width="184px" valign="top" align="left" >
<a id="MainContent_dlTop10_hylTopTen_1" href="ArticleDetails.aspx?Language=en-US&PageID=19&ArticleID=40" style="display:inline-block;border-width:0px;text-decoration:none;">
<div id="Top10ArticleHeading" class="Top10ArticleHeading">
<span id="MainContent_dlTop10_lblTopFourTitle_1">Al Habtoor Group unve...</span>
</div>
<div id="Top10ArticleDesc" class="Top10ArticleDesc">
<span id="MainContent_dlTop10_lblTopFourDesc_1">The Al Habtoor Group revealed today, in a press conference held at the Metropolitan Hotel,...</span>
</div>
</a>
</td>
</tr>
<tr>
<td class="Top10Space"></td>
</tr>
</table>
</td>
</tr><tr>
<td>
<table cellpadding="0" cellspacing="0" width="206px" >
<tr>
<td width="23px" valign="top" align="centre">
<div id="Top10Bullet" class="Top10Bullet">
<span id="MainContent_dlTop10_lblSnNo_2">3</span>
</div>
</td>
<td width="184px" valign="top" align="left" >
<a id="MainContent_dlTop10_hylTopTen_2" href="ArticleDetails.aspx?Language=en-US&PageID=19&ArticleID=38" style="display:inline-block;border-width:0px;text-decoration:none;">
<div id="Top10ArticleHeading" class="Top10ArticleHeading">
<span id="MainContent_dlTop10_lblTopFourTitle_2">Al Farooq Omar Mosque...</span>
</div>
<div id="Top10ArticleDesc" class="Top10ArticleDesc">
<span id="MainContent_dlTop10_lblTopFourDesc_2">Al Farooq Omar Mosque in Jumeirah: The Most Modern Mosque in the Region</span>
</div>
</a>
</td>
</tr>
<tr>
<td class="Top10Space"></td>
</tr>
</table>
</td>
</tr><tr>
<td>
<table cellpadding="0" cellspacing="0" width="206px" >
<tr>
<td width="23px" valign="top" align="centre">
<div id="Top10Bullet" class="Top10Bullet">
<span id="MainContent_dlTop10_lblSnNo_3">4</span>
</div>
</td>
<td width="184px" valign="top" align="left" >
<a id="MainContent_dlTop10_hylTopTen_3" href="ArticleDetails.aspx?Language=en-US&PageID=19&ArticleID=11" style="display:inline-block;border-width:0px;text-decoration:none;">
<div id="Top10ArticleHeading" class="Top10ArticleHeading">
<span id="MainContent_dlTop10_lblTopFourTitle_3">How can we over come...</span>
</div>
<div id="Top10ArticleDesc" class="Top10ArticleDesc">
<span id="MainContent_dlTop10_lblTopFourDesc_3">How can we over come recession How can we over come recession How can we over come recessi...</span>
</div>
</a>
</td>
</tr>
<tr>
<td class="Top10Space"></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr class="Top10Footer" >
<td ><a id="MainContent_hylReadMoreTop10" class="Top10Footer" href="Archive-Most-Viewed.aspx?Language=en-US&PageID=21">read more...</a></td>
</tr>
</table>
</div>
</div>
<!--Table Frame for Top 10 Article -->
<!-- Banner -->
<div id="divBannerWrapper" class="BannerWrapper">
<img id="MainContent_imgBanner1" class="BannerRightImg" src="images/up1.jpg" />
<img id="MainContent_imgBanner2" class="BannerRightImg" src="images/up2.jpg" />
</div>
<!-- Banner -->
</td>
</tr>
</table>
<!--Table Frame for 4 Article & Top 10 -->
</td>
</tr>
</table>!
</td>
<td width="32px" valign="top" >
</td>
</tr>
</table>
<div style="height:15px";></div>
</div>
</div>
I am also adding CSS which i use for these elements
.articleContainer
{
cursor:pointer;
width:281px;
height:328px;
position:relative;
float:left;
margin-right:22px;
margin-bottom:21px;
display: block;
}
In Firefox and Crome looks good
![In Firefox and Crome looks good ][1]
IE 9 Screen Shot Look bad underline links removes padding on right and bottom and adds space below the image. which give it really bad look. When i view same in IE 9 Standard mode it come up fine. So i am not sure why it is happening as i am not a CSS design pro.
![IE 9 Screen Shot Look bad][2]
I tried to fix it for quite some time but cant find the source of problem so that i can work on.
Issue was resolved by fixing the CSS