Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

toggle table rows IE hides border

Posted on 2010-08-31
18
Medium Priority
?
412 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
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 

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 1500 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

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

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

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…
Originally, this post was published on Monitis Blog, you can check it here . Websites are getting bigger and more complicated by the day. Video, images and custom fonts are all great for showcasing your product or service. But the price to pay in…
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).
Suggested Courses

577 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