CSS and cross borowser problem


I need some help with my markup, as it presented in browser, and css (if somehow this is not enough i will provide the aspx code thought i don't see why...):
  •  In Firefox it's displayed perfectly with a straight left border (red)
    http://img23.imageshack.us/img23/8931/56877692.jpg
  • In IE8 it's messed up , the red border and the cells at right are not aligned well.
    http://img14.imageshack.us/img14/5492/59411779.jpg
  • In IE7 there border is not even displayed
    http://img14.imageshack.us/img14/5200/67220767.jpg


My code: http://www.webdevout.net/test?0g   (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>
  
<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;;">        
       
        Sport
       </div>          
    </td>
    <td class="style2">
        Add Subcategory
    </td>
    <td class="style3">
        Edit
    </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;;">        
                
        Soccer
       </div>          
    </td>
    <td class="style2">
        Add Subcategory
    </td>
    <td class="style3">
        Edit
    </td>
     

</tr>


<tr class ="CategoryRow">
    <td class="style1">    
       <div id="ctl01_Repeater1_ctl02_ctl00_diver" class="ElementRowDiv" style="margin-left:40px;;">        
                
        Tennis
       </div>          
    </td>
    <td class="style2">
        Add Subcategory
    </td>
    <td class="style3">
        Edit
    </td>
     

</tr>

</table>

</td>

<tr class ="CategoryRow">
    <td class="style1">    
       <div id="ctl02_ctl00_diver" class="ElementRowDiv" style="margin-left:20px;;">        
       
        Computers
       </div>          
    </td>
    <td class="style2">
        Add Subcategory
    </td>
    <td class="style3">
        Edit
    </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;;">        
        
        PC
       </div>          
    </td>
    <td class="style2">
        Add Subcategory
    </td>
    <td class="style3">
        Edit
    </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;;">        
                
        WinXP
       </div>          
    </td>
    <td class="style2">
        Add Subcategory
    </td>
    <td class="style3">
        Edit
    </td>
   
</tr>


<tr class ="CategoryRow">
    <td class="style1">    
       <div id="ctl02_Repeater1_ctl01_Repeater1_ctl02_ctl00_diver" class="ElementRowDiv" style="margin-left:60px;;">        
                
        Linux
       </div>          
    </td>
    <td class="style2">
        Add Subcategory
    </td>
    <td class="style3">
        Edit
    </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;
        
}


 
 
-1
yevi
5/1/2009 7:11:48 PM
📁 asp.net.client-side
📃 24353 articles.
⭐ 2 followers.

💬 4 Replies
👁️‍🗨️ 2616 Views



Please remove those unwanted <td>'s and <tr>'s . And do close the tags correctly. Then It will work.
For Eg
beginning of your code should be like
<html lang="en">
<head>
<title>Test</title>
</head>

<table id="TheTable" cellspacing="0" cellpadding="0" class="TheTable" style="display:inline;" >
<tr class ="CategoryRow">
<td class="style1">
<div id="ctl01_ctl00_diver" class="ElementRowDiv" style="margin-left:20px;;">
Sport
</div>
</td>
<td class="style2">
Add Subcategory
</td>
<td class="style3">
Edit
</td>
</tr>
</table>

 

Ajay kumar.p.v (pulipra)

Please remember to click 'Mark as Answer'
0
ajaykumar
5/1/2009 9:31:48 PM

 The tags are correct, it's multi nested tables generated by repeaters' templates.
 
0
yevi
5/1/2009 10:29:57 PM

 No, some tr's and td's missing. For example, there need a <tr> before the line
<td>

            
<table id="TheTable" cellspacing="0" cellpadding="0" class="TheTable" style="display:inline;" >
<tr id="ctl01_Repeater1_ctl00_ctl00_Button3" style="display:none;">

            
Ajay kumar.p.v (pulipra)

Please remember to click 'Mark as Answer'
0
ajaykumar
5/5/2009 5:15:20 AM

I'll suggest get your HTML and CSS validated ate the w3C validator if it passes the test your page will look similar in all browsers
http://validator.w3.org/
http://jigsaw.w3.org/css-validator/


            
MAK Mark as Answer if this reply helps you
MVP ASP/ASP.Net ASP.Net Hosting : Host Depot My Site : ASPSnippets
0
mudassarkhan
5/5/2009 5:32:11 AM
Reply: