Forum Moderators: not2easy
* In Firefox it's displayed perfectly with a straight left border (red)
<snip>
* In IE8 it's messed up , the red border and the cells at right are not aligned well.
<snip>
* In IE7 there border is not even displayed
<snip>
My code: <snip> (It can be deleted so I paste it here as well)
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>Test</title>
</head>
<body>
<td colspan="4">
<table id="TheTable" cellspacing="0" cellpadding="0" class="TheTable" style="display:inline;" >
<tr id="ctl00_ctl00_theid" style="display:none;">
</tr>
<tr class ="CategoryRow">
<td class="style1">
<div id="ctl01_ctl00_diver" class="ElementRowDiv" style="margin-left:20px;;">
<span id="ctl01_ctl00_DescriptionLabel" class="CategoryName">Sport</span>
</div>
</td>
<td class="style2">
<span id="ctl01_ctl00_Label2">Add Subcategory</span>
</td>
<td class="style3">
<span id="ctl01_ctl00_Label1">Edit</span>
</td>
</tr>
<td colspan="4">
<table id="TheTable" cellspacing="0" cellpadding="0" class="TheTable" style="display:inline;" >
<tr id="ctl01_Repeater1_ctl00_ctl00_Button3" style="display:none;">
</tr>
<tr class ="CategoryRow">
<td class="style1">
<div id="ctl01_Repeater1_ctl01_ctl00_diver" class="ElementRowDiv" style="margin-left:40px;;">
<span id="ctl01_Repeater1_ctl01_ctl00_DescriptionLabel" class="CategoryName">Soccer</span>
</div>
</td>
<td class="style2">
<span id="ctl01_Repeater1_ctl01_ctl00_Label2">Add Subcategory</span>
</td>
<td class="style3">
<span id="ctl01_Repeater1_ctl01_ctl00_Label1">Edit</span>
</td>
</tr>
<tr class ="CategoryRow">
<td class="style1">
<div id="ctl01_Repeater1_ctl02_ctl00_diver" class="ElementRowDiv" style="margin-left:40px;;">
<span id="ctl01_Repeater1_ctl02_ctl00_DescriptionLabel" class="CategoryName">Tennis</span>
</div>
</td>
<td class="style2">
<span id="ctl01_Repeater1_ctl02_ctl00_Label2">Add Subcategory</span>
</td>
<td class="style3">
<span id="ctl01_Repeater1_ctl02_ctl00_Label1">Edit</span>
</td>
</tr>
</table>
</td>
<tr class ="CategoryRow">
<td class="style1">
<div id="ctl02_ctl00_diver" class="ElementRowDiv" style="margin-left:20px;;">
<span id="ctl02_ctl00_DescriptionLabel" class="CategoryName">Computers</span>
</div>
</td>
<td class="style2">
<span id="ctl02_ctl00_Label2">Add Subcategory</span>
</td>
<td class="style3">
<span id="ctl02_ctl00_Label1">Edit</span>
</td>
</tr>
<td colspan="4">
<table id="TheTable" cellspacing="0" cellpadding="0" class="TheTable" style="display:inline;" >
<tr id="ctl02_Repeater1_ctl00_ctl00_Button10" style="display:none;">
</tr>
<tr class ="CategoryRow">
<td class="style1">
<div id="ctl02_Repeater1_ctl01_ctl00_diver" class="ElementRowDiv" style="margin-left:40px;;">
<span id="ctl02_Repeater1_ctl01_ctl00_DescriptionLabel" class="CategoryName">PC</span>
</div>
</td>
<td class="style2">
<span id="ctl02_Repeater1_ctl01_ctl00_Label2">Add Subcategory</span>
</td>
<td class="style3">
<span id="ctl02_Repeater1_ctl01_ctl00_Label1">Edit</span>
</td>
</tr>
<td colspan="4">
<table id="TheTable" cellspacing="0" cellpadding="0" class="TheTable" style="display:inline;" >
<tr id="ctl02_Repeater1_ctl01_Repeater1_ctl00_ctl00_Button10" style="display:none;">
</tr>
<tr class ="CategoryRow">
<td class="style1">
<div id="ctl02_Repeater1_ctl01_Repeater1_ctl01_ctl00_diver" class="ElementRowDiv" style="margin-left:60px;;">
<span id="ctl02_Repeater1_ctl01_Repeater1_ctl01_ctl00_DescriptionLabel" class="CategoryName">WinXP</span>
</div>
</td>
<td class="style2">
<span id="ctl02_Repeater1_ctl01_Repeater1_ctl01_ctl00_Label2">Add Subcategory</span>
</td>
<td class="style3">
<span id="ctl02_Repeater1_ctl01_Repeater1_ctl01_ctl00_Label1">Edit</span>
</td>
</tr>
<tr class ="CategoryRow">
<td class="style1">
<div id="ctl02_Repeater1_ctl01_Repeater1_ctl02_ctl00_diver" class="ElementRowDiv" style="margin-left:60px;;">
<span id="ctl02_Repeater1_ctl01_Repeater1_ctl02_ctl00_DescriptionLabel" class="CategoryName">Linux</span>
</div>
</td>
<td class="style2">
<span id="ctl02_Repeater1_ctl01_Repeater1_ctl02_ctl00_Label2">Add Subcategory</span>
</td>
<td class="style3">
<span id="ctl02_Repeater1_ctl01_Repeater1_ctl02_ctl00_Label1">Edit</span>
</td>
</tr>
</table>
</td>
</table>
</td>
</table>
</td>
</body>
</html>
----------------------------------------------------------------
.style1
{
width: 350px;
border-bottom: solid thin #D5E6EC;
}
.style2
{
width: 100px;
text-align: center;
border-bottom: solid thin #D5E6EC;
background-color: #E8F1F4;
font-family: Arial, Verdana, Sans-serif;
font-size: 11px;
font-weight: bold;
text-decoration: underline;
}
.style3
{
width:40px;
text-align: center;
border-bottom: solid thin #D5E6EC;
background-color: #E8F1F4;
font-family: Arial, Verdana, Sans-serif;
font-size: 11px;
font-weight: bold;
text-decoration: underline;
}
.CategoryRow
{
height: 25px;
background-color: #F0FAFE;
border-left-style: solid;
border-left-color: #FF0000;
}
.CategoryName
{
text-decoration: underline;
font-family: Arial, Verdana, Sans-serif;
font-size: 12px;
font-weight: bold;
}
.TheTable
{
border-collapse:collapse;
}
[edited by: swa66 at 8:04 pm (utc) on May 1, 2009]
[edit reason] No URLs please see ToS and Forum Charter [/edit]
What's the purpose of doing display:inline ?
But first, I'd do away with nested tables, table rows with display:none, id's the length of half a screenwidth etc. You might even investigate columns in order to set the width of the cells (you're severely limited in what you can style on a column)
