|
HTML - Td Heights - Getting Them The Same In Ie And Ff
Hello
Please see my a page on my site http://www.unofficiallyfleet.com/0607fixres.php. In IE the TD heights in the table are my desired finish, but in FF it makes all the heights the same as the biggest, if you see what I mean, meaning the table is extended outside my outer box. I have tried making all the TD's vAligh="top", and height="12", but FF wont budge! Anyone got any other ideas? Thanks. Similar TutorialsI'd be really grateful if someone could spot the problem in my coding which is splitting one column which has two rows so that both rows have equal height. Instead I want it to size the top row depending on contents, with the bottom row filling the rest of the table. The page is at http://www.clwydscouts.org.uk/news.php The column I mean is the left hand one which has promo images/links up top with a green menu on the bottom. It looks fine in Safari, just a problem in IE. Thanks in advance. I am creating a table that is taking data from database records. The table in question is the second one down (Previous Gigs) on the following page http://www.shotguneffect.com/?page_id=11 As you can see, some of the rows have a picture in, others don't. When I view this page in Firefox the rows automatically adjust their height so that the rows that just display text are only small, and the ones with a picture in are taller. However, when I view this page in IE8 (not sure what it does in other versions) all of the rows are identical height. As some of them contain images, it makes the rows that just contain text the same height. That is not the only thing though, it also breaks up the text in those rows so that it fills the height and therefore alters the widths also. Is there any way that I can get it so that the table row heights are only as tall as they need to be when being viewed in IE? (i.e. like they do in Firefox) Hi. I have a problem. I'm using tables to create a new design for my website and I have a td set to 90px with a padding of 30px on the top and bottom. There is a background image in the background. In Safari, the td is taller than in IE8. I don't know if this helps, but I also have a <!DOCTYPE /> tag. Hello all, I have the following table, however, my height seem to be changing: Code: <table width="100%">
<tr>
<td height="50" width="50%">
CELL1</td>
<td rowspan="3" valign="top" width="50%">
WRITING GOES HERE</td>
</tr>
<tr>
<td height="50" width="50%">
CELL2</td>
</tr>
<tr>
<td height="100%" width="50%">
CELL3</td>
</tr>
</table>
I want cell1 and cell2 to always remain at 50px. cell3, may vary in size depending on how much information is entered into the 'WRITING GOES HERE' section. At present when there is a lot of wiriting in the 'WRITING GOES HERE', cell1 and cell2's height will be much larger that 50px. Any ideas how i can get cell1 and cell2 to remain constan and cell3's height to vary? Much Appreciated. hi again... Nobody replied to my last post, so I've simplified what I am having trouble with. I have a MAIN table (which holds all of the page content) that is set to automatically scale to 100% height of any size browser window. That part works fine. My problem lies with the content in that main table. 1) I want the blue table to stay aligned to the top of the browser window. 2) I want the green table to automatically stretch vertically to fit any size browser window 3) I want the yellow table to stay aligned to the bottom of the browser window. When I resize the browser window, the green table does not expand properly. I've already tried different <div height="100%"> and <table height="100%"> values and none of them work. The smaller I resize the browser window , the more of the green table is cut off from the bottom, and the yellow table does not scale properly. So in short, the blue table stays at the top, the yellow table stays at the bottom, and i want the green table to scale vertically to fill the remaining space in between when the browser window is scaled vertically. Everything works fine when scaled horizontally. Can someone please help me with this!?!?!?!? Again, here is the basic stripped down version of the html code I have. HTML Code: <html>
<head>
<title>Site Title</title>
</head>
<style>
html, body
{
margin:0px;
height:100%;
width: 100%;
padding: 0px;
}
</style>
<body>
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" height="100%" width="100%">
<tr>
<td valign="top">
<!-- Top table - Stays at the top of the browser window -->
<div valign=”top”>
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="100%">
<tr>
<td width="100%" height="70" bgcolor="#00FFFF">
<p align="center">This table stays aligned to the top of the browser window and stays 70 pixels in height.
</td>
</tr>
</table>
</div>
<!-- End of top table -->
<!--Middle table - Stretches vertically to fill remaining space-->
<div valign=”top”>
<table border="0" cellpadding="0" cellspacing="0" bordercolor="#111111" width="100%">
<tr>
<td width="100%" valign="top" bgcolor="#00FF00">
<p align="center">content in this table will be aligned to the top.<br>
I want this table to automatically expand vertically to fill the empty
space between the blue header and the yellow footer.</td>
</tr>
</table>
</div>
<!-- End of middle table -->
<!-- Bottom table - Stays at the bottom of the browser window -->
<div height=”100” valign=”bottom”>
<table height="100" border="0" cellpadding="0" cellspacing="0" bordercolor="#111111" width="100%">
<tr>
<td width="100%" height="100" bgcolor="#FFFF00">
<p align="center">I want this footer to stay aligned to the bottom of
the browser window and stays 100 pixels in height</td>
</tr>
</table>
</div>
<!-- End of bottom table -->
</td>
</tr>
</table>
</body>
</html>
|
|||||||