|
HTML - How To Make A Scrollable Table Cell Consistenly Have A Scroll Bar?
Despite reading multiple posts on "scrollable" table cells on the forums, I've not yet quite found the answer to my question, so hopefully I can get some feedback from all viewers out there!
I and some friends run a small Catholic arts and crafts website (www.illuminatedink.com) through which we sell products that we create. I've based the page layout on a table instead of frames or iframes. The table has 3 cells in it. The entire top "banner area" of the screen is one cell. Below that on the left we have the naviagation menu cell. The main content that someone is trying to view appears in the remaining lower right cell (also the largest). This page works great on all the computers at my house (3 of them) and on most other computers as well. I have yet to test this in IE 7.0, but if someone else has that browser, please let me know what happens. So, what's the problem you ask? That lower right table cell where all the content appears does not work for everyone. I just got another complaint today that no scroll bar appears and the person can only see what's in the top of cell, there is no "scrollability". Here is a sample (with notes made by me in ** NOTE ** format). The notes are of course not in the actual code, I am showing only the code really matters here. Code: <BODY STYLE="margin-top: 0px; margin-left: 0px">
<TABLE CELLPADDING=0 CELLSPACING=0 HEIGHT=590 WIDTH=1000>
<TR HEIGHT=90>
<TD WIDTH=1000 COLSPAN=2 STYLE="background-image:url('http://www.illuminatedink.com/images/background/banner.jpg')">
 
</TD>
</TR>
<TR HEIGHT=500>
<TD VALIGN=top WIDTH=200 STYLE="background-image:url('http://www.illuminatedink.com/images/background/menu_bar.jpg');background-repeat:no-repeat">
<TABLE ALIGN="center" CELLSPACING=0 CELLPADDING=0>
**Navigation menu on the left side goes here**
</TABLE>
</TD>
<TD WIDTH=800 VALIGN="top">
<DIV STYLE="overflow:auto;height:490px;width:800px;position:absolute;left:200;padding-right:30px; padding-left:0px"><MAP NAME="page_links">
**All code for the scrollable cell in the lower right goes here**
</DIV>
</TD>
</TR>
</TABLE>
</BODY>
So, can anyone possibly tell me why this would have a scroll bar in some browers and not in others? Or does anyone have any code changes I could make that may guarantee that they will get a scroll bar in that lower right cell? The complaints that I have received mainly seem to be from Mac users using IE for Mac. But I just had someone who had a brand new Dell with Windows XP Prof. and the most recent IE 6, which is exactly the configuration I run, but didn't get a scroll bar when I did. Ideas? Thank you! Similar TutorialsNot sure if I worded that right. But I have a 3 column table with three rows. And I want a row with no columns at the top that is the full width, so I can put a title in there. how do I do that? Here is my current title. Thank you. Code: <table id="box-table-b">
<thead>
<tr>
<th width="175" scope="col">Website</th>
<th width="69" scope="col">Lowest <br />
Price</th>
<th width="50" scope="col">BUY</th>
</tr>
</thead>
<tbody>
<tr>
<td>xxxx</td>
<td>x</td>
<td><a href="#">Here</a></td>
</tr>
<tr>
<td>xxxxx</td>
<td>x</td>
<td><a href="#">Here</a></td>
</tr>
</tbody>
</table>
Not sure if this is possible or not, but I created a scroll box, which contains a title and then text underneath it. Is there a way to limit the scrollable area, so the title is always fixed at the top of the scroll box and the text scrolls up and disappears just below the title? If its not possible in HTML/CSS, then how else can I do this? Thanks for your help in advance. aaaaaaaaaaaaaaaaaaaaaaa Hi everyone: Any help appreciated. Objective: To have three equally sized and spaced images arranged horizontally, with their size set automatically by the size of the window. Development: I'm using a Mac, and I don't have ready access to a PC to experiment. What I tried: Code: <table> <tr> <td><img src = "a.png" style = "width: 100%" /></td> <td><img src = "b.png" style = "width: 100%" /></td> <td><img src = "c.png" style = "width: 100%" /></td> </tr> </table> <p class = "caption">A caption for the 3 images</p> <p class = "legend" >A legend for the three images</p> What happened: This works perfectly in Safari and Firefox (Mac) and Firefox under Vista, but in Internet Explorer under Vista , the images are HUGE - the unscaled size of the originals. What I think is the reason: IE is taking 100% to be relative to the width of the body element, not the td element. What I don't want to have to do: Use fixed sizes or calculate the sizes on the fly. What I'm trying now: removing the table and using a div, and inside that, setting the image width to 33% and floating one right and one left. What's the trick to get around this IE "gotcha" please? Thanks from a newbie. HI: I have a very long table (with 5 columns). I wish to have this table (vertical size="350px") to have a scroll bar on the right-side, so that the user can scroll down thru the table, but yet still see the 'div' below it on the viewport. Suggestions please on a 'scrollable' table. Thanks, -Mel Smith I have a Table and I need to have it in some kind of scrollable panel. Is there such a scrollable component? Thanks... Can anyone help me out? I've set up a test site for a project where I have a scrollable table within an iFrame. Techincally, its an iFrame within an iFrame which gets you to a scrollable table I also added an auto-scroll with anchor-links. Everything finally works, but I really want to remove the horizontal-scroll bar that shows up, while keeping the vertical-scroll bar. (Upon testing, I found without the vertical-scroll bar, the anchor-links and auto-scroll don't work correctly.) here's the link to the test site: http://www.thegrandamerican.com/ here's the line of code I think is the correct place to make corrections: <iframe id="myiframe" name="myiframe" src="oprah june 09_news.htm" width="900" height="475" scrolling="yes" overflow-y: scroll></iframe> The hierarchy works as follows: index.htm > spotlight_news.htm > oprah june 09_news.htm The reason for all the iframes is to have elements on the higher pages that will stay in place, such as a music player and dynamic menu bar. other notes and associated files (for the auto scroll) a smooth-src-comments.js smooth.pack.js Thanks. - J hi, i have a jsp page, in this page i am displaying data retrieved from mysql database. Now the problem is i must color table cell based on cell value. how to implement this.please give me an sample or working code foe this problem.( any code is accepted) preferably html or javascript. i.e if cell value is "late" then display that cell in red color else display the cell in green color please help me. Thanks ad Regards Akash I'm a beginner in HTML. I would like to make a row with two cells, the first one being 200 pixels wide and the second cell stretching out to fill up the rest of the horizontal space... I thought that putting in width=100% in that <td> tag would do it but if I do that, that cell covers up my first cell (the 200 px one). How can I go about doing that? Thanks!! 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! Hi, I am very new to HTML and our webdesigners have run off without completing the job properly so I am trying to do it myself. The problem is with the "News" page of the site which is a tumblr page configured to look like the rest of the site. Rather than come on here and list all the problems with it I thought I'd tackle one at a time. The first thing I am trying to achieve is making the area in which posts are not submitted (the header, and the left and right) scroll down with you. So as you scroll down through the posts you can still see the links at the top of the page and on the sides. Is this possible? Here is the page I am talking about: http://secret-store.tumblr.com/ Thanks for any help guys. I have this 2 scripts: 1. script Allowed me to make URL switching (new page is opened after 20 sec) 2. script Allowed me a vertical scroll My Question: HOW TO MAKE THIS: I WANT EACH SITE TO OPEN AUTOMATICALLY LIKE IN 1. SCRIPT AND TO BEGIN TO SCROLL AUTOMATICALLY AFTER OPENING DURING 20 SEC... THAN SWITCHING TO A NEW PAGE, SCROLLING VERTICALY DURING 20 SECONDS... AND SO FOR EACH SWITCHING WEBPAGE... 1. script: <html> <head> <title>URL Switcher</title> <script language="JavaScript" src="url_switcher.js"> </script> <script language="JavaScript"> var i = 0; var url_array = new Array(); url_array[0] = "http://www.google.com"; url_array[1] = "http://www.codingforums.com"; url_array[2] = "http://www.ebay.com"; url_array[3] = "http://wm2.uvic.ca"; function changeURL(ms) { document.frames['my_frame'].location.replace(url_array[i]); i = (i+1)%url_array.length; setTimeout("changeURL("+ms+")", ms); } </script> </head> <body style="margin:0px; overflow-y:hidden" onLoad="changeURL(20000);"> <iframe name="my_frame" width="100%" height="100%" border="0" frameborder="0"></iframe> </body> </html> 2. script: <!-- Vertical Scroll Use this script to automatically scroll the web page when the user pushes a button --> <HEAD> <SCRIPT LANGUAGE="JavaScript"> function CoffeeScroll() { for (I=1; I<=750; I++){ parent.scroll(1,I) } } // End --> </SCRIPT> <!-- Put this into the BODY of your webpage --> <BODY><CENTER><FORM><input type=button value="Scroll Page" onClick="CoffeeScroll()"></FORM></CENTER> THANK YOU VERY MUCH FOR YOUR HELP I'm ultra new to html and I made a super basic navigation bar for my page, the problem is when the browser is made small side-to-side, instead of adding a scroller at the bottom and keeping the links in line, it just smashes them up and starts moving them below each other. How do I change that ? Here is a link to the page I'm talking about so you can see it. http://www.neonloveco.com/home Thanks everyone how do you make an inline fame that does not have scroll bars but resizes the parent page to allow the whole child page to fit in the parent Hi everyone. So I got my template set up to the way I like it and everything is rolling good. I inserted a picture into one of the cells in the table and it shifts everything over. Here is my code: <td width="625" colspan="1" bgcolor="white"> <font type="Arial" size ="5" color="blue"> <b>Floorplan</b><br> <center> <a href="floorplanlarge.jpg"><img src="floorplansmall.jpg" border="0" /></a> </center> </td> I have been working on fixing this for the last hour and am out of ideas on what is going on. The picture is smaller than the cell width range. My picture width is 311 pixels and the cell width is 625 pixels. I dont know if there is code whether its HTML or CSS to prevent the cell from widening. Any help would be appreciated. Also if you need me to provide more detail I can. Thanks. Code: <td class="row5" style="text-align:center;" width="50"> <b style="font-size:15px; color:#c9c5be; font-family:Georgia;">2</b> <span style="color:#c9c5be;">topics</span> <br /> <b style="font-size:15px; color:#c9c5be; font-family:Georgia;">1</b> <span style="color:#c9c5be;">posts</span><br /><br /> </td> I'm not sure how it's looking in IE, but in Firefox all the text in this table cell is aligned to the right. I can't figure out why. Row5 only adds a background color and nothing else. http://sa.zrkonium.net/ It's visible here ^ The grey topics/posts text is aligned to the right in Firefox rather than in the center where it should be. I can't figure out why it's not aligning right. Any help appreciated. So i am building a site for a friend, and created a navigational bar across the top with 7 tabs. The bg color is currently blue with white letters, and I want to make it white with black letters on a mouseover. I tried a couple different things from google, and nothing worked. Here is the code for the table. I would appreciate all the help I can get. Thanks! <HTML> <HEAD> <TITLE>Moxie Communication</TITLE> <style type="text/css"> p {font-family: Univers LT Std 45 Light} td {font-family: Univers LT Std 45 Light} </STYLE> </HEAD> <BODY bgcolor="#000000" style="color:white" vlink=white alink=black> <TABLE border=0 height=100 align=center bgcolor=#1A1919> <TR> <TD valign=top> <img src="F:\MOXIE\Website Images\Moxie_Top.jpg"> <TABLE border=0 width=100% cellpadding=9 cellspacing=1 bgcolor=#0054B4> <TR align=center> <TD><font size=2><a href="moxie.htm">HOME</a></font></TD> <TD><font size=2><a href="about.htm">ABOUT</a></font></TD> <TD><font size=2><a href="services.htm">SERVICES</a></font></TD> <TD><font size=2><a href="clients.htm">CLIENTS</a></font></TD> <TD><font size=2><a href="pricing.htm">PRICING</a></font></TD> <TD><font size=2><a href="team.htm">MEET THE TEAM</a></font></TD> <TD><font size=2><a href="contact.htm">CONTACT</a></font></TD> </TR> </TABLE> i want the entire table cell to be the link, not just the text inside any ideas? Hello all! I wanted to ask if there is a way to specify certain width sizes for table cells in a table. The thing is that I have a table in one webpage that, if I leave the width of the TD cells unspecified, I usually end up with some cells being very wide because the text that is written inside them is very big and does not roll up automatically and other cells shrink and become very small in order for the total table not to lose its specified length. Can I set a specific width for the cell that gets filled with many words so that the contents of this cell will wrap and not extend so much? Thank you! |
|||||||