|
HTML - Please Help With Cell Height Problems
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 Similar TutorialsGreetings! 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~ 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 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? =/ 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 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 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! Hello, I am very new to HTML, so I could use any help I can get right now. I am making a website for a project in my computer class and I am having issues with my pictures and cells. In Firefox my pictures show up but my text gets cut off at the bottom of the cell...(I didn't want to mess with frames this time because they confuse me, that's why I used a table instead). In IE6 the pictures don't show up but all of the text is shown in the cell...here is a link to my 'homepage' if you want to see what I am talking about...or if anyone wants to give me advice. icarus.uic.edu/~speter20/areorg/index.html Also, my professor wanted one of our pages to be of "bad style," which is why the first page you see is so bad. Just wanted to let you know that. ANY help at all is GREATLY appreciated!!! Thanks, Stephanie Hi I know I'm probably committing a cardinal sin by using a table for this layout but that's what I've done. For some reason which I cannot determine the second column is not aligned with the first column in Chrome 11 and Firefox 3.6 but on IE it works correctly. http://wwwrobe.www39.a2hosting.com/?page_id=4 Any help would be greatly appreciated. Many thanks hello, i'm having problems with a website. If you look at the following url you can see the problem. http://www.r-media.nl/vaassen problem When you look at the footer it stays at his absolute position but the holder stops filling in the background color. I would like to have the footer at the bottom and when you resize the screen the holder has to grow with it. Can someone tell me how to do this? Here's my current script: Code: <BODY> <!--Menu--> <div id="menu"> <ul id="menu_list"> <li>Hoofdpagina</li> <li>Informatie</li> <li>Nieuws</li> <li>Agenda</li> <li>Contact</li> <li>Adverteren</li> </ul> </div> <!--End Menu--> <!--Center--> <div align="center"> <!--Holder--> <div id="holder"> <!--Logo--> <div id="logo" align="left"><img src="images/logo.png" width="250" height="150" alt="Vaassen.nu"></div> <!--End Logo--> <!--Content--> <div id="content"><img src="images/cannenburgh.jpg" width="600" height="400"></div> <!--End Content--> </div> <!--Holder--> </div> <!--End Center--> <!--Footer--> <div id="footer"></div> <!--End Footer--> </BODY> And here's my CSS Code: /*CSS Document*/
html,body
{
margin: 0px;
padding: 0px;
height: 100%;
background-image: url("images/bg.gif");
}
/*Holder*/
#holder
{
width: 990px;
height: 100%;
background-color: #EDEDED;
}
/*End Holder*/
/*Logo*/
#logo
{
width: 100%
}
/*End Logo*/
/*Menu*/
#menu
{
width: 1020px;
height: 50px;
position: absolute;
top: 125px;
right: 50%;
margin-right: -510px;
background-image: url("images/menu_bg.png");
background-repeat: no-repeat;
}
#menu_list
{
width: 95%;
margin: 0px;
padding: 0px;
z-index: 999;
}
#menu_list li
{
width: 100px;
height: 35px;
margin: 0px;
padding: 0px;
list-style: none;
line-height: 35px;
float: left;
text-align: center;
font-family: Arial, Verdana, Sans-serif;
font-weight: bold;
font-size: 10pt;
color: #f7f7f7;
cursor: default;
cursor: pointer;
}
/*End Menu*/
/*Content*/
#content
{
margin: 10px auto;
width: 100%;
background-color: #EDEDED;
}
/*End Content*/
/*Footer*/
#footer
{
width: 1020px;
height: 50px;
position: absolute;
bottom: 5px;
right: 50%;
margin-right: -510px;
background-image: url("images/footer_bg.png");
background-repeat: no-repeat;
text-align: left;
text-indent: 1.5em;
font-family: Arial, Verdana, Sans-serif;
font-weight: bold;
font-size: 10pt;
color: #f7f7f7;
line-height: 35px;
}
/*End Footer*/
Thanks in advance! I am getting ready to create an external css, but want to get the styling issues resolved first with on-page styles. Problem: hr vertical spacing looks OK in Firefox, Opera and Safari, but it is far too much in IE. I am using the following to style a 1 px hr with a specified color: hr.red {border: none 0; border-top: 1px solid #ffffff; border-bottom: 1px solid #990000; width: 100%; height: 2px; margin: 0; margin-top:4pt; margin-bottom:4pt; text-align: center; } Q. Is this the proper way to specify an hr? (The color, thickness and position are fine.) Q. This works with background of ffffff. How do I get this hr to work with any color background? Q. What can I do to keep the spacing the same in Firefox, Opera and Safari, but reduce it in IE? (Do I substitute padding for margin?) Here is the page I where I use the code: http://www.iaps.com/test/standard-te...-hr-test2.html Many thanks in advance. 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 guys, I've been frustrated for awhile trying to fix three of my problems. I just started making a site for myself today, the specific one is http://www.bcsticketsnow.com/rosebowl.html Anyway, I've got three problems, and appreciate any help anyone can offer on any of them: 1. I'm new to frames, and am told to stay clear of it. But I don't know php, so this is the only way I know to make a header, middle and footer on all 20 pages that I'm going to have where I only need to edit one to change all. So I have 3 frames in the frameset, header, mainrosebowl, and footer. I understand that cols="220,*,100" will make the header 220 pixels, the footer 100 px, and the middle part the rest of the window. But I'm trying to figure out a way to have it go deeper than the window. As you can tell, I've got a scroll bar on that middle frame. I want that frame to extend to more than 100% and push the footer below the visible window. So I'm really looking for a big scroll bar for the entire window to scroll down, not a mini scroll bar just for the middle frame. Is this possible? Having the cols add up to only the size of the window isn't what I'm looking for. 2. In the header frame, I've got that drop down menu (says "Bowl Events"). When I put the form in for the drop down menu, it kind of expanded the height of the table. It had less space before in that row of the table with the blue background. When I put the form in there, it kinda messed up the spacing. I essentially want to delete that space below bowl events to make the height of the row of that table like half the size. Any ideas? 3. For that same drop down menu, I'm trying to target each link in that menu to open up a new window (like target="_top"). But putting it after <option value="URL" target=..."> does nothing. Am I supposed to put it in the javascript? Here's what I have now: <script type="text/javascript"> function goToPage(dd) { var ind = dd.selectedIndex; if (ind == 0) { return; } var url = dd.options[ind].value document.location=url; } </script> <form> <select name="eventlist" onChange="goToPage(this); return false;" size="1" style="border: 0; BACKGROUND: navy; COLOR: white; FONT-FAMILY: arial; FONT-SIZE: 15px; font-weight: bold;"> <option value="">Bowl Events</option> <option value="http://www.bcsticketsnow.com/bcschampionship.html" onclick="header.location.href='_top'">BCS Championship</option> <option value="http://www.bcsticketsnow.com/rosebowl.html">2009 Rose Bowl</option> <option value="http://www.bcsticketsnow.com/orangebowl.html">2009 Orange Bowl</option> <option value="http://www.bcsticketsnow.com/fiestabowl.html">2009 Fiesta Bowl</option> <option value="http://www.bcsticketsnow.com/sugarbowl.html">2009 Sugar Bowl</option> <option value="http://www.bcsticketsnow.com/chickfilabowl.html">2009 Chick-Fil-A Bowl</option> <option value="http://www.bcsticketsnow.com/capitalonebowl.html">2009 Capital One Bowl</option> <option value="http://www.bcsticketsnow.com/cottonbowl.html">2009 Cotton Bowl</option> <option value="http://www.bcsticketsnow.com/holidaybowl.html">2009 Holiday Bowl</option> </select></form> 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 Everyone, I'm slightly confused by this one. But i'm sure theres a hack out there to fix it. Basically, in firefox and konqueror, running on kubuntu, the top navigation bar at http://www.tendervendors.com/dev/payroll.html displays correctly, and when you hover over it, it fills the li with a semi-opaque background. This is correct. Its done, by filling the a element, with a background-color and then applying opaque: 0.5; The a element also has padding, which makes it fill out to the size of the li element, so the a element fills its portion of the ul, and looks like the li has the affect applied to it. However, in opera, the right and left padding is correct, but the height padding doesn't work. Does anyone know of a bug in opera that would be causing this problem, and possibly a code fix for it? TIA Matthew Millar this is my page http://web.vtc.edu/users/cjb06271/CI...nal/order.html there are several things I would like to happen. 1. the right collumn background to be where the right collumn should be(so other links in navbar) 2.The test between the roach pictures to be alligned with the top rather than bottom of pictures (so smaller windows can see) 3. When you size the window smaller than the text, a scroll bar appears, and when you scroll the background no longer exists. If I put it on auto the background will only go as far as the text does. 4. (nice but not required)The cocroachs to be alligned to the left and right of the top bar respectively, and the text in the middle. 5. (nice but not required) the right column background image is being cut in half (as does the top one if you size small enough). any way to make the images ignore the collumns? don't worry about the colors I will be changing them soon When you use a <p> tag, there is space between paragraphs. Not sure if there is are automatic margins set for the top and bottom, but that's the way it seems. I'm using <p> tags inside a <table> and I'd like the first paragraph to be tight to the top of the cell but the only way I know how to do it is to remove the <p> tags from the first paragraph. I don't really want to do this as I'd like to have the <p> tags around each paragraph. Here is what I have, which btw does exactly what I want it to but as you can see the first set of <p> tags have been removed. What's a better way to get this effect? Code: <table cellspacing="10"> <tr> <td class="menu" style="background-color:#8C9429"><a href="lab4-2bsolution.html">Prices</a> <p><a href="http://www.antiquity.ac.uk/">Links</a></p></td> <td class="content">Voytokovich Antiquities is the leadinng wholesaler for Asian, Middle Eastern, and European antiquities. Items in our store include masks from a variety of cultures, statues, paintings, and other collectibles. Bring the past into your own homes with the beautiful art pieces offered in our store. Come visit us often to find new and unusual items not found elsewhere <p>The links on the left take you to pricing information and our favorite Web sites. Please take a look at our prices and call or e-mail us for a price quote.</p> <p>Please sent any comments to <a href="mailto:voytkovich@isp.com">voytkovich@isp.com</a>.</p></td> </tr> </table> This is for a class assignment. It calls for a one row, two column borderless table. The first column has two links (one on top of the other), and the second column has three paragraphs of text. Thanks for any suggestions! 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 set up a large gap for cellpadding with my site and im wondering if i can undo that for 1 object, i want 1 object to be style="float:right; and in the top right area of the screen is there anyway i can undo the cellpadding effect for that object ? Hi, Is there anyway to script in such a way that if i never enter a specify to a cell, and give it 100% instead, my cell below will go all the way to the bottom by putting my whole table as 100% too? |--------------------------| | | | 100% | | | |--------------------------| | 50px | | | |--------------------------| something like that. well, it actually work in firefox and not IE, and i cant solve the problem. Thanks in advance. |
|||||||