I am trying to align my table to the right of my invoice page like this:
I place these two tables in the same row and into two columns but however, it's not working as intended. I want the 2nd table to be on the highlighted blue section of the page.
Below is my code:
<div class="row">
<div class="col-4 col-md-4 col-sm-5 " >
<table class="table table-bordered ">
<th><strong> Payment Received </strong></th>
<tbody>
<tr style="page-break-after: always;">
<td class="left">
Payment Method: xxxxxx
</td>
</tr>
<tr>
<td class="left">
Reference No: 2192012
</td>
</tr>
<tr>
<td class="left">
Amount Paid: RM10,000.00
</td>
</tr>
<tbody>
</table>
<div>
<div class="col-4 col-md-4 col-sm-5 mr-auto ">
<table class="table table-clear">
<tbody>
<tr>
<td class="left">
<strong>Subtotal</strong>
</td>
<td class="right">8.497,00</td>
</tr>
<tr>
<td class="left">
<strong>Transportation(Klang Valley)</strong>
</td>
<td class="right">1,699,40</td>
</tr>
<tr>
<td class="left">
<strong>Transportation(Outstation)</strong>
</td>
<td class="right">679,76</td>
</tr>
<tr>
<td class="left">
<strong> Grand Total</strong>
</td>
<td class="right">
<strong>7.477,36</strong>
</td>
</tr>
<tr>
<td class="left">
<strong> Discount</strong>
</td>
<td class="right">
20%
</td>
</tr>
<tr>
<td class="left">
<strong> Amount Paid</strong>
</td>
<td class="right">
7.477,36
</td>
</tr>
<tr>
<td class="left">
<strong> Balance Due</strong>
</td>
<td class="right">
<strong>7.477,36</strong>
</td>
</tr>
</tbody>
</table>
</div>
</div>
I am not sure why it would not align to the right since they share the same row.
What did I do wrong?
Issues
<div> not closed properly
Use ml-auto instead of mr-auto
Working Demo
https://www.codeply.com/p/86T67T7NFV
Related
I have the following table:
<table class="neo-table">
<tr>
<td>Day of final discharge home</td>
<td>{{ form_widget(form.mHomeDischargeDay, {'id': 'M_Home_discharge_day', 'attr':{'style':'width:60px'}})}}</td>
<td><input type="button" value="enter date" onclick="convertDate('M_Home_discharge_day')"></td>
</tr>
<tr>
<td >Weight at final discharge</td>
<td colspan="2"><div class="input-group">{{ form_widget(form.mHomeWeight, {'attr':{'style':'width:80px'}})}}<div class="input-group-addon">g</div> </div></td>
</tr>
<tr>
<td >Head circumference at final discharge</td>
<td colspan="2"><div class="input-group">{{ form_widget(form.mHomeHeadCirc, {'attr':{'style':'width:80px'}})}}<div class="input-group-addon">cm</div> </div></td>
</tr>
<tr>
<td>Length at final discharge</td>
<td colspan="2"><div class="input-group">{{ form_widget(form.mHomeLength, {'attr':{'style':'width:80px'}})}}<div class="input-group-addon">cm</div></div></td>
</tr>
<tr>
<td>Enteral feeding at final discharge</td>
<td>{{ form_widget(form.mHomeFeeding)}}</td>
<td></td>
</tr>
</table>
On the chrome browser, it works fine and displays this:
But on the mozilla browser, the group addon is not correctly aligned:
I tried adding this:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.3/css/bootstrap.min.css" rel="stylesheet"/>
Like mentioned on this post:
Input group addon alignment
But I have not been able to figure out so far where I can fix this issue.
Edit:
Here is a simplified version of the problem:
<table style="width: 100%";>
<tr>
<td>row1 col1</td>
<td>row1 col2</td>
<td>row1 col3</td>
</tr>
<tr>
<td >row2 col1</td>
<td colspan="2"><div class="input-group">row2 col2<div class="input-group-addon">row2 col2</div> </div></td>
</tr>
</table>
With the code above, I get the following result on mozilla:
I would like "row2 col2" to be in the immediate right vicinity of "row2col2"
What is the way to do this?
I solved the problem by wrapping input group addons with divs as shown below:
It works fine for Chrome and Mozilla.
<table class="neo-table">
<tr>
<td>Day of final discharge home</td>
<td>
<div class="row" style='margin-bottom: 5px'>
<div style='white-space: nowrap'>
<div class='col-xs-5'>
<div class='col-xs-2'>{{ form_widget(form.mHomeDischargeDay, {'id': 'M_Home_discharge_day', 'attr':{'style':'width:60px'}})}}</div>
</div>
</div>
</div>
</td>
<td><input type="button" value="enter date" onclick="convertDate('M_Home_discharge_day')"></td>
</tr>
<tr>
<td>Weight at final discharge</td>
<td>
<div class="row" style='margin-bottom: 5px'>
<div style='white-space: nowrap'>
<div class='col-xs-5'>
<div class='col-xs-2'><div class="input-group">{{ form_widget(form.mHomeWeight, {'attr':{'style':'width:80px'}})}}<div class="input-group-addon">g</div></div></div>
</div>
</div>
</div>
</td>
<td></td>
</tr>
<tr>
<td>Head circumference at final discharge</td>
<td>
<div class="row" style='margin-bottom: 5px'>
<div style='white-space: nowrap'>
<div class='col-xs-5'>
<div class='col-xs-2'><div class="input-group">{{ form_widget(form.mHomeHeadCirc, {'attr':{'style':'width:80px'}})}}<div class="input-group-addon">cm</div></div></div>
</div>
</div>
</div>
</td>
<td></td>
</tr>
<tr>
<td>Length at final discharge</td>
<td>
<div class="row" style='margin-bottom: 5px'>
<div style='white-space: nowrap'>
<div class='col-xs-5'>
<div class='col-xs-2'><div class="input-group">{{ form_widget(form.mHomeLength, {'attr':{'style':'width:80px'}})}}<div class="input-group-addon">cm</div></div></div>
</div>
</div>
</div>
</td>
<td></td>
</tr>
<tr>
<td>Congenital malformation</td>
<td>{{ form_widget(form.mBdefect)}}</td>
<td colspan="3">{{ form_widget(form.mBdefectSpecific, {'attr':{'style':'width:250px'}})}}</td>
</tr>
<tr>
<td>Enteral feeding at final discharge</td>
<td>{{ form_widget(form.mHomeFeeding)}}</td>
<td></td>
</tr>
</table>
As using Bootstrap 4, I'm aware the .col-xs are dropped, instead of .col, I have tested on bootstrap 3.5 which I'm using
<div class="col-xs-4">
Table left side goes here
</div>
<div class="col-xs-8">
Table right side goes here
</div>
And it works fine, as you can see it from here.
however, it's a bit different on Bootstrap 4 Alpha.
<div class="col-2">
<h2 class="sub-header">Test Arear</h2>
<div class="table-responsive">
<table class="table table-striped">
<tbody>
<tr>
<td class="col-md-1">Test</td>
</tr>
<tr>
<td class="col-md-1">Test 2</td>
</tr>
<tr>
<td class="col-md-1">Test 3</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="col-10">
<h2 class="sub-header">Ticket Number</h2>
<div class="table-responsive">
<table class="table table-striped">
<tbody>
<tr>
<td class="col-md-1">1,001</td>
<td class="col-md-2">1,002</td>
<td class="col-md-3">1,003</td>
</tr>
<tr>
<td class="col-md-1">1,004</td>
<td class="col-md-2">1,005</td>
<td class="col-md-3">1,006</td>
</tr>
<tr>
<td class="col-md-1">1,002</td>
<td class="col-md-2">1,021</td>
<td class="col-md-3">1,023</td>
</tr>
</tbody>
</table>
</div>
</div>
As you can see results from here.
I want it on the side by side table but it's not side by side. Am I missing something?
You need a row wrapper as bootstrap four is done on flex rather than floats so the columns now need to be wrapped to make them into columns
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap-grid.css" rel="stylesheet"/>
<div class="row">
<div class="col-2">
<h2 class="sub-header">Test Arear</h2>
<div class="table-responsive">
<table class="table table-striped">
<tbody>
<tr>
<td class="col-md-1">Test</td>
</tr>
<tr>
<td class="col-md-1">Test 2</td>
</tr>
<tr>
<td class="col-md-1">Test 3</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="col-10">
<h2 class="sub-header">Ticket Number</h2>
<div class="table-responsive">
<table class="table table-striped">
<tbody>
<tr>
<td class="col-md-1">1,001</td>
<td class="col-md-2">1,002</td>
<td class="col-md-3">1,003</td>
</tr>
<tr>
<td class="col-md-1">1,004</td>
<td class="col-md-2">1,005</td>
<td class="col-md-3">1,006</td>
</tr>
<tr>
<td class="col-md-1">1,002</td>
<td class="col-md-2">1,021</td>
<td class="col-md-3">1,023</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
Example Bootply
I am using Ink to try and create an order confirmation e-mail from an ecommerce store. If I have a table that shows item info or any sort of data I layout, the last column is crunched to one character width when resizing to small. Example code in a 6-column cell is attached for code as well as the output screenshot.
Any ideas how I can fix this?
<table class="six columns">
<tr>
<td>
<table width="100%">
<tr>
<td>Subtotal</td>
<td>$60.00</td>
</tr>
<tr>
<td>Shipping & Handling</td>
<td>$11.91</td>
</tr>
<tr>
<td><strong>Grand Total</strong></td>
<td><strong>$71.91</strong></td>
</tr>
</table>
</td>
<td class="expander"></td>
</tr>
</table>
A Ink sub-grid would be useful here.
HTML
<table class="body">
<tr>
<td class="center" align="center" valign="top">
<div class="c1">
<table class="row">
<tr>
<td class="wrapper">
<table class="twelve columns">
<tr>
<td class="ten sub-columns">Subtotal</td>
<td class="two sub-columns last">$10</td>
<td class="expander"></td>
</tr>
</table>
</td>
</tr>
</table>
<table class="row">
<tr>
<td class="wrapper">
<table class="twelve columns">
<tr>
<td class="ten sub-columns">S&H</td>
<td class="two sub-columns last">$2</td>
<td class="expander"></td>
</tr>
</table>
</td>
</tr>
</table>
<table class="row">
<tr>
<td class="wrapper">
<table class="twelve columns">
<tr>
<td class="ten sub-columns">Total</td>
<td class="two sub-columns last">$12</td>
<td class="expander"></td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
Screenshot
Here's the demo.
I think Ink is only for creating responsive e-mail layouts. If you want something more, you can use standard HTML. So <table> with <tr>, <td> and <th>.
I've a html where i want a particular cell to be aligned to left. below is the code and fiddle link.
HTML:
<section class="tr_chapter">
<div class="chapter"><a name="HKWBV1_ORD_89"></a>
<div class="toc">
<div class="toc-part">
<table class="toc-div">
<tbody>
<tr>
<td>
<table class="toc-item-third-level">
<tbody>
<tr>
<td></td>
<td class="toc-item-num-left"><span class="font-style-bold">Contents</span></td>
<td class="toc-title"></td>
<td class="toc-pg"><span class="font-style-italic">para.</span></td>
</tr>
<tr>
<td>4/0/1</td> <td class="toc-item-num-left">1.</td>
<td class="toc-title">Companies (O.4, r.2)</td>
<td class="toc-pg">4/2</td>
</tr>
<tr>
<td></td>
<td class="toc-item-num-left">2.</td>
<td class="toc-title">Consolidation, etc., of causes or matters (O.4, r.9)</td>
<td class="toc-pg">4/9</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</section>
I want the output as given in the below image. i.e. the number (4/0/1). please let me know how can i do it.
Fiddle
Thanks
If you want the cell with the number 4/0/1 aligned left simply give align="left" to the parent td or add to it a class with text-align:left;
See: jsfiddle
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