|
HTML - !doctype And Cell Height Issue
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? =/ Similar TutorialsHi There, I have included my code below. The table looks correct in Firefox 2 and Safari 3 but not IE7. I am attempting to create a table that fills up the entire page with a fixed width row at the bottom. IE7 ignores the height I have set for the second row and makes both rows the same height. Note that the Doctype tag is important here, if I remove it then the page looks correct, however it is my intention to ensure the browser runs in standards mode. As far as I am aware my code is correct. Any help or advice would be appreciated. Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style>
html,body{
margin:0;
padding:0;
height:100%;
border:none;
}
</style>
</head>
<table height="100%" cellpadding="0" cellspacing="0" border="1" width="100%">
<tr>
<td>
Line 1
</td>
</tr>
<tr style="height:10px;">
<td>
Line 2
</td>
</tr>
</table>
</html>
Im using the following doctype <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> Without this doctype my header menu does not work. However when I include it I get a display error in IE 6 and 7 and opera, Mozilla displays fine. I have the main page in a table with two rows. inside each row I have a nested table each with 2 table cells (making a simple 2 x 2 table). I then render my content inside each cell with a table itself. Every table is set to 100% in height however the internal tables only render to the browser with the height of the content so the content does not line by filling out the full table cell area. I realise this is not a great deal of info but I don't have access to image editing software to show you atm. I just wondered if you could give me any ideas as to why this might happen. so far I've checked: for any open tags. all okay none found for any table or td references in the style sheets. all okay, all accounted for in seperate classes closed with clear divs tried to align to the top. works but does not fix the height Ive tried inline styles to set the internal table height to 100%. Does not have any effect. I've even tried over riding the tables with seperate classes in css. I can set the table background to a color to show that it does indeed act on the table but setting height to 100% has zero effect to the internal table height. really baffled and confused and err...annoyed any ideas appreciated and welcome. 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 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 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! OK so i have made this template and so far i like it but i have come accross a bit of an issue http://marlosweb.com/templates/test/contact.php OK so you see that little black bar on the left of the navigation? Well i want that to span the length of my page but 100% height wont work because CSS requires that the parent element has a fixed value. Does someone know how to cure this? Im working on a website for my city City of Crescent Springs And im having an issue with the upcomming events div. i cannot get it to stretch to the footer Any help? Hi, First, please excuse me if this has been answered before. I wasn't able to find any similar posts that has a solution and thus I'm making this new thread. What I have is a simple table with two sections just like this: Code: <table>
<tr>
<td width='50%' valign='top'> Content goes here... </td>
<td width='50%' valign='top'> Content 2 goes here... </td>
</tr>
</table>
Inside those two sections I have a fieldset in each of them (yes, I know this might sound weird, but that's how I need it to be). The question is, how can I make the height of both <td> (or alternatively the fieldset value) to be equal, in a situation when the data is a dynamical one and I don't know its size initially. It looks ugly if one of the rows is longer than the other and I would like to justify them in some way. I tried setting height attribute but to no avail. Any thoughts how this can be achieved? Thank you in advance for your help! I'm having a bit of trouble with an iframe. I'm wanting my iframe to automatically adjust to the height of whatever page loads into it. Is that possible? My code is as follows: HTML Code: <iframe src="test.html" name="_blank" width="656" height="100%"></iframe> I'm building all the page that should load in the iframe to be the proper width, but I was hoping to make the iframe automatically adjust to the height. Any help is greatly appreciated. Hi All, I have an iframe in my page. I change its height from a button inside the iframe using javascript. for example: parent.document.getElementById('iframe').style.height="100px"; The problem is that if the iframe height was 500px for example, and I changed it to 100px then the whole iframe is shrink down. I mean that the 100px are the top 100px but they are appear in the button of the iframe and there are 400px empty at the beginning. Any Idea how to change it? Thanks in advance I have a simple 2 column 2 row table that looks like the code below. I want to expand cell 2's height without expanding cell 1's height. I need this to be dynamic due to different users seeing different heights in cell 2. Cell 3's height can change all it wants to...I just dont want cell 1's height to change!! <html> <head> <title>Height Issue</title> </head> <body> <table> <tr> <td width="100px" height="100px"style="background-color: ##00FF00">cell 1</td> <td rowspan="2" width ="100px" height="200px"style="background-color: #00FFFF">Cell 2</td> </tr> <tr> <td width ="100px"height="100px"style="background-color: #FFFF00">Cell 3</td> </table> </body> </html> Hello Gurus, I have a webpage with two tables in it. I need to have both table of same identical height(65px) however the issue is, that one table ends up being larger than other one. no matter what I try it does not stay at 65px height. Pleaes help. Below is the code snippet Thanks, Ruchir --------- <html xmlns="http://www.w3.org/1999/xhtml"> <!-- start page --> <div id="page"> <div id="pagebg"> <div id="content"> <div class="post"> <br></br> </div> <!-- start content --> <!-- DIV CONTENT --> <head> <style type="text/css"> /* Design by Free CSS Templates http://www.freecsstemplates.org Released for free under a Creative Commons Attribution 2.5 License */ body { /*background: #A17461 url(images/img01.jpg) repeat-x;*/ font-family: Arial, Helvetica, sans-serif; font-size: 13px; color: #B1C0C7; } /*ol { list-style-position: inside; }*/ blockquote { border-left: 1px solid #9E9D89; } a { color: #FFFFFF; } a:hover { text-decoration: none; } /* Content */ .link:visited { font-family: Georgia,Arial,Verdana; vertical-align:top; color:rgb(0,82,82); text-align:auto; text-decoration:none; vertical-align: top; } .link:hover { font-family: Georgia, Arial,Verdana; vertical-align:top; color:rgb(0,148,231); text-align:auto; text-decoration:underline; vertical-align: top; } .link { font-family: Georgia, Arial,Verdana; vertical-align:top; color:Gray; text-align:auto; text-decoration:none; </style> <body> <div style="margin-left:0%"> <table style="margin-left:0%"> <tr> <td> <!--First Panel --> <div style="font-size:9pt;font-family:Georgia; color:Navy; width:290px; background-image:url(images/gray-gradient.gif); background-repeat:repeat;">label</div> <div> <table cellspacing="0" cellpadding="0" width="290px" height="65px" bgcolor="#fgfgfg" align="left"> <tr align ="left" width="290px" > <td align ="left"> <ul class="link" type="none" style="font-size:8pt;font-family:Arial;"> <li class="link"> <a style="font-size:8pt;font-family:Arial;" class="link" href="http://www.coexsys.com/erpoffering.html" id="l16">Offerings</a> </li> <li class="link"> <a style="font-size:8pt;font-family:Arial;" class="link" href="http://www.coexsys.com/id145.html" id="l18">Request More Information</a> </li> </ul> </ul> </td> <td align ="left"> <ul class="link" type="none" style="font-size:8pt;font-family:Arial;"> <li class="link"> <a style="font-size:8pt;font-family:Arial;" class="link" href="mailto:sales@coexsys.com" id="l17">Email us</a> </li> <li class="link"> <a style="font-size:8pt;font-family:Arial;" class="link" href="http://www.coexsys.com/id144.html" id="l18">Contact us</a> </li> </ul> </td> </tr> </table> </div> </td> <td> <!--2--> <div style="font-size:9pt;font-family:Georgia; color:Navy; width:290px; background-image:url(images/gray-gradient.gif); background-repeat:repeat;">label2</div> <div> <table cellspacing="0" cellpadding="15" width="290px" height="65px" bgcolor="#fgfgfg" align="left"> <tr align ="left" width="290px" > <td align ="left"> <ul class="link" type="none" style="font-size:8pt;font-family:Arial;"> <li class="link"> <a style="font-size:8pt;font-family:Arial;" class="link" href="http://www.coexsys.com/managedservices.html" id="l16">Offerings</a> </li> <li class="link"> <a style="font-size:8pt;font-family:Arial;" class="link" href="http://www.coexsys.com/rfims.html" id="l18">Request More Information</a> </li> </ul> </ul> </td> <td align ="left"> <ul class="link" type="none" style="font-size:8pt;font-family:Arial;"> <li class="link"> <a style="font-size:8pt;font-family:Arial;" class="link" href="mailto:sales@coexsys.com" id="l17">Email us</a> </li> <li class="link"> <a style="font-size:8pt;font-family:Arial;" class="link" href="http://www.coexsys.com/id144.html" id="l18">Contact us</a> </li> </ul> </td> </tr> </table> </div> </td> </tr> </table> <!--aaa--> </div> </head> </div> <!--content--> <!-- end content --> <!-- start sidebar --> <div style="clear: both;"> </div> </div> </div> <!-- end page --> <!-- start footer <!-- end footer --> </body> </html> Please help me understand! I'm trying to create a page that has several static height table rows and one row that has an iframe that I want to expand to fill the height of the browser window. Here is a link to the test page: http://dl.dropbox.com/u/9536793/testWITHframe.html Here is the CSS used by the page: http://dl.dropbox.com/u/9536793/test.css Here is the page loaded into the iframe of the main page: http://dl.dropbox.com/u/9536793/testblankframe.html So, there are three rows at the top (Title, Menu, and Button rows). At the bottom are two rows (Bottom row and Copyright row). In the middle is the row that contains the iframe that I want to fill the page height. It works correctly in Firefox 4 and Chrome. However, in IE 9 (standards mode), the frame is too tall, so a scroll bar is added to the page and the bottom area is pushed off the end of the window. Bah IE!! If I take off the DOCTYPE, or use an older DOCTYPE, IE goes into Quirks mode, and then the page appears correctly (sort of). However, I'm trying to use HTML 5 rules, so I want to just use DOCTYPE html. I also need IE in Standards mode so that a charting tool that I am trying to use wiill work right. I just can't get all of the technologies to play together! Anyway, I know iframe are sometimes frowned upon, but we use a page layed out like this and then load various pages into the iframe based on what the user selects in the menu. I don't particularly like it either, but don't know a good alternative. (I'm open to suggestions for that as well). Any assistance with getting the height to fill the page (and no more) that will work in all IE (8 and 9 standards mode), FF, and Chrome would be appreciated. Thanks. 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 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> this line seems to be at war with firefox. for some unknown reason my banner has a space between the lower body (it shouldn't). It is fine in IE and fine if the above line is not included. It seems to be adding some sort of padding into the table cells where the images are, somehow because of the domument type. ---------- Anyone have any solutions? LINK: http://uniden.zzl.org/ Again it is FINE in IE, but not if FF. HTML is Valid according to W3c Validator. Thanks in advance |
|||||||