HTML - Content In Table Stops Showing At End Of Table?
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.. Similar TutorialsHelp please- I'm trying to put an input box into a table with a background. However, when I do- the background keeps enlarging even though the text inside of it fits inside perfectly. Look: HTML Code: <TABLE background="http://www.uzumakiworld.com/uzuvideo/tabletoptab.gif" border= 0px; cellspacing=0 height=26px width=289px" align="center"> <td> <script> <!-- Hide from old browsers /****************************************** * Find In Page Script -- Submitted/revised by Alan Koontz (alankoontz@REMOVETHISyahoo.com) * Visit Dynamic Drive (http://www.dynamicdrive.com/) for full source code * This notice must stay intact for use ******************************************/ // revised by Alan Koontz -- May 2003 var TRange = null; var dupeRange = null; var TestRange = null; var win = null; // SELECTED BROWSER SNIFFER COMPONENTS DOCUMENTED AT // http://www.mozilla.org/docs/web-developer/sniffer/browser_type.html var nom = navigator.appName.toLowerCase(); var agt = navigator.userAgent.toLowerCase(); var is_major = parseInt(navigator.appVersion); var is_minor = parseFloat(navigator.appVersion); var is_ie = (agt.indexOf("msie") != -1); var is_ie4up = (is_ie && (is_major >= 4)); var is_not_moz = (agt.indexOf('netscape')!=-1) var is_nav = (nom.indexOf('netscape')!=-1); var is_nav4 = (is_nav && (is_major == 4)); var is_mac = (agt.indexOf("mac")!=-1); var is_gecko = (agt.indexOf('gecko') != -1); var is_opera = (agt.indexOf("opera") != -1); // GECKO REVISION var is_rev=0 if (is_gecko) { temp = agt.split("rv:") is_rev = parseFloat(temp[1]) } // USE THE FOLLOWING VARIABLE TO CONFIGURE FRAMES TO SEARCH // (SELF OR CHILD FRAME) // If you want to search another frame, change from "self" to // the name of the target frame: // e.g., var frametosearch = 'main' //var frametosearch = 'main'; var frametosearch = self; function search(whichform, whichframe) { // TEST FOR IE5 FOR MAC (NO DOCUMENTATION) if (is_ie4up && is_mac) return; // TEST FOR NAV 6 (NO DOCUMENTATION) if (is_gecko && (is_rev <1)) return; // TEST FOR Opera (NO DOCUMENTATION) if (is_opera) return; // INITIALIZATIONS FOR FIND-IN-PAGE SEARCHES if(whichform.findthis.value!=null && whichform.findthis.value!='') { str = whichform.findthis.value; win = whichframe; var frameval=false; if(win!=self) { frameval=true; // this will enable Nav7 to search child frame win = parent.frames[whichframe]; } } else return; // i.e., no search string was entered var strFound; // NAVIGATOR 4 SPECIFIC CODE if(is_nav4 && (is_minor < 5)) { strFound=win.find(str); // case insensitive, forward search by default // There are 3 arguments available: // searchString: type string and it's the item to be searched // caseSensitive: boolean -- is search case sensitive? // backwards: boolean --should we also search backwards? // strFound=win.find(str, false, false) is the explicit // version of the above // The Mac version of Nav4 has wrapAround, but // cannot be specified in JS } // NAVIGATOR 7 and Mozilla rev 1+ SPECIFIC CODE (WILL NOT WORK WITH NAVIGATOR 6) if (is_gecko && (is_rev >= 1)) { if(frameval!=false) win.focus(); // force search in specified child frame strFound=win.find(str, false, false, true, false, frameval, false); // The following statement enables reversion of focus // back to the search box after each search event // allowing the user to press the ENTER key instead // of clicking the search button to continue search. // Note: tends to be buggy in Mozilla as of 1.3.1 // (see www.mozilla.org) so is excluded from users // of that browser. if (is_not_moz) whichform.findthis.focus(); // There are 7 arguments available: // searchString: type string and it's the item to be searched // caseSensitive: boolean -- is search case sensitive? // backwards: boolean --should we also search backwards? // wrapAround: boolean -- should we wrap the search? // wholeWord: boolean: should we search only for whole words // searchInFrames: boolean -- should we search in frames? // showDialog: boolean -- should we show the Find Dialog? } if (is_ie4up) { // EXPLORER-SPECIFIC CODE revised 5/21/03 if (TRange!=null) { TestRange=win.document.body.createTextRange(); if (dupeRange.inRange(TestRange)) { TRange.collapse(false); strFound=TRange.findText(str); if (strFound) { //the following line added by Mike and Susan Keenan, 7 June 2003 win.document.body.scrollTop = win.document.body.scrollTop + TRange.offsetTop; TRange.select(); } } else { TRange=win.document.body.createTextRange(); TRange.collapse(false); strFound=TRange.findText(str); if (strFound) { //the following line added by Mike and Susan Keenan, 7 June 2003 win.document.body.scrollTop = TRange.offsetTop; TRange.select(); } } } if (TRange==null || strFound==0) { TRange=win.document.body.createTextRange(); dupeRange = TRange.duplicate(); strFound=TRange.findText(str); if (strFound) { //the following line added by Mike and Susan Keenan, 7 June 2003 win.document.body.scrollTop = TRange.offsetTop; TRange.select(); } } } if (!strFound) alert ("String '"+str+"' not found!") // string not found } // --> </script> <!-- EXAMPLE FORM OF FIND-IN-PAGE SEARCH USING SUBMIT (ALLOWING 'ENTER/RETURN' KEY PRESS EVENT) --> <form name="form1" onSubmit="search(document.form1, frametosearch); return false"> <b><font size=2><font color=white><font face=tahoma>Anime:</font></font></a></b></font></font></font> <input type="text" name="findthis" value="Search for Anime" size="15" style="height:18px;font-size:9px;" title="Press 'ALT s' after clicking submit to repeatedly search page"> <input type="submit" value="Search!" style="height:18px;font-size:9px;" ACCESSKEY="s"></form> </td></tr></table> See, I got the Search script from DYNAMIC DRIVE, and it works amazingly- I just need to make it so it fits properly into the table. Help! Thanks for reading my post! hi all, I'm trying to just put an image in a table but for the life of me can't see where i've gone wrong. here is the code: <table id=table1 align=center background=weddingband/weddingcard.gif></table> The image is in the corresponding folder. this is the css: #table1 { border: )0px solid blue;} #table1 td{ border: 0px ;} help appreciated, thanks, r I had to move one of the cells of my table from its own row to the end of a new row, and now the border that was there is gone. Can you help me? I want a simple black border around each cell like the other ones in the screen shot. Here's a screen shot : http://imageshack.us/photo/my-images...enshotfka.png/ The cell in question starts with "reads" but I took out all the text on the screen shot. Any other questions or information needed to help me, don't hesitate to ask. Thanks! Here's the table code: HTML Code: <table align=center width=1100 bgcolor="#000000" border=1 bordercolor="black" cellpadding=0 cellspacing=0> <tr> <td colspan=2 bgcolor="white" width=890 height=60> <p align=center> <font size=7 face="georgia, arial narrow, eras light itc, edwardian script itc"> <b><img src="..."></b> </font> </p> </td> </tr> <tr> <td rowspan=2 bgcolor="#A9F5F2" width=150 valign=top> <font size=2> <p align=center> <br><b><font size="+1">Navigation</font></b> <br><br><b>Entries</b><br><br> <a href="index.html">Freshly printed</a><br> <a href="older.html">Old news</a> <p align=center> <b>Social</b><br><br> <a href="rings.html">Rings</a> <br> <a href="..."target="_blank">Diaryland</a><br> <a href="...>Google+</a><br> <a href="...">Facebook</a><br><br> <b>Contact</b><br><br> <a href="..."target="_blank">Email</a><br> <a href="...">Notes</a><br><br> <b>Credit</b><br><br> <a href="...">Host</a><br> <a href="...target="_blank">Design</a><br> <a href="http://imageshack.us/"target="_blank">Image Hosting</a> </font> </td> <td bgcolor="#F8F8E2" width=600 height=350 valign=top> <table width="100%" cellpadding=5> <tr> <td> <font size=2> <p align=center><b>History</b><br> <p> <p> <A HREF="older.html">2008</A><BR> <A HREF="older1.html"> 2006-2007</A><BR> <A HREF="older2.html">2005</A><BR> </P> %%older_entries%% <P> <A HREF="older.html">2008</A><BR> <A HREF="older1.html"> 2006-2007</A><BR> <A HREF="older2.html">2005</A><BR> </font> <p> </p> </td> <td rowspan=2 bgcolor="#A9F5F2" width=150 valign=top bordercolor="black" cellpadding=1 cellspacing=1> <p align=center> <font size=2> <br><b><font size="+1">Reads</font></b><br> <p align=center><b>Diaries</b></p> <p align=center> %%buddylist%% </P> <p align=center> <b>Comics<br><br></b> <a href="http://www.multiplexcomic.com/index.php"target="_blank">Multiplex</a><br> <a href="http://www.theaterhopper.com/"target="_blank">Theater Hopper</a><br> <a href="http://www.ctrlaltdel-online.com/comic.php"target="_blank">Ctrl-Alt-Del</a><br> <a href="http://www.giantitp.com/index.html"target="_blank">Order of the Stick</a><br> <p align=center><b>Blogs</b></p> <p align=center> <a href="http://www.google.com/support/plus/bin/static.py?hl=en&page=release_notes.cs&rd=1">Google+ Releases</a></P> <p align=center> <b>Call Me<br></b><p><p> <object type="application/x-shockwave-flash" data="..." width="230" height="85"><param name="movie" value="https://clients4.google.com/voice/embed/webCallButton" /><param name="wmode" value="transparent" /><param name="FlashVars" value="id=ce3a153bdaba14709f5a3976cbd3b991c854aaca&style=0" /></object></div> </font> </p> </td> </tr> </table> </td> </tr> <tr> <td colspan=2 bgcolor="#F6A1C6" width=650 height=30> <font size=2> <p align=center><a href="%%prev%%">last</a> - <a href="%%next%%">next</a></p> </font> </td> </tr> </table> Thanks for any help you can give! I really appreciate it! The bgcolor of a table works in Iexplorer but not in Firefox. Also the left/right/topmargin doesnt work at all in Firefox. Any idea how this is? Thanks for your help --khan It seems this is showing in every browser as incorrect. The text is showing below the table when it should be left aligned below the mission tab in the white background. http://billslawnandlandscape.com/test/ Hello, I have a website that I'm having trouble with. The problem only shows up in Firefox. For some reason, a few cells in my tables are showing gaps between the borders and the JPG image within it. None of my tables or cells have any spacing or padding above 0. The cell heights aren't set to anything. Here's a screen shot for an example of what I mean: The gaps I'm referring to are where the red arrows are pointing. Now here's the same image with the borders of the tables within the problem region set to 1: Can anyone explain this? Is there are minimum cell height in Firefox or something? You can view my website at http://www.rrexecutivesuites.com (remember to view it in Firefox). This is driving me nuts. Try this code in IE6. Why are the three red rows on the left showing a height of considerably more than 60pixels when the code asks for exactly 60? Firefox shows this correctly. Code: <html> <head> <title>Test</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> </head> <table width="900" border="0" cellpadding="0" cellspacing="0"> <tr> <td height="20" width="195" valign="center" bgcolor="#AAAAAA"><p> </p></td> <td rowspan="5" width="415" valign="top" style="padding: 20px;" bgcolor="#FFFF66"><p>Middle column</p></td> <td rowspan="5" width="290" height="440" valign="top" bgcolor="#AAAAAA"><div align="center">Right column</div></td> </tr> <tr> <td width="195" height="60" valign="center" bgcolor="#FF0000">Row 1</td> </tr> <tr> <td width="195" height="60" valign="center" bgcolor="#FF0000">Row 2</td> </tr> <tr> <td width="195" height="60" valign="center" bgcolor="#FF0000">Row 3</td> </tr> <tr> <td valign="top" bgcolor="#FFFF66"> </td> </tr> <tr> <td colspan="3" bgcolor="#FFFF66"> </td> </tr> </table> </body> </html> I am working on a site that I have designed using a table to lay everything out. Everything works fine when viewing via IE. I tried opening it with Firefox and the backround colors for the different cells did not show up. Can anyone tell me what I should do so that the bgcolor shows up correctly in firefox? temp web-site address: http://worldcargousa.com/estate_lawn part of the html in question: <td width="166" align="center" valign="middle" bgcolor="61592b"><p align="center" class="style9"><span class="style15">715-220-1879 </span></p> <p class="style13">Estate Lawn Services<br> 536 Gentalwood Square<br> Purcellville, VA 20132</p> <p align="left" class="style8"> </p></td> Ok, so i uploaded my page to the web and for some reason the bullets are not showing up inside the table cells of the Toppings table to my page. for some reason it shows up fine in Chrome, but in IE and Firefox, they show up to the left of the table cells making it look weird? does someone know how to make it so it shows up the way it does in chrome for all browsers? whats wrong with my code? heres the page... http://valspizzaplace.com/newwebsite...inos/pizza.php ahh this is frustrating, i can't figure out and its probably something simple. HTML Code: <table id="content" width="850" height="400" border="0" cellpadding="0" cellspacing="5" align="center"> <tr> <td width="28" valign="top"></td> <td width="584" valign="top"> </td> <td width="20" valign="top"> </td> </tr> </table> This is my above table and I want it to lock content inside a td if that makes sense, for example... if I type 1000 letters into the middle td of a width of 584, the table will get bigger and it looks strange. How can I fix this issue? Heylo, On my website, the pages i use to link to content that is added regularly such as a News page etc. i use a tables, and i add a new table each time i add new content so that i can have it at the top of the page. An example is he http://ryv.org.uk/news However the amount of content i have is growing, so i want to split the content into two colums so i have double the amount in the same space. But i need the page to have the newest content at the top, then the next newest to move to the side, then to move the the next line in the table...i have a diagram below to explain what i mean. Is there a way to do this with tables? And how else can it be done? good day! This is probably a simple problem but here it is. http://www.innovativemovesus.com/referral-form.html At the bottom of the form there is a resizable comment field. When the field is expanded to the right, it moves the column to the right along with it. I'd like to prevent this. If only it would be resizable up to, and no more than, the constraints of the table cell. I suspect it has something to do with specifying the width of the cell (which I have done). Thanks for the help! I need help/ I applied an opacity on my table background. But the problem is, i have content such as images and text areas in my table which are getting affected by the opacity i placed on my table. I applied a 14% opacity to my table and now its making my images and textbox inside my table invisible. anyway to fix this problem. here is an example of my code HTML <table class="home"> <tr> <th>Welcome</th> </tr> <tr> <td width="100" height="200"> <p><img src="Web Photos/welcomebanner.gif" class="feature" width="1025" height="200" /></p> </tr> CSS table.home td { font-size: small; border: 1px solid FFFFFF; background-color: #FFFFFF; filter: alpha(opacity=14); } Helllo all, I'm hoping someone with more HTML skills than I have can see where my problem is with trying to modify a pre-built website. I have an area at the top of my webpage where I'm trying to just add a small iframe that will contain a link to a related website. What happened when I added this in what I thought was the right place, is that it appeared in place of where other content was supposed to be. I then tried to contain the problem by creating a table, and given that each of the two existing pieces of content were in div blocks, I put each div block within a table data element (td). Unfortunately, even with specified column widths, the best of the results I've achieved results in my site search content having the button get pushed onto a new line and thus almost invisible, leaving the text input box in place. It's as if the PHP stuff in that div block is somehow pushing the browser to considerably widen the first cell unless I restrict it's width. The site you can see this on is: http://debtfreenewsblog.com The site is somewhat slow - takes 30 to 45 seconds to load (a separate issue, but if you happen to see why, let me know), but once it does, you can use view source and see the very first table and you'll see the resulting HTML. Dreamweaver's design view doesn't do anything to indicate why there's a problem, and kind of hides reality from me. There is a style sheet, or perhaps even more than one, for the site, and as I'm not familiar with exactly how that works together with everything else, that may well be where the problem is. Any and all help will be appreciated. My objective is to just get the search button to come back to the same line as the text input box. Steve (aka sgmunson) Hello everyone, I am in deep trouble... :-( ... For some reason Safari does not adapt the table height to the content size. All other browsers automatically adapt the table height to the content size, but Safari doesn't, and the result of the website I am developing, when seen on Safari, is a mess... Can someone tell me how to make Safari adapt automatically adapt table height to content size? Thank you very much in advance and anyway... Cheers, John 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> 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. 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. |