Solved

toggle table rows IE hides border

Posted on 2010-08-31
18
403 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
  • 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
 

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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 

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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …

912 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

Need Help in Real-Time?

Connect with top rated Experts

20 Experts available now in Live!

Get 1:1 Help Now