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