Solved

toggle table rows IE hides border

Posted on 2010-08-31
18
409 Views
Last Modified: 2012-05-10
Hi Experts,

I made this simple Jquery to toggle table rows with a button:

	$("a#test-button").click(function(){
		$("tr.hidden").toggle();
	});

Open in new window


My HTML looks something like this:

<table>
<tr>
   <td>data</td>
   <td>data</td>
</tr>
<tr>
   <td>data</td>
   <td>data</td>
</tr>
<tr class="hidden">
   <td>data</td>
   <td>data</td>
</tr>
<tr class="hidden">
   <td>data</td>
   <td>data</td>
</tr>
</table>
<a id="test-button">Expand/collapse</a>

Open in new window


The code works like a charm, except that when the table is collapsed the last row of the table doesn't show a bottom border in Internet Explorer. No problems in Chrome or Firefox...

Any suggestions?
0
Comment
Question by:Dennie
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 10
  • 8
18 Comments
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 33564836
What happens if you add tbody and what does the CSS look like for the table, rows and cells?
0
 

Author Comment

by:Dennie
ID: 33564892
No difference with the tbody tag. By the way I just found out it is only an IE7 problem.

Here's the relevant CSS:
[code]
table.reuters-table th {
      font-size: 9px;
      background:url("../images/th-table.jpg") repeat-x 0 0;
      border: 1px solid #CCCCCC;
      color:#4F6B72;
      font-weight:bold;
      letter-spacing:1px;
      padding:3px 3px 3px 12px;
      text-align:left;
      text-transform:uppercase;
}
table.reuters-table td:first-child {
      border-left:1px solid #CCCCCC;
}
table.reuters-table td {
      padding:0 3px 0 3px;
      background:none repeat scroll 0 0 #FFFFFF;
      border-bottom:1px solid #CCCCCC;
      border-right:1px solid #CCCCCC;
      color:#4F6B72;
}
[/code]
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 33564962
EE has a CODE field

Where is the HIDDEN class?
0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 

Author Comment

by:Dennie
ID: 33564982
I have no specific CSS for the hidden class. Only some jquery to hide the hidden rows at document load.
The table.reuters-table td CSS also applies for the hidden class


$(document).ready(function(){
	$("tr.hidden").hide(); 
});

Open in new window

0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 33565023
Thanks.

I do not see anything that should make this happen. I will look for some IE7 specific behaviour such as unhappiness with having borders on the table AND the TD
0
 

Author Comment

by:Dennie
ID: 33565608
damn I still can't find it. Any ideas?
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 33574638
Sorry - I do not even have IE7 to see it happen
0
 

Author Comment

by:Dennie
ID: 33574666
IE8 compatibility mode...?
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 33574677
Ah - I forgot my code at home
Do you have a stand-alone version of the issue somewhere?
0
 

Author Comment

by:Dennie
ID: 33574759
No, the code & CSS in the first posts should be sufficient
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 33574974
Yes, it is, but now I have to put it back together again to test it

<html>
  <head>
  <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
  <title></title>
<style type="text/css">

table.reuters-table th {
      font-size: 9px;
      background:url("../images/th-table.jpg") repeat-x 0 0;
      border: 1px solid #CCCCCC;
      color:#4F6B72;
      font-weight:bold;
      letter-spacing:1px;
      padding:3px 3px 3px 12px;
      text-align:left;
      text-transform:uppercase;
}
table.reuters-table td:first-child {
      border-left:1px solid #CCCCCC;
}
table.reuters-table td {
      padding:0 3px 0 3px;
      background:none repeat scroll 0 0 #FFFFFF;
      border-bottom:1px solid #CCCCCC;
      border-right:1px solid #CCCCCC;
      color:#4F6B72;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script>

<script type="text/javascript">
$(document).ready(function(){
	$("tr.hidden").hide(); 

  $("a#test-button").click(function(){
		$("tr.hidden").toggle();
	});

});

</script>  
  </head>
  <body>
<table class="reuters-table">
<tr>
   <td>data</td>
   <td>data</td>
</tr>
<tr>
   <td>data</td>
   <td>data</td>
</tr>
<tr class="hidden">
   <td>data</td>
   <td>data</td>
</tr>
<tr class="hidden">
   <td>data</td>
   <td>data</td>
</tr>
</table>
<a id="test-button">Expand/collapse</a>
  </body>
</html>

Open in new window

0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 33575024
Nope. I cannot see the issue in the code I posted
0
 

Author Comment

by:Dennie
ID: 33575073
PLease try this code
<html>
  <head>
  <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
  <title></title>
<style type="text/css">
table {border-collapse: collapse;}
table.reuters-table th {
      font-size: 9px;
      background:url("../images/th-table.jpg") repeat-x 0 0;
      border: 1px solid #CCCCCC;
      color:#4F6B72;
      font-weight:bold;
      letter-spacing:1px;
      padding:3px 3px 3px 12px;
      text-align:left;
      text-transform:uppercase;
}
table.reuters-table td:first-child {
      border-left:1px solid #CCCCCC;
}
table.reuters-table td {
      padding:0 3px 0 3px;
      background:none repeat scroll 0 0 #FFFFFF;
      border:1px solid #CCCCCC;
      color:#4F6B72;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script>

<script type="text/javascript">
$(document).ready(function(){
	$("tr.hidden").hide(); 

  $("a#test-button").click(function(){
		$("tr.hidden").toggle();
	});

});

</script>  
  </head>
  <body>
<table class="reuters-table">
<tr>
   <td>data</td>
   <td>data</td>
</tr>
<tr>
   <td>data</td>
   <td>data</td>
</tr>
<tr class="hidden">
   <td>data</td>
   <td>data</td>
</tr>
<tr class="hidden">
   <td>data</td>
   <td>data</td>
</tr>
</table>
<a id="test-button">Expand/collapse</a>
  </body>
</html>

Open in new window

0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 33575150
If you remove that
table {border-collapse: collapse;}
it works

0
 

Author Comment

by:Dennie
ID: 33575177
But I need the border-collapse...
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 33575186
0
 
LVL 75

Accepted Solution

by:
Michel Plungjan earned 500 total points
ID: 33575710
Above thread not interesting for this issue.

Can you try

<!--[if !IE 7]>
table {border-collapse: collapse;}
<![endif]-->


0
 

Author Closing Comment

by:Dennie
ID: 33797152
Not what I was looking for. But some points for your help. Thanks!
0

Featured Post

Secure Your WordPress Site: 5 Essential Approaches

WordPress is the web's most popular CMS, but its dominance also makes it a target for attackers. Our eBook will show you how to:

Prevent costly exploits of core and plugin vulnerabilities
Repel automated attacks
Lock down your dashboard, secure your code, and protect your users

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses how to create an extensible mechanism for linked drop downs.
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
Suggested Courses

630 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question