HTML - Table Dynamic Rows - Firefox Problem
Hi Can anyone solve this problem. Here is my code.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Hide/Show Test!</title> <style> .myclass1 { background-color:#CCCCCC; display:block; } .myclass2 { display:none; } </style> </head> <body> <script> function hideNshow(){ var e1=document.getElementById('A1C1_1'); if(e1.className=="myclass1") { e1.className="myclass2"; } else { e1.className="myclass1"; } e1=document.getElementById('A1C1_2'); if(e1.className=="myclass1") { e1.className="myclass2"; } else { e1.className="myclass1"; } } </script> <!-- <input type="button" name="myBtn" value="Click Me!" onclick=" hideNshow();"/>--> <table width="100%" border="1" cellspacing="0" cellpadding="0"> <tr> <td><a href="#" onclick=" hideNshow();">Row1/Cell1</a></td> <td >Row1/Cell2</td> <td>Row1/Cell3</td> </tr> <tr id="A1C1_1" class="myclass2"> <td>Row2/Cell1</td> <td>Row2/Cell2</td> <td>Row2/Cell3</td> </tr> <tr id="A1C1_2" class="myclass2"> <td>Row2/Cell1</td> <td>Row2/Cell2</td> <td>Row2/Cell3</td> </tr> <tr> <td>Row3/Cell1</td> <td>Row3/Cell2</td> <td>Row3/Cell3</td> </tr> <tr> <td>Row4/Cell1</td> <td>Row4/Cell2</td> <td>Row4/Cell3</td> </tr> <tr> <td>Row5/Cell1</td> <td>Row5/Cell2</td> <td>Row5/Cell3</td> </tr> </table> </body> </html> It is working fine in IE. When I click the link It displays the hidden rows and hides when I click the link agian. But in Firefox it is giving error. It is adding empty rows. How to prevent that. Thanks in advance. Similar TutorialsOk, I am creating a calculator with html and javascript. I am using a table to format the buttons and text displays. The code is posted below with the table itself. It is supposed to be 3 cells height and 1 cell width but it turns out as 2 cells width and 2 cells height. I can't figure out the error in my code so can someone please figure out what is wrong with my tags: HTML Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <style type=text/css> input { background-color: black; color: white; } th { background-color: black; color: white; } td { background-color: green; } </style> <script type="text/javascript"> var a; var b; var c; var d; var e; function inputtext(inputtext) { a=document.getElementById("inputcalculation").value; b=inputtext; c=a+b; document.getElementById("inputcalculation").value=c; } function Evaluate() { d=document.getElementById("inputcalculation").value; e=eval(d); document.getElementById("outputcalculation").value=e; document.getElementById("inputcalculation").value=""; } </script> <title>Help-In-Math Calculator</title> </head> <body> <table border="1"> <tr> <th colspan="11" style="background-color: black"> <center> <input type="text" id="inputcalculation" value="" /> </center> </th> </tr> <tr> <td colspan="11" rowspan="5"> <center> <input type="button" value="1" onclick="inputtext('1')" /> <input type="button" value="2" onclick="inputtext('2')" /> <input type="button" value="3" onclick="inputtext('3')" /> <input type="button" value="+" onclick="inputtext('+')" /> <br /> <input type="button" value="4" onclick="inputtext('4')" /> <input type="button" value="5" onclick="inputtext('5')" /> <input type="button" value="6" onclick="inputtext('6')" /> <input type="button" value="-" onclick="inputtext('-')" /> <br /> <input type="button" value="7" onclick="inputtext('7')" /> <input type="button" value="8" onclick="inputtext('8')" /> <input type="button" value="9" onclick="inputtext('9')" /> <input type="button" value="X" onclick="inputtext('*')" /> <br /> <input type="button" value="0" onclick="inputtext('0')" /> <input type="button" value="." onclick="inputtext('.')" /> <input type="button" value="00" onclick="inputtext('00')" /> <input type="button" value=÷ onclick="inputtext('/')" /> <br /> <input type="button" value="EVALUATE" onclick="Evaluate()" style="background-color: blue"/> </center> </td> </tr> <tr> <td colspan=11> <input type="text" id="outputcalculation" onfocus="blur()" /> </td> </tr> </table> </body> </html> Hi, I'm having a basic problem with a HTML table. It displays exactly how I want on Firefox 3.5.15 but on Internet Explorer 8 is does not. Can anyone point out what I need to do to get this table displaying in IE as it does in Firefox? Below is my HTML table and I suspect IE 8 is ignoring 'rules = rows'; <?php echo '<TABLE bordercolor=#000000 cellspacing=0 cellpadding=10 border=0 rules=rows frame=box width="90%">'."\n"; echo '<tr>'; echo '<td><B><font size=1>Test Name</font></B></td><td><B><font size=1>Date</font></B></td><td>'; echo '</tr>'; echo '<tr>'; echo '<td><font size=1>Test Number 1</font></td><td><font size=1>01/01/2010</font></td>'; echo '</tr>'; echo '<tr>'; echo '<td><font size=1>Test Number 2</font></td><td><font size=1>02/01/2010</font></td>'; echo '</tr>'; echo '<tr>'; echo '<td><font size=1>Test Number 3</font></td><td><font size=1>03/01/2010</font></td>'; echo '</tr>'; echo '<tr>'; echo '<td><font size=1>Test Number 4</font></td><td><font size=1>04/01/2010</font></td>'; echo '</tr>'; echo '<tr>'; echo '<td><font size=1>Test Number 5</font></td><td><font size=1>05/01/2010</font></td>'; echo '</tr>'; echo '<tr>'; echo '</TABLE>'."\n"."\n"; ?> Thanks! Hello, I have a table (with one cell). The table can be quite big (200 items) so I would like the user to be able to scroll it up and down... and I want the user to be able to add and delete an item. I have done something with javascript but it is not complete.. the delete does not work correctly ... the scroll up and down shown the same table. I don't have a clue on how to do the add button. Could you help me please? Here is what I have done so far.... Code: <html> <head> <title>Insert/Delete Table Row using DOM</title> <link rel="stylesheet" type="text/css" href="style.css"> <style type="text/ccs"> <!-- form {border:1px solid blue;} div {border:1px solid red; width:150px; overflow:auto;} .selectBox { font-size:xx-small;overflow:auto;} #tblSample td,th {padding:0.5em;} .classy0 { background-color: #234567; color:#89abcd;} .classy1 {background-color: #89abcd; color:@234567;} --> </style> <%@ include file="javascriptLib.html" %> <script language="JavaScript" type="text/JavaScript"> <!--- oculta el script para navegadores antiguos var INPUT_NAME_PREFIX = 'inputName'; // this is being set via script var TABLE_NAME = 'items_list'; // this should be named in the HTML var LABEL_NAME = 'label_list'; var ROW_BASE = 1; // first number (for display) var MAXLENGTH=5; function myRowObject(one,two) { this.one = one; // text object this.two = two; // input text object } function deleteCurrentRow(obj) { var delRow = obj.parentNode.parentNode; var tbl = delRow.parentNode.parentNode; var rIndex = delRow.sectionRowIndex; var rowArray = new Array(delRow); deleteRows(rowArray); reorderRows(tbl, rIndex); } function deleteRows(rowObjArray) { for (var i=0; i<rowObjArray.length; i++) { var rIndex = rowObjArray[i].sectionRowIndex; rowObjArray[i].parentNode.deleteRow(rIndex); } } function reorderRows(tbl, startingIndex) { if (tbl.tBodies[0].rows[startingIndex]) { var count = startingIndex + ROW_BASE; for (var i=startingIndex; i<tbl.tBodies[0].rows.length; i++) { // CONFIG: next line is affected by myRowObject settings tbl.tBodies[0].rows[i].myRow.one.data = count; // text // CONFIG: next line is affected by myRowObject settings tbl.tBodies[0].rows[i].myRow.two.name = INPUT_NAME_PREFIX + count; var tempVal = tbl.tBodies[0].rows[i].myRow.two.value.split(' '); tbl.tBodies[0].rows[i].className = 'classy' + (count % 2); count++; } } } function clearTable(option) { var tbl = document.getElementById(TABLE_NAME); if (option != 0) tbl= document.getElementById(LABEL_NAME); //var lastRow = tbl.tBodies[0].rows.length; var lastRow = tbl.rows.length; var i=lastRow-1; while (i>=0) { tbl.deleteRow(i); i--; } } function showRow (val) { var tbl = document.getElementById(TABLE_NAME); var nextRow = tbl.tBodies[0].rows.length; //var nextRow=tbl.rows.length; var iteration = nextRow + ROW_BASE; var row = tbl.tBodies[0].insertRow(nextRow); row.className = 'classy' + (iteration % 2); var cell0 = row.insertCell(0); var textNode = document.createTextNode(iteration); cell0.appendChild(textNode); var cell1 = row.insertCell(1); var txtInp = document.createElement('input'); txtInp.setAttribute('type', 'text'); txtInp.setAttribute('name', INPUT_NAME_PREFIX + iteration); txtInp.setAttribute('size', '77'); txtInp.setAttribute('value', val); txtInp.readOnly = true; cell1.appendChild(txtInp); } function addRowToTable(val,num) { var tbl = document.getElementById(TABLE_NAME); var nextRow = tbl.tBodies[0].rows.length; var iteration = nextRow + ROW_BASE; if (num == null) // appends to the end of the table { num = nextRow; } else // Insert at row num { iteration = num + ROW_BASE; } // add the row var row = tbl.tBodies[0].insertRow(num); // CONFIG: requires classes named classy0 and classy1 row.className = 'classy' + (iteration % 2); // CONFIG: This whole section can be configured // cell 0 - index var cell0 = row.insertCell(0); var textNode = document.createTextNode(iteration); cell0.appendChild(textNode); // cell 1 - input text var cell1 = row.insertCell(1); var txtInp = document.createElement('input'); txtInp.setAttribute('type', 'text'); txtInp.setAttribute('name', INPUT_NAME_PREFIX + iteration); txtInp.setAttribute('size', '62'); txtInp.setAttribute('value', val); // iteration included for debug purposes txtInp.readOnly = true; cell1.appendChild(txtInp); // cell 2 - delete button //----------------------- var cell2 = row.insertCell(2); var btnEl = document.createElement('input'); btnEl.setAttribute('type', 'button'); btnEl.setAttribute('value', 'Delete'); btnEl.onclick = function () {deleteCurrentRow(this)}; cell2.appendChild(btnEl); // Store the myRow object in each row row.myRow = new myRowObject(textNode,txtInp); } function paintTable(index) { var maxLine=index+MAXLENGTH; clearTable(0); // add Row with delete and insert options //---------------------------------------- services=document.forms[0].items.value; if ((services != null) && (services != "")) { var services_array=services.split("|"); sLength=services_array.length ; if (services_array.length < maxLine) maxLine=sLength; // add Row with delete options //----------------------------- for (var i=index; i < maxLine; i++) { val=services_array[i]; //showRow(1,val); addRowToTable(val); } showLabel(index,sLength); } } function showLabel(index,max) { clearTable(1); next_val=index+MAXLENGTH; prev_val=index-MAXLENGTH; var tbl = document.getElementById(LABEL_NAME); var nextRow = tbl.tBodies[0].rows.length; // add Previous and/or Next buttons //--------------------------------- var row = tbl.tBodies[0].insertRow(nextRow); var celNo=0; if (index !=0) { var cell0 = row.insertCell(celNo); var btnEl0 = document.createElement('input'); btnEl0.setAttribute('type', 'button'); btnEl0.setAttribute('value', 'Previous'); btnEl0.onclick = function () {paintTable(prev_val)}; cell0.appendChild(btnEl0); celNo++; } if (next_val <= max) { var cell1 = row.insertCell(celNo); var btnEl1 = document.createElement('input'); btnEl1.setAttribute('type', 'button'); btnEl1.setAttribute('value', 'Next'); btnEl1.onclick = function () {paintTable(next_val)}; cell1.appendChild(btnEl1); } } // end hiding from old browsers --> </script> </script> </head> <body onLoad=paintTable(0)> <form onSubmit="return false" method="post" name="my_form" action=""> <table border= "2" cellspacing="0" id="items_list" > <tbody></tbody> <input type=hidden name="items" value="1|2|3|4|5|6|7|8|9|10|11"> </table> <P><P><table border="1" id="label_list"> <tbody></tbody> </form> </body> </html> Please, help me! Thanks Hello, I am newbie, just has started my adventure with html. I tried to make an easy static site, without any additional thingd, but it occured a problem. 1. I mean, as I put table in table because I did know how to to id in different way, to make buttons on the left stay up while text on the right is moving- if I do normal table with 2columns and on the left lets say 5rows for buttons, on the right I unite all rows to make one big sort of box for contents, as I go down and try to write something morre, the rows from the letf were enlarging too If the size of explorer or firefox is nor full screen, the text in contents is going away (like now in lycos server, where screen is not full, but "cut" by advertise) 2. I have highlighted buttons, but not always works, why? (i mean it works, but darker buttons are charging so slow- maybe it is so because i saved them in pgn instead in gif, and each one is about 50kb?) -probably it is not this- because I have just changed into gif, and it is still the same 3. Another problem, as I post the site, I have notice, that in firefox I can not navigate with buttons, while in explorer yes, is it a fault of my coding, or of server where I put website? Here I post my website: http://members.lycos.co.uk/aniaacolgate/ Could someone take a look on the code, and will be so kind to correct me? It is a basic easy site of very begginger I just wanted to make a shape like this: - top: a banner - buttons in horizontal and vertical way - under buttons: contents (sincerly would like to put frames, but do not know how to put them there, is on the left there r buttons Thank you so much in advance for reply Sorry for mistakes in language Hi, I created a table with rounded corners and I'm having a white-space problem in the inner bottom and top part of the table while using the MOZILLA FIREFOX browser. The URL below will show you what I'm talking about. I've spent many hours trying to get rid of those white spaces but cant figure out. http://www.imageenvision.com/test.html Code: <!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01//EN' 'http://www.w3.org/TR/html4/strict.dtd'> <html> <head> <title>TEST</title> <link rel="stylesheet" href="/css_style_sheet.css" type="text/css"> </head> <body> <table align='center' width='500' height='0' border='0' cellspacing='0' cellpadding='0'> <tr> <td width='0' height='0'><img src='/pics/top_left_rounded_corner.gif' height='9' width='9' border='0'></td> <td width='100%' height='0'><img src='/pics/top_middle.gif' height='9' width='100%' border='0'></td> <td width='0' height='0'><img src='/pics/top_right_rounded_corner.gif' height='9' width='9' border='0'></td> </tr> <tr> <td colspan='3' height='100' align='center' bgcolor='#F8F8F8'><!--MAIN TABLE STUFF--></td> </tr> <tr> <td width='0' height='0'><img src='/pics/bottom_left_rounded_corner.gif' height='9' width='9' border='0'></td> <td width='100%' height='0'><img src='/pics/bottom_middle.gif' height='9' width='100%' border='0'></td> <td width='0' height='0'><img src='/pics/bottom_right_rounded_corner.gif' height='9' width='9' border='0'></td> </tr> </table> </body> </html> Thanks in advance for your help. Kenny Adams Image Envision Not a major programmer but I needed to make a website. I am having a problem with my website where I have 5 pages, same structure, built with tables, all tables centered. In IE the tables align center on each page. But in Firefox --- 3 of the pages are different, lining up about 10 pixels left of center. Does anyone know how I can fix this problem? I have browsed around other sites as well and many of them have this problem. Any advice would be greatly appreciated. I know tables are horrible but thats all I know/can learn. OK, so I have a dynamic table that can be filtered. The full table has just over 250 rows. My problem is that even by setting their display property to 'none', it still causes the rows to take up what seems to be a pixel of space. So, if several consecutive rows are hidden, it causes noticeable white space to appear and it can make it look really bad. In some cases over 100 consecutive rows are hidden and it causes a very large blank space to show. Oddly, I ran into this problem only when working in Firefox. It performs fine in IE. Here are some captures. Take note the number in the SEQ column shows what row it is: Before being filtered: After being filtered in IE: After being filtered in Firefox: I can't find anywhere else online where anyone has even had this particular problem. Can anyone help? I'm stumped. One possible solution I thought of was absolutely positioning all of the display:none rows on top of each other but I didn't know if that could work or not. Huge thanks to anyone who has a solution. I can post the JavaScript for the filtering if anyone thinks it may help. The code I am working with is actually inside of a .xls file. However, I am assuming that my problems are HTML-related. Here is a picture of how it is incorrectly displaying in Firefox: Here's a picture of it in IE, which is how I want it to look in Firefox: Does anyone know what the most likely cause of this is? If you would like to see some code I can post it, I just didn't want it to come off as too overwhelming. It's about 70 lines of code for the whole table. A huge thanks to anyone who can help me out with this. I am working on an application within a website. Most of the HTML for the entire site, I did not create myself, just some HTML and CSS for a specific application. Even in that application, I imported some of the text (which contains HTML tags) from a previous application. So, I only did a small portion of the HTML/CSS. My problem is that when users print out this page in IE6, some of the rows of the main table are missing from the printout. For example, this page: http://www.northcarolina.edu/pe_test/sample_pe.php Does any one have any knowledge of a bug that would cause IE6 not to print some rows? Does any one see any reasons why some rows in the tables (the ones with class='workplan') would skip rows when printing? Thank You. Hi All, Am a bit of a newbie here. I'm having a little problem with a table that I created on Wordpress. After creating the table, the image below shows how it looks like on the Wordpress editor: But, once published, the row alignment is a bit off. Here's the url: http://runfest.my/?page_id=346 Appreciate some advice on what went wrong and how I can fix it. Thanks a bunch! I am working on a layout for a website, I'm not new at all to HTML, it's just been a while. I have a banner taking up the first row of the table(colspan=2), and for the 2nd row, I have a menu and a text region. This 2nd row always has a small space between it and the 1st, even if cellspacing=0. Is there any way to do this with a simple <table>??? Someone told me that using a table would be less effective than using <div>, is this true? If so, how would I do this using <div>. Thank you for any suggestions. Hi there, I'm a bit of a noob to HTML, and I'm working on creating a site for my webcomic. The main portion of the layout has a simple table with a header and footer at the top and bottom rows. It's supposed to look like Instead it looks like The code for the table is this: Quote: <table align="center" cellpadding="0" cellspacing="0" border="0" width="725"> <tr> <td width="725" valign="bottom" border="0"> <img src="/images/header.png" width="725" height="33" /></td> </tr> <tr> <td width="725" bgcolor="0099CC" align="center"> <p>***todays_comics***<p>***first_day*** ***previous_day*** ***next_day*** ***last_day*** </td> <tr> <td width="725" valign="top" border="0"> <img src="/images/footer.png" width="725" height="33" /></td> </tr> </table> Whenever I put the code into an HTML test bed, it works fine, but for some reason refuses to work when I upload it to my FTP. It's driving me crazy. If you could help, I'd really appreciate it. Thanks. Afternoon everyone, I have a table with many rows and a checkbox in the first cell of each row. I want the user to be able to click anywhere on the row and activate the checkbox, so I'm using a label tag in front of each row. The following code works in IE7, but not Firefox or Chrome. Any ideas how to make it work cross-browser? Code: <table> <label for="X"> <tr> <td> <input type="checkbox" id="X"/> </td> <td> THIS TEXT SHOULD ACTIVATE THE LEFT CHECKBOX </td> </tr> </label> </table> Thanks! Can anyone tell me why there is a space at the bottom of my page between the images in the middle and the bottom image? The page looks fine in Firefox and I cannot figure out why there is a space in IE7. Any suggestions would be greatly appreciated. Thanks Frank http://www.spartafitness.com/home.htm Hi. I'm working on a fairly complicated web form and need to align input boxes horizontally across a lefthand column, a multi-row nested table, and a righthand column. This works OK (as long as cellpad and cellspace are set to 0) except that at one point I need to put text in the right-hand column instead of an input box, and this throws the alignment out. The simplified code below shows what I mean. As given below the boxes are aligned properly. But if you comment out the version A row and substitute the version B row, the alignment goes. Can anyone explain why this happens, and whether there's a way round it ? The form in question does have to be a table, by the way. Would be grateful for any suggestions ! Thanks Dedge <form> <table width='100%' cellspacing='0' cellpadding='0' border='0'> <tr> <td>Item name</td> <td rowspan='5'> <table cellspacing='0' cellpadding='0' border='0'> <tr> <td><input name='i1' id='i1' size='1' maxlength='1'></td> <td><input name='i2' id='i2' size='1' maxlength='1'></td> </tr> <tr> <td><input name='i3' id='i3' size='1' maxlength='1'></td> <td><input name='i4' id='i4' size='1' maxlength='1'></td> </tr> <tr> <td><input name='i5' id='i5' size='1' maxlength='1'></td> <td><input name='i6' id='i6' size='1' maxlength='1'></td> </tr> <tr> <td><input name='i7' id='i7' size='1' maxlength='1'></td> <td><input name='i8' id='i8' size='1' maxlength='1'></td> </tr> <tr> <td><input name='i7' id='i7' size='1' maxlength='1'></td> <td><input name='i8' id='i8' size='1' maxlength='1'></td> </tr> </table> </td> <td>Item name</td> <td><input name='ia' id='ia' size='1' maxlength='1'></td> </tr> <tr> <td>Item name</td> <td>Item name</td> <td><input name='ib' id='ib' size='1' maxlength='1'></td> </tr> <tr> <td>Item name</td> <td>Item name</td> <td><input name='ic' id='ic' size='1' maxlength='1'></td> </tr> <!--VERSION A--> <tr> <td>Item name</td> <td>Item name</td> <td><input name='ic' id='ic' size='1' maxlength='1'></td> </tr> <!--END OF VERSION A--> <!--VERSION B--> <!--<tr> <td>Item name</td> <td colspan='2' align='right'>SOME TEXT</td> </tr>--> <!--END OF VERSION B--> <tr> <td>Item name</td> <td>Item name</td> <td><input name='ie' id='ie' size='1' maxlength='1'></td> </tr> </table> </form> Hi, Is there any way such that i can use ordered list to number the rows of a table?? Nikhil Hi all I have attached a screenshot. I want to create table(shown in attachment) with many rows and coloumns(Kind of Xl Sheet) with scroll options. How to insert that table into normal HTML table with width="90%" Kindly resolve this issue. I have 10 rows compose of 3 textbox per row. After pressing submit button, they are post to the next page to a table. But my problem is if only 3 rows have data the other rows is still shown in a table but blank with borders. So I want my table to show the rows who only have data The table itself is working fine, but the size of each cell is not correct in Firefox. Here is a screenshot of what is happening: http://img35.imageshack.us/img35/1938/tabletroubles.gif Here is the head of my page, the css for the table is he HTML Code: <style type="text/css"> #cat table {border:0px solid #333333; cell-padding:0; cell-spacing:0; align=center} #cat tr {align=center} #cat td {font-size: 13px; font-family=tahoma; font-weight: bold; padding: 0px; border:0px solid #333333; align=center;} #cat td a {text-decoration: none; color:#757575; background-color: white; display:block; height=23; background-image: url(linkbg1.gif); align=center;} #cat td a:hover {background-color: #333333; font-weight: bold; text-decoration: none;color: #ffffff; background-image: url(linkbg2.gif); align=center;} </style> and here is the table code, located in the body of the page: HTML Code: <div style="Height:53px; overflow:auto; width:900px; position:absolute; top:0; left:0"> <TABLE bgcolor=#333333 cellspacing=0; cellpadding=0;><tr><td> <div id="cat"> <table width=900; cellpadding:0px; cellspacing:0px> <tr align=center> <td width=20%> <font face=tahoma><a href="home.html">Home</a></font> </td> <td width=20%><center><font face=tahoma><a href="openings.html" target="_top">Openings</a></font></center></td> <td width=20%><center><font face=tahoma><a href="dance.html" target="_top">Dance</a></font></center></td> <td width=20%><center><font face=tahoma><a href="projects.html" target="_top">Projects</a></font></center></td> <td width=20%><center><font face=tahoma><a href="vocaloid.html" target="_top">Vocaloid</a></font></center></td> </tr> <tr> <td width=20%><center><font face=tahoma><a href="fanflashes.html" target="_top">Fanflashes</a></font></center></td> <td width=20%><center><font face=tahoma><a href="caramelldansen.html" target="_top">Caramelldansen</a></font></center></td> <td width=20%><center><font face=tahoma><a href="cosplay.html" target="_top">Cosplay</a></font></center></td> <td width=20%><center><font face=tahoma><a href="endings.html" target="_top">Endings</a></center></td> <td width=20%><center><font face=tahoma><a href="anime.html" target="_top">Anime Episodes</a></font></font></center></td> </tr> </table> </div> </td></tr></table> </div> A table is nested within another table. The table on the outside has no content, it is there to make a gray border around everything else. If you look at the table in firefox & internet explorer, you'll see that in IE- the table is much thicker than in firefox. How can i make it so that the table in Firefox will have the same thickness as the one in IE? I could really use some help. Thanks! |