|
HTML - Stretching Table Cell Height In Ie?
Hello,
This is either a really easy question, or it just can't be done. I've tried it before, and could have sworn I've worked it out, but I can't do it again. I have a table with cells as below: What I want is Cell #2 to be Fixed and Cell #5 to be fixed in height. When Cell #3 expands, I only want Cell #4 to expand with it. So when #3 is 300px and #2 and #5 are 100px, then #4 should be 100px. But when if #3 expands to 400 px, then #2 and #5 should stay at 200px and #4 should expand to 200px. But this is not the case, atleast in IE. In Firefox, #2 and #5 stay how they are supposed to and #4 expands (yay!), but in IE, all three go haywire. I can't even find any consistancy in how IE determines which cell to expand and how much. I've created a test HTML file to see if I can get it working, and I still cannot. I have it available if anyone would like to see it and fiddle around with it. HTML Link (viewable): Table Test Zip File (includes html and ruler.gif Background): Table Test Zip As you can see, I have #2's height set to 100px and #5's height set to 50px. #4 has no height set. #3's is 300px. What I want is #4's then to be 150px (300 - 100 - 50 = 150). However, the case as it may be is that it just does not work out this way. How can I accomplish this. It must be possible. Note that the HTML contains CSS to determine the dimensions, but I have also tried it directly into the TD tags. I've also tried defining height directly in the TR and through a TR style as well as a ton of combinations of CSS postiioning and heights and floats and all kinds of stuff. I feel like I've tried everything. Any help appreciated. Thanks agin, Rege Similar TutorialsHi, Please review the following code and give me your thoughts... HTML Code: <table width="500" border="1"><tr> <td width="200"><p>This</p><p>is</p><p>very</p><p>very</p><p>very</p><p>LONG</p><p>text</p></td> <td width="300" height ="100%" valign="top"> <table width="300" height ="100%" border="1" cellspacing="0"> <tr><td width="300" valign="top">This should be at the TOP</td></tr> <tr><td width="300" valign="bottom">This should be at the BOTTOM</td></tr> </table> </td> See the attachment for what I am trying to achieve... The thing to focus on is the second column and how it has 2 rows which are trying to stretch to fill the height of the single row first column. It works in Firefox 3.6 but not at all in IE8. Any ideas? And please don't talk me out of tables for this thread... I know they aren't the greatest thing ever, I'm just trying to fix what I have. Thanks! - Jeff Hello, I've recently noticed that IE renders this table a bit differently than most browsers (Firefox, Opera, Safari, etc). The real page is much more complicated and uses proper styling, but I simplified it into the code below. The inline CSS sets the height of each individual cell and then the last cell is not provided with a height. I would love for the last cell to take the rest of the available height. I've tried many things to try and get this to work (like setting the height to 100%). The page renders how I expect it to in every browser I've tested except for the IE series. It seems as though Internet Explorer decides to ignore my row heights and calculate its own for some reason. Also, using a fixed height for the last cell is not possible due to how dynamic the web page is. Does anyone have any tips? HTML Code: <table style="table-layout:fixed;" border=1 width=100%> <tr> <td style="height:17px;width:150px;"> </td> <td style="height:600px" colspan=3 rowspan=5>This should span all of the rows and the remaining columns</td> </tr> <tr> <td style="height:17px;width:150px;"> </td> </tr> <tr> <td style="height:17px;width:150px;"> </td> </tr> <tr> <td style="height:17px;width:150px;"> </td> </tr> <tr> <td>This cell should take the rest of the available column height area</td> </tr> </table> Thank you. Hi all, Having a bit of trouble with a table layout in IE. The following link renders correctly (or at least as I would like) in Firefox yet in IE the header and navigation bars are too think. I've tried adding a height attribute to all td's concerned, but to no avail. here's the link: http://www.events.ex.ac.uk/ivfdf2009...s/template.php any help you can offer muchly appreciated! 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 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 hi i'm new! i'm pretty good with html and i'm setting up my website, jesse-m.com. if you go to this link: http://jesse-m.com/fourth%20layout/header_test.php, that is what i want the sidebar to look like. but when i put my cutenews code in under the news section, this is what happens to the sidebar: http://jesse-m.com/fourth%20layout/header.php how do i make the sidebar not follow the height of the news section? i don't want it to stretch! i just want it to stop when it has nothing else to show and just continue the white background. because it's a php document, here is the source of the page WITH the cutenews: PHP 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"> <style type="text/css"> <!-- body { background-color: #E4E4E4; } --> </style> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>» JESSE-M.COM • a number one source for jesse mccartney fans</title> <link rel="stylesheet" href="http://www.katiecassidyfan.com/jesse/fourth layout/style.css" type="text/css" /> </head> <body> <div align="center"> <table width="610" border="0"> <tr> <td><img src="header.png" width="610" height="271" /></td> </tr> </table> <table width="614" border="0"> <tr> <td width="184" height="10" valign="top" class="sidebar">WELCOME</td> <td width="420" valign="top" class="sidebar">NEWS</td> </tr> <tr> <td height="10" valign="top" bgcolor="#FFFFFF">welcome to jesse-m.com! we have been down for awhile but are now back stronger than ever and ready to supply you with the latest jesse gossip, pictures, and news. be sure to check back multiple times throughout the day because we will be following jesse's foot steps throughout his busy career and are happy to keep his most dedicated fans up to date.</td> <td rowspan="17" valign="top" bgcolor="#FFFFFF" class="news"><?PHP $number=10; include("/home/content/k/a/t/katiefan/html/jesse/cutenews/show_news.php"); ?></td> </tr> <tr> <td height="10" valign="top" bgcolor="#FFFFFF" class="sidebar">STATISTICS </td> </tr> <tr> <td height="10" valign="top" bgcolor="#FFFFFF">owners: kirstie and ana <br /> opened: march 1st, 2008<br /> layout version: 2<br /> host: <a href="http://www.katiecassidyfan.com" target="_blank">katiecassidyfan</a><br /> contact: <a href="mailto:staff@jesse-m.com">staff@jesse-m.com</a> </td> </tr> <tr> <td height="10" valign="top" bgcolor="#FFFFFF" class="sidebar">NAVIGATION</td> </tr> <tr> <td height="10" valign="top" bgcolor="#FFFFFF"><a href="jesse">jesse</a>: facts, biography, awards<br /> <a href="http://www.jesse-m.com/gallery" target="_blank">gallery</a>: candids, photographs, scans<br /> <a href="video" target="_blank">video vault</a>: interviews, tv, movies<br /> <a href="web" target="_blank">web</a>: affiliates, links, official sources<br /> <a href="site" target="_blank">site</a>: information, webmasters, past</td> </tr> <tr> <td height="10" valign="top" bgcolor="#FFFFFF" class="sidebar">MUSIC PLAYER </td> </tr> <tr> <td height="10" valign="top" bgcolor="#FFFFFF"><center><object type="application/x-shockwave-flash" width="171" height="83" data="http://katiecassidyfan.com/jesse/test/second/xspf_player.swf?playlist_url=http://katiecassidyfan.com/jesse/test/second/playlist.xspf"> <param name="movie" value="http://katiecassidyfan.com/jesse/test/second/xspf_player.swf?playlist_url=http://katiecassidyfan.com/jesse/test/second/playlist.xspf" /> <embed src="http://katiecassidyfan.com/jesse/test/second/xspf_player.swf?playlist_url=http://katiecassidyfan.com/jesse/test/second/playlist.xspf" width="171" height="83"></embed> </object></center></td> </tr> <tr> <td height="10" valign="top" bgcolor="#FFFFFF" class="sidebar">RECENT PICTURES </td> </tr> <tr> <td height="10" valign="top" bgcolor="#FFFFFF"> </td> </tr> <tr> <td height="10" valign="top" bgcolor="#FFFFFF" class="sidebar">ELITE AFFILIATES </td> </tr> <tr> <td height="10" valign="top" bgcolor="#FFFFFF">1. <a href="http://www.katiecassidyfan.com" target="_blank">katie cassidy fan</a><br /> 2. <a href="http://www.glorianafans.com/" target="_blank">Gloriana Fans</a><br /> 3. because we have not been online for awhile, we erased all of our affiliates. if you'd like to be an elite, please contact us! </td> </tr> <tr> <td height="10" valign="top" bgcolor="#FFFFFF" class="sidebar">PROJECTS</td> </tr> <tr> <td height="10" valign="top" bgcolor="#FFFFFF">"wanted" - body fragrance<br /> "alvin and the chipmunks: 2" - cinema </td> </tr> <tr> <td height="10" valign="top" bgcolor="#FFFFFF" class="sidebar">TAGBOARD</td> </tr> <tr> <td height="10" valign="top" bgcolor="#FFFFFF"><Center><!-- BEGIN CBOX - www.cbox.ws - v001 --> <div id="cboxdiv" style="text-align: center; line-height: 0"> <div><iframe frameborder="0" width="175" height="180" src="http://www3.cbox.ws/box/?boxid=3017165&boxtag=7321&sec=main" marginheight="2" marginwidth="2" scrolling="auto" allowtransparency="yes" name="cboxmain" style="border:#EBEBEB 1px solid;" id="cboxmain"></iframe></div> <div><iframe frameborder="0" width="175" height="75" src="http://www3.cbox.ws/box/?boxid=3017165&boxtag=7321&sec=form" marginheight="2" marginwidth="2" scrolling="no" allowtransparency="yes" name="cboxform" style="border:#EBEBEB 1px solid;border-top:0px" id="cboxform"></iframe></div> </div> <!-- END CBOX --></center></td> </tr> <tr> <td height="10" valign="top" bgcolor="#FFFFFF" class="sidebar">DISCLAIMER</td> </tr> <tr> <td height="10" valign="top" bgcolor="#FFFFFF">jesse-m.com is a fansite and <em>only</em> a fansite for <strong>jesse mccartney</strong>. we are no way affiliated with jesse or his management unless stated so. we do not pose to be him or any of his family members and any exclusive information that is sent to this site is for our use, <em>and our use</em>, <u>only</u>. everything on this site was created by either ana or kirstie and are not be resdistrubited any where else without persmission. these graphics are ours and not yours to use! all photos, videos, articles and interviews are owned by copyright their respective owners. jf you'd like to have any illegal content removed, please <a href="http://www.katiecassidyfan.com/jesse/staff@jesse-m.com">e-mail</a> us before taking an legal action. we would love to cooperate with you.</td> </tr> <tr class="bottom"> <td height="10" colspan="2" valign="top" bgcolor="#FFFFFF"><div align="center">copyright: <strong>JESSE-M.COM</strong> | opened: 2008 | <a href="jesse">Jesse</a>, <a href="gallery">Gallery</a>, <a href="video">Video Vault</a> | Hits: <!-- Start FastWebCounter.com --> <script src="http://fastwebcounter.com/secure.php?s=www.jesse-m.com"></script> <!-- End FastWebCounter.com --> | Online: <!-- Start FastOnlineUsers.com --> <script type="text/javascript" src="http://fastonlineusers.com/on2.php?d=www.jesse-m.com"></script> <!-- End FastOnlineUsers.com --></div></td> </tr> </table> <p><br /> </p> </div></body> </html> I am making an eBay layout for a friend but one of the cells doesn't seem to be stretching. The cell is the one with layout_09.jpg as the background. Heres how it looks like at the moment: http://ki114.phpnet.us/ebay/layout.html And heres the code: HTML Code: <html> <head> <title>layout</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> </head> <body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"> <!-- ImageReady Slices (layout.psd) --> <table id="Table_01" width="780" height="700" border="0" cellpadding="0" cellspacing="0"> <tr> <td colspan="5" width="780" height="172"> <img src="images/layout_01.jpg" width="780" height="172" alt=""></td> </tr> <tr> <td colspan="5" width="780" height="4"> <img src="images/layout_02.jpg" width="780" height="4" alt=""></td> </tr> <tr> <td rowspan="2" width="34" height="471"> <img src="images/layout_03.jpg" width="34" height="471" alt=""></td> <td width="102" height="439"> <img src="images/layout_04.jpg" width="102" height="439" alt=""></td> <td rowspan="2" width="35" height="471"> <img src="images/layout_05.jpg" width="35" height="471" alt=""></td> <td rowspan="3" background="images/layout_06.jpg" width="562" height="478"> </br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br>m </td> <td rowspan="3" background="images/layout_07.jpg" width="47" height="100%"> </td> </tr> <tr> <td width="102" height="32"> <img src="images/layout_08.jpg" width="102" height="32" alt=""></td> </tr> <tr> <td colspan="3" background="images/layout_09.jpg" width="171" height="100%"> </td> </tr> <tr> <td colspan="5" width="780" height="64"> <img src="images/layout_10.jpg" width="780" height="46" alt=""></td> </tr> </table> <!-- End ImageReady Slices --> </body> </html> Thanks in advance. Greetings! Let me start this out by getting this out of the way - I know I should not be using tables for layout anymore But with this project I have good reasons as to not using them. Learning curve being one and time being another But I am headed that way! So here is the issue I have a simple layout and nested within is this little table for content and navigation Worked fine in FF, but IE7 is giving me some unexpected results with no explanation I can find. Here is the example page http://www.mountainroseherbs.com/test/blank.html Top left (blue) is the navigation image and cell - set height should be static and remain at the top Bottom Left (red) is a nav *footer*, I guess, but it remains at the bottom and the cell above it needs to be able to stretch indefinitely - with the images sitting on the bottom. Right (Orange) is the content area - dynamically stretching with the *red* following it. In FF this works great! Not so much in IE7 - in fact it skews the height of even the *blue* which is set!? Thanks so much in advance for your help on this, I am at my wits end! Nate~ On my website I have a left and a right menu, both columns have 3 cells with height set to 100% or just default no value. It all works fine in firefox and opera. However in Internet Explorer the bottom cell in both columns don't extend to meet the bottom of material in the cell above. It helps if you turn borders on in the code, but the betfred banner and mailing list items are valigned top, so should meet the bottom of the menu above in the cell above. Can anyone offer any help thanks Hi guy, i want to fix the height of the image in cell2 to the end of the cell.. any idea how can i achieve that..? thax heaps <html> <head> <title>hello</title> </head> <body > <table border="1" width="25%"> <tr> <td> cell1 </td> <td bgcolor="#F5BB1B"> cell2 <table bgcolor="black"> <tr> <td> cell4 </td> </tr> </table> <img src="c1.gif" align="right"/> </td> <td> cell3 cell3cell3cell3cell3 cell3cell3cell3 cell3cell3 cell3cell3cell3cell3 cell3cell3cell3 cell3cell3cell3cell3cell3cell3 cell3cell3cell3 cell3cell3cell3cell3cell3cell3 cell3cell3cell3 cell3cell3cell3cell3cell3cell3 cell3cell3cell3 cell3cell3</td> </tr> </table> </body> </html> Hi guys I have a website that is driving me crazy with this problem. The layout and several pages have tables (I know i shouldn't be doing a table-based layout but my CSS skills aren't close enough to do what the site requires). The tables work fine w/o the DOCTYPE declaration which makes the browser work in Quirks Mode, but I don't want a site without the doctype of course. The problem is, when I use any kind of doctypes (and I've tried them all) my table cells go crazy. Check it out: Without doctype: http://smpt.comuf.com/index3.htm (correct view) With doctype: http://smpt.comuf.com/index2.htm (layout error) Another error: Normal: http://smpt.comuf.com/index3.htm?pagina=downloadr With doctype: http://smpt.comuf.com/index2.htm?pagina=downloadr. To make things simpler, I remade the menu part accordingly to the CSS rules and the height property in Dreamweaver 8 I even validated the page ( http://validator.w3.org/check?uri=ht...00=1;verbose=1 - 0 errors). In the editor, the page appears as follow: But when you see it in a browser, the problem still happens: http://smpt.comuf.com/indexe2.htm This is just because the doctype is present, but I made everything according to the rules, but still the same error... So, any ideas? =/ 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 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. I've got a small problem, i want to make a table cell that works as a button. I tried it this way: Code: <table border='1' width='100%' height='10%'> <tr> <a href='page.htm'> <td width='20%' height='100%'> </td> </a> But this won't work, does anybody know how I can solve this problem? Hi Can someone please tell me how I can make a table cell (which contains text which is linked) linkable? http://www.revolution.worldclanleagu...?site=calendar Here you can see a calendar with months at the top. When you hover over a month, the cell highlights but only the text inside is actually selectable - I'd like to make the cell selectable/linked. PHP/HTML I have: Code: <td class="calendar-month" align="center"><a class="calendar" href="index.php?site=calendar&month=01">'.mb_substr($_language->module['jan'], 0, 3).'</a></td> CSS: Code: a.calendar, a.calendar:visited, a.calendar:active {
font-family: Arial;
color: #dbdbdb;
font-size: 11px;
line-height: 13px;
text-decoration: none;}
a.calendar:hover {
font-family: Arial;
color: #dbdbdb;
font-size: 11px;
line-height: 13px;
text-decoration: none;}
.calendar-month, calendar-month:visited {
font-family: Arial;
color: #dbdbdb;
font-size: 11px;
line-height: 13px;
padding: 5px;
background-color: #2f2f2f;
border-bottom:3px solid #1d1d1d;
border-right: 1px solid #000;
border-top: 1px solid #424242;
border-left: 1px solid #424242;}
.calendar-month:active {
font-family: Arial;
color: #dbdbdb;
font-size: 11px;
line-height: 13px;
padding: 5px;
background-color: #2f2f2f;
border-bottom:3px solid #1d1d1d;
border-right: 1px solid #000;
border-top: 1px solid #424242;
border-left: 1px solid #424242;}
.calendar-month:hover {
font-family: Arial;
color: #dbdbdb;
font-size: 11px;
line-height: 13px;
padding: 5px;
background-color: #3f3f3f;
border-bottom:3px solid #1d1d1d;
border-right: 1px solid #000;
border-top: 1px solid #424242;
border-left: 1px solid #424242;}
(sorry theres so much css) Thanks in advance =D I recently made a rollover menu, and though the text does highlight when I roll over the cell, the link only works if I rollover the word is the cell. Is there a way to make the cell itself link? I am doing a simple calendar. I managed to do the table with days etc. I have a problem I wish to highlight a number and the cell automatically according to the date of the day. Can Someone help please? Thanks & best regards Hello, I have a problem with tables cells containing form buttons: Code: <tr> <td colspan="2" align="center"> <button id="button-submit_2" type="submit">Add Name</button>      </form> <form action="nrt-home-edit&delete.php" method="post"> <input type="hidden" name="class_name" value="$class_name[0]"/> <button id="button-submit_2" type="submit">Finish</button></form> </td> </tr> The above code puts the two buttons on their own lines within the table cell. My question is, does anybody know how to keep them on the same line without putting them into their own individual cells? |
|||||||