HTML - Table Widths Have A Mind Of Their Own !
Hi Guys,
I'm having major problems with setting the widths of columns on my page. As per attached pic, I'm trying to get the three main columns to be exactly 300 however it is putting it as 300 (308) in the design view which means the backgrounds in some of the table cells are repeating as shown in box and the text is spreading across the table cell width of what the figure is in brackets and not the 300 I want it to be. Any one got any ideas - its driving me nuts ! Similar TutorialsWhy the "R w50" text is not on the right?? And why the widths on the top table are not correct? How can I fix it? Code: <table border=1 cellpadding=5 cellspacing=0> <tr> <td style=\"width:30px;\">w30</td> <td>n</td> <td style=\"text-align:right; width:50px;\">R w50</td> </tr> <tr> <td colspan=3> <table border=1 cellpadding=5 cellspacing=0 bordercolor=red width=100%> <td style=\"width:30px;\">w30</td> <td>n n n n n n n n n n n n n n n n n n n</td> <td style=\"text-align:right; width:50px;\">R w50</td> </table> </td> </tr> </table> Hi all, thank you in advance to anyone that can help. I'm sure this is probably an issue that has been covered in the past however I have had no luck finding it. I have a 2 column table with an iframe the left column. Firefox shows this correctly, the edge of the cell meets with the iframe etc, but when viewed in IE, the table widths change dramatically. I have inserted two images (firefox v IE) to show what is happening. If anyone can find what I have done wrong, I would greatly appreciated. Please, keep the replies in simple terms, I'm a bit of a n00b... As you can see, the gray table background has overlapped over the iframe. Is it possible to set a table's width as something like this? HTML Code: <table width="100%-100px"> Hi all, thank you in advance to anyone that can help. I'm sure this is probably an issue that has been covered in the past however I have had no luck finding it. I have a 2 column table with an iframe the left column. Firefox shows this correctly, the edge of the cell meets with the iframe etc, but when viewed in IE, the table widths change dramatically. I have inserted two images (firefox v IE) to show what is happening. If anyone can find what I have done wrong, I would greatly appreciated. Please, keep the replies in simple terms, I'm a bit of a n00b... [IMG][img=http://img2.freeimagehosting.net/uploads/36b3e47e84.jpg][/IMG] Hi guys, I have a problem with table widths used to arrange content on a website. Why am I not using DIVs? Because it's too time consuming at the moment to convert it over, and my client is not familiar with DIVs and has no time to learn it. So I have to stick to using tables for him to maintain on his own. Here's a quick rundown on my table layout. ----------------------------- |TD1-------------|TD1a****| ------------------ |TD2-------------|********| ------------------ |TD3-------------|********| ------------------ |TD4-------------|********| |Table 2----------|********| ------------------------------ |TD5-------------|********| ------------------------------ That's my attempt to illustrate my layout. I'm using * and - as fillers, the editor removes all the empty spaces... My problem is, TD1 to TD3 and TD5 aligns nicely vertically - they all have the same / correct width. However, TD4 with a table inside is slight shorter in width than it should. About 1 or 2 px. The following shows the screenshots. zoomed in.... I need to get that TD4 with the table inside to have the same width as the others. I have tried removing all BORDER and BORDERCOLOR codes from all the table tags, no use. I tried using both CSS and the table tag WIDTH to control it, still doesn't work. Need suggestions!! Please click here to see my code. It's a little messy... http://www.thienkaiwei.com/index7.html why the table i have dont expand over browser borders when sum of td widths is bigger than screen width? How can i overcome this problem? I'm new to the forum and have a question about radio buttons. I think I'm under the right category. I already know how to create the radio buttons and have done that on my site. Where my problem comes in is once a radio button is clicked on. I want to make a trivia page on my site with a multiple choice answers, which means only one answer is correct and the other four options would be wrong. If the correct answer is chosen, I want a page to pop-up or a new page which would let the person know they chose correctly. I also want to do the same for the wrong answers with a pop-up or new page letting the person know they chose wrong if they clicked on any other answer except the correct one. I don't even know if this can be done. I've looked on website help pages and it seems they all differ so I'm getting more confused with each search. Some say to use CSS others say JavaScript. Maybe another way would be better than radio buttons. I'm up for any suggestions. The link to my page for reference is http://wondersofdisney.webs.com/trivia.htm . The page is not visible on my website yet because it is still in construction. If you need any further explanations, please don't hesitate to ask me and I'll try to clear it up. Thanks for any help provided! Hello all, Just quick question: 1.) I am on Blogger and I want the layout to be centered (not the text). How can I achieve this? 2.) I have 4 containers (navigation at top, main for posts, sidebar for more navigation, and a footer), what is the best way to have a width that looks great/compatible on IE-FF as well as smaller CRT's to widescreen LCD's? 3.) Any other tips/suggestions/clean up on my coding would be much appreciated. Thanks in advance, I apologize if this is a bit much... Code: body { background:$bgcolor; background-image: url(); background-repeat: repeat; background-attachment: fixed; margin:0; color:$textcolor; font:x-small Georgia Serif; font-size/* */:/**/small; font-size: /**/small; text-align: center; } a:link { color:$linkcolor; text-decoration:none; } a:visited { color:$visitedlinkcolor; text-decoration:none; } a:hover { color:$titlecolor; text-decoration:underline; } a img { border-width:0; } /* Header ----------------------------------------------- */ #header-wrapper { margin:0 2% 10px; border:0px solid $bordercolor; width: 1072px; } #header-inner { background-position: center; margin-$startSide: auto; margin-$endSide: auto; } #header { margin: 5px; border: 0px solid $bordercolor; text-align: center; color:$pagetitlecolor; } #header h1 { margin:5px 5px 0; padding:15px 20px .25em; line-height:1.2em; text-transform:uppercase; letter-spacing:.2em; font: $pagetitlefont; } #header a { color:$pagetitlecolor; text-decoration:none; } #header a:hover { color:$pagetitlecolor; } #header .description { margin:0 5px 5px; padding:0 20px 15px; text-transform:uppercase; letter-spacing:.2em; line-height: 1.4em; font: $descriptionfont; color: $descriptioncolor; } #header img { margin-$startSide: auto; margin-$endSide: auto; } #newnavbar { position: absolute; width: 1072px; height: 50px; margin: 0 auto; margin-top: 0px; font-weight: normal; background: url("")no-repeat; } #newnavbar a{ color:#000000; } #newnavbar a:hover{ color:#ff9900; } /* Outer-Wrapper ----------------------------------------------- */ #outer-wrapper { position: absolute; margin: 0 auto; padding:10px; width: 1072px; text-align:$startSide; font: $bodyfont; } #wrap2 { width: 1072px; } #main-wrapper { background:#000000; margin: 0 auto; width: 672px; float: left; display: inline; /* fix for doubling margin in IE */ word-wrap: break-word; /* fix for long text breaking sidebar float in IE */ overflow: hidden; /* fix for long non-text content breaking IE sidebar float */ } #sidebar-wrapper { background:#000000; margin: 0 auto; width: 400px; float: right; display: inline; /* fix for doubling margin in IE */ word-wrap: break-word; /* fix for long text breaking sidebar float in IE */ overflow: hidden; /* fix for long non-text content breaking IE sidebar float */ } /* Headings ----------------------------------------------- */ h2 { margin:1.5em 0 .75em; font:$headerfont; line-height: 1.4em; text-transform:uppercase; letter-spacing:.2em; color:$sidebarcolor; } /* Posts ----------------------------------------------- */ h2.date-header { margin:1.5em 0 .5em; } .post { margin:.5em 0 1.5em; border-bottom:1px dotted $bordercolor; padding-bottom:1.5em; } .post h3 { margin:.25em 0 0; padding:0 0 4px; font-size:140%; font-weight:normal; line-height:1.4em; color:$titlecolor; } .post h3 a, .post h3 a:visited, .post h3 strong { display:block; text-decoration:none; color:$titlecolor; font-weight:normal; } .post h3 strong, .post h3 a:hover { color:$textcolor; } .post p { margin:0 0 .75em; line-height:1.6em; } .post-footer { margin: .75em 0; color:$sidebarcolor; text-transform:uppercase; letter-spacing:.1em; font: $postfooterfont; line-height: 1.4em; } .comment-link { margin-$startSide:.6em; } .post img { padding:4px; border:1px solid $bordercolor; } .post blockquote { margin:1em 20px; } .post blockquote p { margin:.75em 0; } /* Comments ----------------------------------------------- */ #comments h4 { margin:1em 0; font-weight: bold; line-height: 1.4em; text-transform:uppercase; letter-spacing:.2em; color: $sidebarcolor; } #comments-block { margin:1em 0 1.5em; line-height:1.6em; } #comments-block .comment-author { margin:.5em 0; } #comments-block .comment-body { margin:.25em 0 0; } #comments-block .comment-footer { margin:-.25em 0 2em; line-height: 1.4em; text-transform:uppercase; letter-spacing:.1em; } #comments-block .comment-body p { margin:0 0 .75em; } .deleted-comment { font-style:italic; color:gray; } .feed-links { clear: both; line-height: 2.5em; } #blog-pager-newer-link { float: $startSide; } #blog-pager-older-link { float: $endSide; } #blog-pager { text-align: center; } /* Sidebar Content ----------------------------------------------- */ .sidebar { color: $sidebartextcolor; line-height: 1.5em; } .sidebar ul { list-style:none; margin:0 0 0; padding:0 0 0; } .sidebar li { margin:0; padding-top:0; padding-$endSide:0; padding-bottom:.25em; padding-$startSide:15px; text-indent:-15px; line-height:1.5em; } .sidebar .widget, .main .widget { border-bottom:1px dotted $bordercolor; margin:0 0 1.5em; padding:0 0 1.5em; } .main .Blog { border-bottom-width: 0; } /* Profile ----------------------------------------------- */ .profile-img { float: $startSide; margin-top: 0; margin-$endSide: 5px; margin-bottom: 5px; margin-$startSide: 0; padding: 4px; border: 1px solid $bordercolor; } .profile-data { margin:0; text-transform:uppercase; letter-spacing:.1em; font: $postfooterfont; color: $sidebarcolor; font-weight: bold; line-height: 1.6em; } .profile-datablock { margin:.5em 0 .5em; } .profile-textblock { margin: 0.5em 0; line-height: 1.6em; } .profile-link { font: $postfooterfont; text-transform: uppercase; letter-spacing: .1em; } /* Footer ----------------------------------------------- */ #footer { width: 1072px; clear:both; margin:0 auto; padding-top:15px; line-height: 1.6em; text-transform:uppercase; letter-spacing:.1em; text-align: center; } #rec{ width: 400px; height: 35px; background: url("")no-repeat; } #cat{ width: 400px; height: 30px; background: url("")no-repeat; } #aut{ width: 400px; height: 35px; background: url("")no-repeat; } #new{ width: 400px; height: 35px; background: url("")no-repeat; } #bar{ width: 400px; height: 22px; background: url("")no-repeat; } /** Page structure tweaks for layout editor wireframe */ } body#layout #header { margin-$startSide: 0px; margin-$endSide: 0px; } ]]></b:skin> </head> <body> <div id='outer-wrapper'><div id='wrap2'> <!-- skip links for text browsers --> <span id='skiplinks' style='display:none;'> <a href='#main'>skip to main </a> | <a href='#sidebar'>skip to sidebar</a> </span> <div id='header-wrapper'> <b:section class='header' id='header' maxwidgets='5' showaddelement='yes'> <b:widget id='Header1' locked='true' title=' (Header)' type='Header'/> <b:widget id='HTML6' locked='false' title='Navigation' type='HTML'/> </b:section> </div> <div id='content-wrapper'> <div id='crosscol-wrapper' style='text-align:center'> <b:section class='crosscol' id='crosscol' showaddelement='yes'/> </div> <div id='sidebar-wrapper'> <b:section class='sidebar' id='sidebar' preferred='yes'> <b:widget id='HTML2' locked='false' title='WELCOME' type='HTML'/> <b:widget id='HTML3' locked='false' title='MEMBERS' type='HTML'/> </b:section> </div> <div id='main-wrapper'> <b:section class='main' id='main' showaddelement='yes'> <b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/> </b:section> </div> <!-- spacer for skins that want sidebar and main to be the same height--> <div class='clear'> </div> </div> <!-- end content-wrapper --> <div id='footer-wrapper'> <b:section class='footer' id='footer'> <b:widget id='HTML1' locked='false' title='Content' type='HTML'/> </b:section> </div> </div></div> <!-- end outer-wrapper --> </body> </html> Code: <table border="0" width="900" cellspacing="0" cellpadding="0"> <tr> <td> Text part 1</td> <td> Text Part 2</td> </tr> </table> Hi All i have the above piece of code which shows a 2 colum table. How can i set the widths of my cols to match the width of the text that is in it? I.e set col 1 to the width of text that is in it ( will not always be same length) and have cols 2 start as soon as this finishes. Im assuming this is a simple thing to do but im just not sure. Basically what I want is a floating table head that follows you around when you scroll the table. Did all that, but the problem is that you need to cut out the head of the table to make it float. The problem comes where you have a table that has no column width set so the column width is determined by the content of tbody. I'm trying to make the browsers keep rendering the entire table, but hide the tbody so the columns won't loose their widths. It works fine in Mozilla and Opera, but IE has problems. Here is the code: HTML Code: <html> <head> <style type="text/css"> table { border-collapse: collapse; } tbody td { line-height: 0px; visibility: hidden; } </style> </head> <body> <table id="table_test" border="0" cellpadding="0" cellspacing="0" style="background-color: red;"> <thead> <tr> <th>column1</th> <th>column2</th> <th>column3</th> <th>column4</th> <th>column5</th> <th>column6</th> <th>column7</th> </tr> </thead> <tbody> <tr> <td>nekaj</td> <td>pac</td> <td>jaz sem pa daljsi tekst jaz sem pa daljsi tekst jaz sem pa daljsi tekst</td> <td>nekaj</td> <td>pac</td> <td>mora</td> <td>mora</td> </tr> <tr> <td>nekaj</td> <td>pac</td> <td>mora</td> <td>nekaj</td> <td>pac</td> <td>mora</td> <td>mora</td> </tr> <tr> <td>nekaj</td> <td>pac</td> <td>jaz sem pa daljsi tekst jaz sem pa daljsi tekst jaz sem pa daljsi tekst</td> <td>nekaj</td> <td>pac</td> <td>mora</td> <td>mora</td> </tr> <tr> <td>nekaj</td> <td>pac</td> <td>mora</td> <td>nekaj</td> <td>pac</td> <td>mora</td> <td>mora</td> </tr> <tr> <td>nekaj</td> <td>pac</td> <td>jaz sem pa daljsi tekst jaz sem pa daljsi tekst jaz sem pa daljsi tekst</td> <td>nekaj</td> <td>pac</td> <td>mora</td> <td>mora</td> </tr> <tr> <td>nekaj</td> <td>pac</td> <td>mora</td> <td>nekaj</td> <td>pac</td> <td>mora</td> <td>mora</td> </tr> <tr> <td>nekaj</td> <td>pac</td> <td>jaz sem pa daljsi tekst jaz sem pa daljsi tekst jaz sem pa daljsi tekst</td> <td>nekaj</td> <td>pac</td> <td>mora</td> <td>mora</td> </tr> <tr> <td>nekaj</td> <td>pac</td> <td>mora</td> <td>nekaj</td> <td>pac</td> <td>mora</td> <td>mora</td> </tr> <tr> <td>nekaj</td> <td>pac</td> <td>jaz sem pa daljsi tekst jaz sem pa daljsi tekst jaz sem pa daljsi tekst</td> <td>nekaj</td> <td>pac</td> <td>mora</td> <td>mora</td> </tr> <tr> <td>nekaj</td> <td>pac</td> <td>mora</td> <td>nekaj</td> <td>pac</td> <td>mora</td> <td>mora</td> </tr> <tr> <td>nekaj</td> <td>pac</td> <td>jaz sem pa daljsi tekst jaz sem pa daljsi tekst jaz sem pa daljsi tekst</td> <td>nekaj</td> <td>pac</td> <td>mora</td> <td>mora</td> </tr> <tr> <td>nekaj</td> <td>pac</td> <td>mora</td> <td>nekaj</td> <td>pac</td> <td>mora</td> <td>mora</td> </tr> <tr> <td>nekaj</td> <td>pac</td> <td>jaz sem pa daljsi tekst jaz sem pa daljsi tekst jaz sem pa daljsi tekst</td> <td>nekaj</td> <td>pac</td> <td>mora</td> <td>mora</td> </tr> <tr> <td>nekaj</td> <td>pac</td> <td>mora</td> <td>nekaj</td> <td>pac</td> <td>mora</td> <td>mora</td> </tr> <tr> <td>nekaj</td> <td>pac</td> <td>jaz sem pa daljsi tekst jaz sem pa daljsi tekst jaz sem pa daljsi tekst</td> <td>nekaj</td> <td>pac</td> <td>mora</td> <td>mora</td> </tr> <tr> <td>nekaj</td> <td>pac</td> <td>mora</td> <td>nekaj</td> <td>pac</td> <td>mora</td> <td>mora</td> </tr> <tr> <td>nekaj</td> <td>pac</td> <td>jaz sem pa daljsi tekst jaz sem pa daljsi tekst jaz sem pa daljsi tekst</td> <td>nekaj</td> <td>pac</td> <td>mora</td> <td>mora</td> </tr> <tr> <td>nekaj</td> <td>pac</td> <td>mora</td> <td>nekaj</td> <td>pac</td> <td>mora</td> <td>mora</td> </tr> <tr> <td>nekaj</td> <td>pac</td> <td>jaz sem pa daljsi tekst jaz sem pa daljsi tekst jaz sem pa daljsi tekst</td> <td>nekaj</td> <td>pac</td> <td>mora</td> <td>mora</td> </tr> <tr> <td>nekaj</td> <td>pac</td> <td>mora</td> <td>nekaj</td> <td>pac</td> <td>mora</td> <td>mora</td> </tr> <tr> <td>nekaj</td> <td>pac</td> <td>jaz sem pa daljsi tekst jaz sem pa daljsi tekst jaz sem pa daljsi tekst</td> <td>nekaj</td> <td>pac</td> <td>mora</td> <td>mora</td> </tr> <tr> <td>nekaj</td> <td>pac</td> <td>mora</td> <td>nekaj</td> <td>pac</td> <td>mora</td> <td>mora</td> </tr> <tr> <td>nekaj</td> <td>pac</td> <td>jaz sem pa daljsi tekst jaz sem pa daljsi tekst jaz sem pa daljsi tekst</td> <td>nekaj</td> <td>pac</td> <td>mora</td> <td>mora</td> </tr> <tr> <td>nekaj</td> <td>pac</td> <td>mora</td> <td>nekaj</td> <td>pac</td> <td>mora</td> <td>mora</td> </tr> <tr> <td>nekaj</td> <td>pac</td> <td>jaz sem pa daljsi tekst jaz sem pa daljsi tekst jaz sem pa daljsi tekst</td> <td>nekaj</td> <td>pac</td> <td>mora</td> <td>mora</td> </tr> <tr> <td>nekaj</td> <td>pac</td> <td>mora</td> <td>nekaj</td> <td>pac</td> <td>mora</td> <td>mora</td> </tr> </tbody> </table> </body> </html> And the result can be seen in the attached picture. Any ideas how to solve this or another way to preserve the thead column widths? Here is an image depicting the trouble I'm having: I want to make a table, consisting of many cells. These cells would be fixed, and *very different* in sizes. It's easy to make a no-space table when all the images are exactly the same size, but when you have images with a variety of sizes, the table doesn't fit perfectly. Basically I want to create a collage of images with overlay text on each image. My idea was that I could create a table, and each cell (td) would have a background which is the image. Then I could just type in that cell, so the text would be over the image. Then I'd do this for every one of my images, and a collage would be formed. The problem is, the table makes large white spaces wherever the image sizes don't match! How do I get rid of these spaces, or is there an entirely different code/approach I should be using? Thanks! Here is my current code: HTML Code: <html> <head> <style type="text/css"> table.nospace { padding: 0; margin: 0; border-collapse: collapse; } table.nospace tr { padding: 0; margin: 0; } table.nospace td { padding: 0; margin: 0; } </style> </head> <body> <TABLE class="nospace" width="2040px" height="2000px" cellspacing="0px" cellpadding="0px"> <TR> <td valign="top"> <table><tr> <TD WIDTH="800px" HEIGHT="800px" BACKGROUND="image.jpg" VALIGN="bottom"> <h1><FONT COLOR=#ffffff>text</FONT></h1> </TD></tr></table> </td> <td valign="top"> <table><tr> <TD WIDTH="700" HEIGHT="497" BACKGROUND="image" VALIGN="bottom"> <h1><FONT COLOR=#ffffff>Text</FONT></h1> </TD></tr></table> </td> <td valign="top"> <table><tr> <TD WIDTH="700" HEIGHT="467" BACKGROUND="image.jpg" VALIGN="bottom"> <h1><FONT COLOR=#ffffff>Text</FONT></h1> </TD></tr></table> </td> </TR> </TABLE> </body> </html> I would like to know if there is such a thing as a tag within a table, that can collapse if the next table within that prior one gets too big to center? Here is an example of a part of my code: Code: <table style="width:757; border-style:solid; border-width:thin; margin:0 0 15px 0"> <tr><td class="spb-category" width="750" style="text-align:left;" colspan="3">Title of this category</td></tr> <tr> <td valign="top" width="33%"> <table width="100%" border="0" cellpadding="0" cellspacing="0"> <tr><td width="100%" onmouseover="this.style.background='#ddddff';" onmouseout="this.style.background='#ffffff';"><table border="0" cellpadding="0" cellspacing="0"><tr><td class="spb-book"><a href="product_info.php?products_id=103">large size book title with author</a></td></tr><tr><td class="spb-author">Author</td></tr></table></td></tr> <tr><td width="100%" onmouseover="this.style.background='#ddddff';" onmouseout="this.style.background='#ffffff';"><table border="0" cellpadding="0" cellspacing="0"><tr><td class="spb-book"><a href="product_info.php?products_id=187">small sized book</a></td></tr><tr><td class="spb-author">Author</td></tr></table></td></tr> <tr><td width="100%" onmouseover="this.style.background='#ddddff';" onmouseout="this.style.background='#ffffff';"><table border="0" cellpadding="0" cellspacing="0"><tr><td class="spb-book"><a href="product_info.php?products_id=197">small sized book</a></td></tr><tr><td class="spb-author">Author</td></tr></table></td></tr> </table> </td> <td valign="top" width="33%"> <table width="100%" border="0" cellpadding="0" cellspacing="0"> <tr><td width="100%" onmouseover="this.style.background='#ddddff';" onmouseout="this.style.background='#ffffff';"><table border="0" cellpadding="0" cellspacing="0"><tr><td class="spb-book"><a href="product_info.php?products_id=101">small sized book</a></td></tr><tr><td class="spb-author">Author</td></tr></table></td></tr> <tr><td width="100%" onmouseover="this.style.background='#ddddff';" onmouseout="this.style.background='#ffffff';"><table border="0" cellpadding="0" cellspacing="0"><tr><td class="spb-book"><a href="product_info.php?products_id=188">small sized book</a></td></tr><tr><td class="spb-author">Author</td></tr></table></td></tr> <tr><td width="100%" onmouseover="this.style.background='#ddddff';" onmouseout="this.style.background='#ffffff';"><table border="0" cellpadding="0" cellspacing="0"><tr><td class="spb-book"><a href="product_info.php?products_id=120">Medium sized boot title</a></td></tr><tr><td class="spb-author">Author</td></tr></table></td></tr> </table> </td> <td valign="top" width="33%"> <table width="100%" border="0" cellpadding="0" cellspacing="0"> <tr><td width="100%" onmouseover="this.style.background='#ddddff';" onmouseout="this.style.background='#ffffff';"><table border="0" cellpadding="0" cellspacing="0"><tr><td class="spb-book"><a href="product_info.php?products_id=102">a very long title of a book which includes the author</a></td></tr><tr><td class="spb-author">Author</td></tr></table></td></tr> </table> </td> </tr> </table> 1. I want to center each column so that the first letter of each book title is lined-up, but that the longest title on each column has equal space on both left and right. 2. If you look at each column, the width is about 245px. With regard to the first book title in the first column, I have 50px that is extra, therefore I'd like to automatically add 25px to the front of each one of the books for that column. 3. On the second column, there is about 80px extra, therefore I'd like to auto-add 40px to the front of each book in that column. My problem is that I don't want the column centered individually because then I will lose the straight line that I'd like each book to be on top of each other as it starts the line. I tried: style="margin-left:20px" and style="padding-left:20px" but when the title got too long it would not auto-collapse the left side, I want it to collapse! I want one tag that I can insert evenly on every section to get the push to the right an even amount of spaces for every book on each column. If it comes down to it, I wouldn't mind sacrificing that each column gets auto aligned to what is necessary for its own column. So if I have to use one number, say 30px, for the whole webpage, then ok, I'd do it. My problem is that sometimes the 30px empty filler space for the left, in order to push the title to the right, is not enough space for a very long title and it winds up sending half the title to the next line, which I don't want. This code is a list of books that spans about 20 categories and about 400 book titles. Thanks in advance for any help you might offer. 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! I will be brief in hoping that the issue does not require a thesis to properly fix. I'm dealing with tables within tables..within tables. In one instance, I have a 2x1 (row by column) table inside another table. So, we'll call the inside table "B" and the outside table "A". Table B is centered inside a column in Table A. I'm trying to maximize the space, but nearly nothing works. Setting Table B height=100% does nothing. The only thing that works is setting the height=N px, where N is a number. This is no good, as I want to the site to work on all resolutions. I want it to be proportional. How can I fix this? Here's what I'm dealing with, visually: Any help would be welcome. 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 I have a list within a table and much of the content has links to two different javascript codes. One is a popup javascript to so that I can control the window size and the other is a toggle.display javascript to show/hide specific details about my list. The scripts run fine, but for some odd reason the content in my table gets cut off randomly towards the end of the list. I went through to make sure that I didn't have any div tags nested.. etc.. and i'm now at a complete loss as to why my content within the table gets randomly cut off. Any help would me much appreciated. The link for the site is he http://netimpact.org/displaycommon.c...rticlenbr=2440. You'll notice at the very bottom of the table it randomly stops.. Hi, i'm completely new with HTML. I'm making a website for a student activity group i'm in. We chose for me, because i had a little javascript experience. Thats more than most of us. Here goes the story. We are organizing a trip for other students. The students can enroll for the trip on the website. The form uses the following code; Code: <?php $myFile = "enrollments.php"; $fh = fopen($myFile, 'a+') or die("can't open file"); $stringData ="<tr><td>".$_POST["name"]."</td><td>".$_POST["tel"]."</td><td>".$_POST["mail"]."</td><td>".$_POST["rnumber"]."</td><td>".$_POST["shirt"]."</td><td>".$_SERVER['REMOTE_ADDR']."</td><td>".date("d-m, G:i:s")."</td></tr>\n"; fwrite($fh, $stringData); fclose($fh); ?> Named post.php The code results in a simple file with only <tr>info</tr><tr>info2</tr>. Another page uses the following code to show the enrollments Code: <table id='enrollments'><tr><th>Name</th><th>Tel</th><th>Mail</th><th>Reknumber</th><th>Shirt</th><th></th><th>IP</th><th>Time</th></tr> <?php include('enrollments.php'); ?> </table> named showenroll.html Right. So far so good. Now we'd like to show the students which are thinking about enrolling howmany other students already have enrolled. In other words, i'd like to count the number of rows in the "showenroll.html" and display that in the index.html. Ive found trough google the var (document.getElementById('ID')). However, i'm not able to add this var to the index.html, and direct it to a element ID on another page. As most newbs would do, i've tried document.getElementById('./showenroll/enrollments') I'm wondering if anyone could tell me how i can direct the document.getElementById to an element id that is not on the same page. And, if this is impossible, how i can make a counter of the enrollments Drayn p.s. ive tried to search this forum on table row counter, but it didn't provide the right solution(s?) for me. the bold stuff is what i added in to try and make it sortable and it didn't work. Code: <?xml version="1.0" encoding="UTF-8"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="content-type" content="text/html; charset=utf-8" /><title /> <link rel="stylesheet" type="text/css" href="example.css"/> <meta name="author" content="my name" /> <link href="http://www.joostdevalk.nl/" rev="made" /> <script type="text/javascript" src="sortable.js"></script><meta name="generator" content="StarOffice/OpenOffice.org XSLT (http://xml.openoffice.org/sx2ml)" /><meta name="author" content="my name" /><meta name="created" content="2007-04-03T18:49:47" /><meta name="changedby" content="Ryan Gleason" /><meta name="changed" content="2007-05-04T16:38:49" /><base href="." /><style type="text/css"> @page { } table { border-collapse:collapse; border-spacing:0; empty-cells:show } td, th { vertical-align:top; } h1, h2, h3, h4, h5, h6 { clear:both } ol, ul { padding:0; } * { margin:0; } *.ta1 { } *.ce1 { font-family:Arial; border-bottom-width:0.0351cm; border-bottom-style:solid; border-bottom-color:#000000; border-left-style:none; border-right-width:0.0133cm; border-right-style:solid; border-right-color:#000000; border-top-style:none; font-weight:bold; } *.ce2 { font-family:Arial; border-bottom-width:0.0351cm; border-bottom-style:solid; border-bottom-color:#000000; border-left-width:0.0133cm; border-left-style:solid; border-left-color:#000000; border-right-width:0.0133cm; border-right-style:solid; border-right-color:#000000; border-top-style:none; font-weight:bold; } *.Default { font-family:Arial; } *.Heading { font-family:Arial; text-align:center ! important; font-size:16pt; font-style:italic; font-weight:bold; } *.Heading1 { font-family:Arial; text-align:center ! important; font-size:16pt; font-style:italic; font-weight:bold; } *.Result { font-family:Arial; font-style:italic; font-weight:bold; text-decoration:underline; } *.Result2 { font-family:Arial; font-style:italic; font-weight:bold; text-decoration:underline; } *.co1 { width:1.3516in; } *.co10 { width:0.7854in; } *.co11 { width:0.5681in; } *.co12 { width:0.8925in; } *.co2 { width:0.9925in; } *.co3 { width:0.6984in; } *.co4 { width:0.622in; } *.co5 { width:0.372in; } *.co6 { width:0.3827in; } *.co7 { width:0.9055in; } *.co8 { width:0.6661in; } *.co9 { width:0.6772in; } *.ro1 { height:0.1783in; } </style></head> <body dir="ltr"> <table class="sortable" id="anyid" cellpadding="0" cellspacing="0"> <table border="0" cellspacing="0" cellpadding="0" class="ta1"> <colgroup><col width="150" /><col width="110" /><col width="78" /><col width="69" /><col width="41" /> <col width="42" /><col width="101" /><col width="110" /><col width="74" /><col width="78" /><col width="75" /><col width="75" /><col width="75" /><col width="87" /><col width="63" /></colgroup> that should be what you need..i exported an excel file as an xhtml file and read the source code and that's how it was, real unorganized and such. basically it's got stats of baseball players and i want to make them easily sortable. i created a sortable table using another piece of code but have to manually enter everything in if i do it that way. I have a table and after I select the question (the ball) I would like the answer to come up in another column in that table. Is that too much? Keep'er simple please. Thanks. It's hard to explain, but basically I want to achieve creating a smaller file looking portion of my site, with a larger around and tabs. Basically this: I currenty just have the outer red table, using .gif's to round the corners. I tried copying the code again to place in the middle of the red table code and it doesn't work. Any help to achieve this effect would be great. Here is the code I am using: PHP Code: <table width="450" cellpadding="0" cellspacing="0" border="0" style="background-color: #086591"> <tr> <td width="14"><img src="images/top_left.jpg" width="14" height="14" border="0" alt="..." /></td> <td width="172"></td> <td width="14"><img src="images/top_right.jpg" width="14" height="14" border="0" alt="..." /></td> </tr> <tr> <td></td> CONTENT HERE <td></td> </tr> <tr> <td><img src="images/bottom_left.jpg" width="14" height="14" border="0" alt="..." /></td> <td></td> <td><img src="images/bottom_right.jpg" width="14" height="14" border="0" alt="..." /></td> </tr> </table> Thanks for any help. |