|
HTML - Ie7 Cell Height Ignored?
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~ Similar TutorialsOn 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> 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 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 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 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. Hello, I am using a template to make a webpage. The background for one of the cells is not covering the entire area. I have looked and looked at this and can not figure it out. Therefore I thought I would ask some pros. 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 ? 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, 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. Hi, I have created a table in HTML with some basic attributes. However right now I want each cell to have a thin white line around it, but I do not want a table border. Right now I have the border color set to black so that it will not show up on my site. However I do want the TD cells to each have an individual border. Is this possible? Here is my code... My site has a black background by the way. Code: <html>
<body>
<table border="2" bordercolor="black" cellspacing="15">
<tr>
<td bgcolor="black"><a href="http://1lacrosse.com/images/polldaddy/images/magazine/big/1_Big.jpg" onclick="window.open('http://1lacrosse.com/images/polldaddy/images/magazine/big/1_Big.jpg','popup','width=320,height=420,scrollbars=no,resizable=no,toolbar=no,directories=no,location=no,menubar=no,status=no,left=0,top=0'); return false"><img border="0" src="http://1lacrosse.com/images/polldaddy/images/magazine/small/1_Small.jpg"></a><br><font color="white"><center><b>#1</b></center></font></td>
<td bgcolor="black"><a href="http://1lacrosse.com/images/polldaddy/images/magazine/big/2_Big.jpg" onclick="window.open('http://1lacrosse.com/images/polldaddy/images/magazine/big/2_Big.jpg','popup','width=360,height=420,scrollbars=no,resizable=no,toolbar=no,directories=no,location=no,menubar=no,status=no,left=0,top=0'); return false"><img border="0" src="http://1lacrosse.com/images/polldaddy/images/magazine/small/2_Small.jpg"></a><br><br><font color="white"><center><b>#2</b></center></td>
<td bgcolor="black"><a href="http://1lacrosse.com/images/polldaddy/images/magazine/big/3_Big.jpg" onclick="window.open('http://1lacrosse.com/images/polldaddy/images/magazine/big/3_Big.jpg','popup','width=320,height=420,scrollbars=no,resizable=no,toolbar=no,directories=no,location=no,menubar=no,status=no,left=0,top=0'); return false"><img border="0" src="http://1lacrosse.com/images/polldaddy/images/magazine/small/3_Small.jpg"></a><br><font color="white"><center><b>#3</b></center></td>
<td bgcolor="black"><a href="http://1lacrosse.com/images/polldaddy/images/magazine/big/4_Big.jpg" onclick="window.open('http://1lacrosse.com/images/polldaddy/images/magazine/big/4_Big.jpg','popup','width=370,height=480,scrollbars=no,resizable=no,toolbar=no,directories=no,location=no,menubar=no,status=no,left=0,top=0'); return false"><img border="0" src="http://1lacrosse.com/images/polldaddy/images/magazine/small/4_Small.jpg"></a><br><font color="white"><center><b>#4</b></center></td>
</tr>
<tr>
<td bgcolor="black"><a href="http://1lacrosse.com/images/polldaddy/images/magazine/big/5_Big.jpg" onclick="window.open('http://1lacrosse.com/images/polldaddy/images/magazine/big/5_Big.jpg','popup','width=390,height=460,scrollbars=no,resizable=no,toolbar=no,directories=no,location=no,menubar=no,status=no,left=0,top=0'); return false"><img border="0" src="http://1lacrosse.com/images/polldaddy/images/magazine/small/5_Small.jpg"></a><br><font color="white"><center><b>#5</b></center></td>
<td bgcolor="black"><a href="http://1lacrosse.com/images/polldaddy/images/magazine/big/6_Big.jpg" onclick="window.open('http://1lacrosse.com/images/polldaddy/images/magazine/big/6_Big.jpg','popup','width=350,height=420,scrollbars=no,resizable=no,toolbar=no,directories=no,location=no,menubar=no,status=no,left=0,top=0'); return false"><img border="0" src="http://1lacrosse.com/images/polldaddy/images/magazine/small/6_Small.jpg"></a><br><font color="white"><center><b>#6</b></center></td>
<td bgcolor="black"><a href="http://1lacrosse.com/images/polldaddy/images/magazine/big/7_Big.jpg" onclick="window.open('http://1lacrosse.com/images/polldaddy/images/magazine/big/7_Big.jpg','popup','width=360,height=420,scrollbars=no,resizable=no,toolbar=no,directories=no,location=no,menubar=no,status=no,left=0,top=0'); return false"><img border="0" src="http://1lacrosse.com/images/polldaddy/images/magazine/small/7_Small.jpg"></a><br><font color="white"><center><b>#7</b></center></td>
<td bgcolor="black"><a href="http://1lacrosse.com/images/polldaddy/images/magazine/big/8_Big.jpg" onclick="window.open('http://1lacrosse.com/images/polldaddy/images/magazine/big/8_Big.jpg','popup','width=360,height=430,scrollbars=no,resizable=no,toolbar=no,directories=no,location=no,menubar=no,status=no,left=0,top=0'); return false"><img border="0" src="http://1lacrosse.com/images/polldaddy/images/magazine/small/8_Small.jpg"></a><br><font color="white"><center><b>#8</b></center></td>
</tr>
</table>
</body>
</html>
By the way I don't want a border around the images because they are different sizes and just wouldn't look that good, instead just with the cells. Thanks so much!! 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 there. I am working on this site. There is a problem with a table column spacing though... if this is what it looks like in Firefox (the way its supposed to be...) and this is what happened to it in IE. (dear lord...) the left menu and the content on the right are two adjacent cells of a table. how do i fix this ? it seems ie is giving equal width to both the cells. which explains the gap. i've tried using: Code: <td width=180> and also: Code: <colgroup span="2"> <col width="180"></col> <col width="500"></col> </colgroup> but none of them work. please help me out.. the page is available at > http://ramniquesingh.googlepages.com/index.html the .css file is available at > http://ramniquesingh.googlepages.com/default_style.css thanks. |
|||||||