|
HTML - Fixed <tr> Height In Table With Strict Doctype
Hi 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>
Similar TutorialsI am combining 2 sets of code for my new website. I am combining my nold stuff with a piece of my new website. One piece is written in xhtml doctype traditional and the other is in xhtml strict. naturally I either lose the old part or the new parts. Is there a way to easily convert the traditional to strict, so the whole darn thing works right? Hi there, I have a table layout on the main page of site I'm working on, and have one row with two cells. The cell on the left contains a php include page which auto updates with news, however, as the news gets longer and the cell container auto resizes to fit the height..it also messes with the height of the cell on the right, leaving empty spaces (the black space right under "recruitment status") I'm stumped as to how to deal with is, any suggestions are much appreciated. Thanks the site: http://guild-paragon.com/indexframe edit: decided to put an iframe in there to hold the height, there's prob better alternatives out there though I just got my code to validate under the strict doctype ... but once I changed the doctype, Firefox started rendering something different, so that now there's a black gap below the header bar. i checked by putting the transitional doctype back in, and with that it looks perfect. ... but IE doesn't render it differently when i put in the strict doctype. so what's going on here?!?! 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? =/ Hi. I'm having some problems making a table to put the sliced Photoshop images into HTML 4.01 strict doctype website. I really have no idea what the problem might be and the HTML validator validates it. The website is he http://ekstaze.net. What could be the problem? Thanks. Hi, I have a template in the making but i have got to a point now where the footer isnt working. I want the footer to stick to the bottom of the browser and for it to work when there is a small amount of content which doesnt require scrolling and also when scrolling is required. At the moment it works when scrolling isnt required but as you will see on my example below when scrolling happens the footer doesnt stay stuck to the bottom of the browser it just moves up with the rest of the site. Any ideas how to fix this? I have been testing in FF2 but i need it working in IE 6 + 7 + FF 2. The site is here any ideas or help would be great Cheers hello Every can any one tellme How can i make a webpage open in Fixed height and Width which is to be opened by a Hyperlink Example : like when you click On MORE link From The Smilies in this Forum it open a Small Window Resizeble Window Hi all, i have table with 3 columns, this is the code: <body> <center><table frame="vsides" cellspacing="0" border="2" width="1000" cellpadding="10" > <tr> <td bgcolor="white" width="200" valign="top"> <br><br>This is some text. </td> <td bgcolor="white" width="600" valign="top"><br> This is some text. </td> <td bgcolor="white" width="200" valign="top"> <br> This is some text. </td> </tr> </table></center> </body> but when i enter some more txt table expand, is it possible to create table that columns can expand(height) but rows not(width)? thx Hi i have a table with a picture within its only cell . How can i lock the size of the table so that it wil not get any larger should a larger image be put in it? I have tried setting the width and height to a fixed value but that does not seem to do keep it fixed. Ideally i would like the image to resize itself to match the maximum values of the table but this i suppose will probably be a good bit harder? I will be brief in hoping that the issue does not require a thesis to properly fix. I'm dealing with tables within tables..within tables. In one instance, I have a 2x1 (row by column) table inside another table. So, we'll call the inside table "B" and the outside table "A". Table B is centered inside a column in Table A. I'm trying to maximize the space, but nearly nothing works. Setting Table B height=100% does nothing. The only thing that works is setting the height=N px, where N is a number. This is no good, as I want to the site to work on all resolutions. I want it to be proportional. How can I fix this? Here's what I'm dealing with, visually: Any help would be welcome. Thanks. Hi, I have the following problem i'm trying to solve with HTML: I have a simple table with 3 columns. I want the table to have a 100% width of the screen. Furthermore the center column must ALWAYS have a width of 1000. The left and right column should just be there too fill the gaps up if you have a wider screen than 1000. Setting these left/right columns to width "100%" doesn't work because than it would just make the left column fill up the space and the right column will have a width of 0. How can I solve this? Some example could would be highly appreciated Thanks, betonboor Hi, I'm a little new at this, and I'm trying to put a pretty simple website together. I have a table that is the basis for the whole website design. It's pretty fixed, so I want all the widths of the table to be constant. A couple rows have fixed heights for aesthetic purposes. A couple rows I want to expand to whatever height is necessary to accomodate the content inside. the fourth row of the table has three cells side by side that I use as the header design. 1) picture 2) space 3) title I want all these to have fixed widths and heights. underneath is a cell that spans the length of all three of those. This is where I want my content. 4) content The length of this stays fixed but the height changes as more content is addes. The trouble is, the table cells display correctly for me as long as there is limited amount of text inside the 4) content cell. Whenever I enter past a few sentences, the 1) picture cell starts taking up more of the width and shrinking the 3) title cell. And this really messes up the nice spacing I had. Any thoughts on why this would happen??? I'm just stuck. I've tried a million things, but I'm sure its something simple I can't see right now. Hopefully a pair of fresh (and knowledgeable) eyes can help! Thanks so much, heres my code: [font="Courier New"] <body> <table width="875" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td height="75" colspan="5"><img src="../images/RichfieldLogo.png" width="250" height="75"></td> </tr> <tr align="center"> <td height="25" colspan="5" valign="top" class="mainmenu" style="border-bottom: solid 1px #666666; border-top: solid 1px #666666"> <h1 class="menu"> <ul> <li><a href="#" class="mainmenu">Home</a></li> <li><a href="#" class="mainmenu">Party in the Park</a></li> <li><a href="#" class="mainmenu">Info</a></li> </ul> </h1></td> </tr> <tr> <td height="20" colspan="5"><img src="../images/20spacer.png" width="20" height="20"></td> </tr> <tr align="left" valign="top"> <td width="190" rowspan="2"> <img src="../images/PartynParkPlaceholder.png" width="190" height="385"></td> <td width="20" rowspan="2"><img src="../images/20spacer.png" width="20" height="20" border="0" align="top"></td> <!-- This is where the trouble starts! I can't get these cells to stay a fixed size!!! --> <td width="275" height="275"><img src="../images/SamplePicSmall1.png" width="275" height="275" border="0" align="right"></td> <td width="20" height="275"><img src="../images/20spacer.png" width="20" height="20"></td> <td width="370" height="275"> <p><font size="45px" face="Helvetica, Arial, sans-serif" weight="bold"><strong>Party <br /> in the Park</strong></font><br /> <h2 class="datetime"><font color="#666666">LOCATION </font> Richfield Park, 345 Main St in Richfield<br /> <font color="#666666">DATE </font>Saturday, October 13 2008 <br /> <font color="#666666">TIME</font> From 8am until late afternoon<br /> <font color="#666666">INFO</font> Call 704.463.1308</h2></p> </td> </tr> <!-- This seems to be the cause of it. If I have a couple sentences down here its fine, but more than a few words and it causes sheer html chaos above! --> <tr> <td colspan="3"><img src="../images/10spacer.png" width="10" height="10"><br /><hr width=100% size=1px color=#99CC33> <img src="../images/10spacer.png" width="10" heigh="10"><br /> <h2 class="text">Party in the Park is an annual Richfield tradition started in 199X to gather the town's residents and their friends together to enjoy good food, fun entertainment and each other's company. This year we'll have blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah. The morning will end right with our famous Cush cookoff! Party in the Park is an annual Richfield tradition started in 199X to gather the town's residents and their friends together to enjoy good food, fun entertainment and each other's company. This year we'll have blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah. The morning will end right with our famous Cush cookoff! </h2> <br /><img src="../images/25spacer.png"><br /> <p><h1 class="menu2">Features</h1></p> <p><h1 class="menu2">Photos</h1><hr width="100%" size="1px" color="#99CC33"></p> <p><h1 class="menu2">Flyer</h1></p> <p><h1 class="menu2">Directions</h1></p> </td> </tr> <!-- And everything from here on out seems to be fine from what I can tell --> <tr> <td height="75" colspan="5"> </td> </tr> <tr> <td colspan="5" valign="top"><hr width="100%" padding-bottom="1px"> <div align="right"><font color="#99CC33"><em><font color="#000000" size="-7" face="Verdana, Arial, Helvetica, sans-serif">email us at </font><font size="-7" face="Verdana, Arial, Helvetica, sans-serif">web@gorichfield.com</font></em></font></div></td> </tr> </table> </body> thanks again for any help guys! Hi, i'm doing an interface for a database, and i want to print my query results on tables. As i have many entries, i need a big table so i want to do a table with scroll where my header doesn't get out of sight (ever) when i scroll down. im working on NuSphere Phped, Windows 7. This code is working only on the PHPed simulator...on chrome and FF the scrollbar dont appear: PHP Code: <table align="center" cellpadding="3" cellspacing="0" style="border: black; border-style:double ; border-spacing: 0; cursor:default;"> <thead> <?php ###### ###### processing the query for($i=0; $i<$numcol; $i++) { ####### echo "<th bgcolor=\"#000000\" "; ####### some conditions for mouse events echo "><font face=\"helvetica, cursive\" size=\"-2\" color=\"white\">"; echo $column_name"</font></th>"; } ?> <th style="width: 16px; background: black;"></th> ##16px for the scrollbar </thead> <tbody style="overflow-y: scroll;overflow-x:hidden; height: 300;"> <?php $i=0; do{ ######## ######## ?> <tr onmouseover="this.bgColor='#B3BC7A'" onMouseout="this.bgColor='<?php if($i%2==0) echo "#eeeeee"; else echo "#ffffff"; ?>'" <?php if($i%2==0) echo " bgcolor=\"#eeeeee\" "; else echo " bgcolor=\"#ffffff\""; ?>> <?php for($j=0; $j<$numcol; $j++) { ?> <td <?php #######more php query precessing ########## ?> ><font face="helvetica, cursive" size="-2"> <?php } echo $attribute; ?> </td> <?php } ?> </font> <td style="width: 16px; overflow: scroll;"></td></tr> <?php $i++; }while($currentRow) ?> </tbody> </table> can someone tell me how to make it work on those browsers? can i have fixed layout for only some part of a table? I want the first column of my table to be "auto" and the other columns to be "fixed" llike style='table-layout:fixed;'. How can I achieve this? Thanks! I have a very simple table that I cannot simply get to render correctly across IE, Firefox, and Opera. At first, I was using CSS to define the cell widths/heights - when that was giving me issues I got rid of all the CSS and attempted to use plain HTML. The problem persisted. Here's the code - it doesn't get much simpler than this: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> </HEAD> <BODY> <table cellspacing="0" cellpadding="0" border="1"> <tr> <td width="15" height="33">a</td> <td>b</td> <td>c</td> <td width="15" height="33">d</td> </tr> <tr> <td colspan="4" rowspan="1">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</td> </tr> </table> </BODY> </HTML> Appearance in Opera Appearance in IE7 Appearance in Firefox (this is what I want it to look like in all browsers) I haven't done HTML seriously in 7-8 years or so but I don't really remember having these problems with IE/Netscape. The fix I found for IE was to use style="table-layout: fixed" for the table: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> </HEAD> <BODY> <table cellspacing="0" cellpadding="0" border="1" style="table-layout: fixed"> <tr> <td width="15" height="33">a</td> <td>b</td> <td>c</td> <td width="15" height="33">d</td> </tr> <tr> <td colspan="4" rowspan="1">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</td> </tr> </table> </BODY> </HTML> Now IE works fine, Firefox didn't break, but Opera's cells still are not 15 pixels. IE7 Appearance fixed Here's my attempt at getting Opera to display it properly by mixing CSS and HTML: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> </HEAD> <BODY> <table cellspacing="0" cellpadding="0" border="1" style="table-layout: fixed"> <tr> <td style="width: 15px; height: 33px" width="15" height="33">a</td> <td style="height: 33px">b</td> <td style="height: 33px">c</td> <td style="width: 15px; height: 33px" width="15" height="33">d</td> </tr> <tr> <td style="width: 100%" width="100%" colspan="4" rowspan="1">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</td> </tr> </table> </BODY> </HTML> Opera looks even worse now This seems like such a simple table. I really don't understand why I'm having such a hard time. I believe the second row - using colspan is causing the issue. Please don't answer with - "dont use tables" or something silly like that Thank you -TableTrTd Hi @ all! I am working on a layout with XHTML + CSS by use of a table, wich fills 100% of the browser window's height. Now here's my example: http://dennishoene.de.funpic.de/index2.html (Please just ignore the advt. popping up) I designed a simple grid for prospective contents. In Firefox, Safari and Opera it works fine, in IE not. I used fixed heights for the first line (30px), the second line (120px), the third line (30px) and the fifth line (30px). The fourth line should be variable (due to different screen resolutions), but in the end, the table should be of 100% height (see CSS-indications in <head>). It seems as the Internet Explorer simply does not take any notice of these values, whereas Firefox & the rest do (in detail: IE accepts the height: 100% statement, but ignores or deranges the fixed height values of the particular table cells/lines). How can I solve my problem? Any suggestions? Thanks in advance. Dennis Hello all, I am making a website with the lay-out based on a table (I know I shouldn't, when will I ever learn? ;-)). The problem is the following: I have divided my page into several blocks: The lowest <td> row has been set at 544px while the top row has been set at auto. Firefox gives the correct output. In IE the lowest row is longer than 544 px (the red line gives the height it should have, the red arrow points to the real hight). Putting the height on 100% doesn't help because it stretches the top row over the complete page, leaving the bottom row out of the screen (the positive side of this is that now the bottom row is 544 px as I had orderd it to)... So does anyone have advice for me (besides the fact that I should make my lay-out with div's: tried it, but it just doesnt work for me :-)). Thanks for the help, JuliusV ps. I've checked my code (html and css) with w3 and no errors have been found. Hi, I am looking to get a table along the side of my page to stretch from top to bottom. I tried <table height="100%"> and .high {height:100%} ... <table class="high"> but it didn't work it only shows until the end of the table's content. Is there a way to do this? Thanks I have a table row with a form with several buttons. The row is twice the height of the buttons and I haven't been able to control the height. Here is snippet: <html> <head> </head> <body> <center> <table border='1' cellpadding='0' cellspacing='0'> <tr> <td align='center'> <form> <input type='button' value='Prev month' id='btnPrevID' onClick='MonthYearChange("prev")'> <input type='button' value='Next month' id='btnNextID' onClick='MonthYearChange("next")'> <input type='button' value='Change Mo/Yr' id='btnChgID' onClick='DropDownChangeMonthYear()'> </form> </td> </tr> </table> </body> </html> Im having an issue with the table row heights on my page, i have three rows: The top row has the navigation menu, the second had a sub navigation menu (previous and next) to go between pages and then the third is has the content. I want the top to rows to snug up with the top of the table (like the top 25%) and then the content to be in the middle of the bottom row. Barring putting 'height="25%"' in the tr tag, is there a good way to do this? Thanks |
|||||||