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>
  <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;
	
}


 

 


0
yevi
5/1/2009 7:11:48 PM
asp.net.client-side 24353 articles. 1 followers. Follow

4 Replies
1054 Views

Similar Articles

[PageSpeed] 38

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>
<body>
<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;;">
<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>
</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/


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

Similar Artilces:

Problem between client-side & server-side
I have two select controls (HtmlControl) here. They are set to runat='server'. I've bind some data to them when create. I also have a cliet side script to change them one's option to another using javascript. The question is how i can get items of theirs when they're posted back? The controls are like this: <SELECT language="jscript" id="LbFrom" ondblclick="return LbFrom_ondblclick()"multiple size="9" name="Select1" runat="server"> <option></option>'some option here .. .. .. </selec...

Jscript, moving from client-side to server-side (.NET)
Hey all I’m working translating a web-app written in client-side Jscript to run on the server-side as JScript.NET. Without needing to get too specific, I am using Jscript because the original page aggregated raw data to produce statistical results (this was done dynamically based on user 'sort-by' options). The final output is an html report that can be emailed. Because this is currently being done on the client side, as the raw data grows the load-time grows as well (to the point that has almost become unusable). I’m posting here to see if anyone has any experi...

Problem passing value client-side to server-side
I have a page that calls a pop-up while passing an encrypted value via a query string. The value is encrypted on the parent client-side in javascript so it needs to be decrypted client-side as well. This decryption occurs on closing the child (popup) and I am at a loss of when and how I should get this value to the server-side. On the popup you just want to process server side code? Anytime you can access for example the raw url:string raw = Page.Request.RawUrl;If you need to access any values on the client side you can access the url using javascript. Another idea is to, on the code beh...

Problem call a server-side code from Client-side
Hi; I want to call a server-side code from client-Side at javascript function. must me use from Ajax or Http Requests in Javascript?   Thanks,mohsen  You'll have to make an AJAX call form your client side to acheive thisRegards,Muhammed Saleem P---------------------------------------------Please do not forget to click "Mark As Answer" on the posts that helped you.Happy Programming !!! I answered a question with sample code very similar to this one here: http://forums.asp.net/p/1358277/2799269.aspx#2799269 NC...  ...

Validation Controls in .NET ( Client side or server side?)
 i have a very basic question. We have all these validation controls in asp.net ( required field, range validator and others)..my question is the required field validator is a server side control. So does that mean that it does a post back?..is it client side or server side control  The only controls that post back are buttons and other inputs where you set AutoPostback="True", such as a dropdownlist or a textbox.  Another way of posting back is using an UpdatePanel and placing a trigger in it for a specified control and/or event. All controls are considered clien...

Problem in passing Listbox items from Client Side to Server Side
Hi ,I am populating a Listbox 'A' from client side using another Listbox 'B'. At the time of submitting the form I am not able to retrieve the items from the Listbox 'A'. I need the values of Listbox 'A' in the server side.  Please helpRavjeet why do not you use server control for the list box instead of the client side ???Fadil Alnassar www.fadilalnassar.com | FREE Nodil Tab Controlhttp://www.mefranchising.com So,What's the exact problem r u facing now. My sugession to you is to set hidden variable at the time of populating listbox. Please, update me with current s...

When to use client side varidation and server side varidation in .net?
In .net or classic web application we can varidate user data either on client isde or server side. How to select which side varidate to be used? Thanks! Generally, I use both client and server validation. I make sure the input is in the correct format and reasonably valid on the client, then I verify the data on the server. The extent of validation also depends on the type of data that I need to validate.Here are a few references:Validating ASP.NET Server ControlsIntroduction to Validating User Input in Web FormsClient-Side Validation for ASP.NET Server ControlsSecurity Checklist...

problem: client side validation posting back server side in firefox only
Hi I have validation controls and I only want them to validate via client side. It works in IE. But in firefox it does validate client side, however it immediately post backs server side. How can I prevent this?? I have a login control and it works fine there. Only problem it occurs is inside a createuserwizard. I have sumary validation with js pop up. Using asp.net 3.5. Before trying to solve the actual problem, please implement server side validation. Consider it a manditory part of validation because: - The user may have a browser not supported by the client-side scripts - T...

communication between client side(java script) and server side in .net project
I have a question which is, when building a .net project, we are able to use server side code and client side code(java script). How do they communicate? Thanks Client Side coding works with the WebBrowser. So when ever you write client side code you have to keep browser compatability in your mind and you have to code. Server Side code works with Web Server (IIS) and it's ASPNET ISAPI's. The won't directly communicate with each other. But using AJAX you can all server side code from Client Side! Example article on Ajax@ http://www.devarticles.com/index2.php?option=content&task=...

client side problem.
I get this error. 'elements' is null or not an object. javascript isnt my thing, tried to steal the code, made sense but i dont know what this is. and here is the code <head runat="server"> <title>Untitled Page</title> <script language="javascript" type="text/javascript"> function move(f,bDir) { var el = f.elements["lststages"] var idx = el.selectedIndex if (idx==-1) alert("You must first select the item to reorder.") else { var nxidx = idx+( bDir? -1 : 1) if (nxidx<0) nxidx=el.length-1 if (nxidx>=el.length) nxidx=0 var oldVal = el[idx].value v...

Problem accessing server side array values from client side javascript function
i faced the following problem ..i have an array that store the values of a resultset row under the server side coding.How do i retrieve them under my client side javascript function.I wrote the following coding under my client side function and it got an error.BSCStr is an array storing data from a resultset row which i did under the server side coding. From client side function: addr=addr + "&C" + i + "=" + <%=BSCStr[i]%>;...

Problem accessing server side array values from javascript client side function
i faced the following problem ..i have an array that store the values of a resultset row under the server side coding.How do i retrieve them under my client side javascript function.I wrote the following coding under my client side function and it got an error.BSCStr is an array storing data from a resultset row which i did under the server side coding. From client side function: addr=addr + "&C" + i + "=" + <%=BSCStr[i]%>; First of all, you can't mix server-side and client-side code. The reason is that the protocol that is used to communicate betwee...

.NET for client side?
Is this the idea of "Atlas" but using JavaScript rather than another technology? Atlas's goal is to abstract various browser implementations of DOM API and to ease out the developer's job to write rich client applications. Atlas hence makes use of the existing all-browser supported JavaScript to achieve this. Thanks for your reply.Let me convey my idea differently: I would like to author client side code using a class system. I recognise that Atlas is a technology for producing JS code, much in the same way that ASP.NET produces HTML for the browser.Will Atlas be m...

Problem accessing a server side declared array from the client side javascript function.
I have an array that store the values of a resultset row under the server side coding.How do i retrieve them under my client side javascript function.I wrote the following coding under my client side function and it got an error.BSCStr is an array storing data from a resultset row which i did under the server side coding. From client side javascript function: addr=addr + "&C" + i + "=" + <%=BSCStr[i]%>; Hi wingshya, Did you still need help with this thread? Jason ConwayMCP, MCTS, Certified SCRUM Masterasp.net blog...

Web resources about - CSS and cross borowser problem - asp.net.client-side

Resources last updated: 12/30/2015 11:10:24 AM