Too much vertical space between table rows in IE

[jaber2007]

I am making an order form in HTML and jquery. There are some parameters the customer must specify before he can press the Add to shopping list button. When the button is pressed, I have a function AddToBasket that extracts the parameters the customer has selected, and then appends a row to the shopping list.This works fine in Chrome, Opera and Firefox, but by some reason IE adds a lot of vertical space around each row. Each row contains a descriptive text that typically contains two line feeds/breaks. As mentioned, these appears nicely below each other in most browsers, but in IE there's so much vertical space around each row, so I can't fully see two rows in the list at the same time.My shopping list is an HTML table that is 220 pixels tall, and 450 wide. Here is the code for the table (I've wrapped it in a div):\[code\]<div style="height:220px;width:450px;font:16px Courier New, Garamond, Serif;overflow:auto;border:2px solid #7AB800"> <table width="100%" height=30px cellpadding="0" cellspacing="0" border="0" id="orderlist"> <thead> <tr style="color:#FFFFFF" bgcolor="#7AB800"> <th align="left" width="80"> DELETE </th> <th align="left" width="80"> NUMBER </th> <th align="left"> DESCRIPTION </th> <th class="colMeterType"> Meter type </th> <th class="colModuleType"> Module type </th> <th class="colOrderOrQuote"></th> </tr> </thead> <tbody id="shoppingListBody" style="height:200px;"> </tbody> </table></div>\[/code\]Only the first three columns are visible, colMeterType, colModuleType and colOrderOrQuote are set to be invisible in the css styling. Here I store info that the user doesn't need to see. When the user presses the add to basket button, I call a function where I first extract the variables the user has selected, then appends it to the shoppinglist:\[code\] $('#orderlist').append('<tr>'+ '<td align="center" class="rm"><input type="checkbox"/></td>'+ '<td><input class="numberOfItems" value="http://stackoverflow.com/questions/12726822/1" width="75px" size="3" pattern="[0-9]+" onkeyup="verifyQuantity()" type="text"/></td>'+ '<td>'+bodyContent +"</td>"+ '<td class="colMeterType">'+txtMeterType +"</td>"+ '<td class="colModuleType">'+txtModuleType+ "</td>"+ '<td class="colOrderOrQuote">'+ txtOrderOrQuote + "</td></tr>");\[/code\]The descriptive text is stored in the variable bodyContent.I have searched both Stackoverflow and other places for a solution to this. I couldn't find anyone with my exact problem, but I've tried different stuff like setting tr { padding-bottom:0px} in the styling, but nothing of what I've found solves my problem.