• We’re currently investigating an issue related to the forum theme and styling that is impacting page layout and visual formatting. The problem has been identified, and we are actively working on a resolution. There is no impact to user data or functionality, this is strictly a front-end display issue. We’ll post an update once the fix has been deployed. Thanks for your patience while we get this sorted.

HTML Table Help - Please!!!

J

jordank32

Member
Sorry to double post, but this project is due tomorrow, and I could really use some help, it would be much appreciated.

I am working on a website for a class and I am having a difficult having tables expand properly. I am going to simplify the code so you can get the general idea. I want a table to take the entire height of the page and have 1 row and 3 columns. I want the top row to be 20 pixels, the bottom row to be 20 pixels, and the center row to fill the rest. The code I have works fine in Firefox but not in IE. IE redistributes all of the row heights evenly. I really need this to work. Please help, here is the code:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<link href="main.css" rel="stylesheet" type="text/css">
</head>

<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="fullheight">
<tr>
<td height="20" bgcolor="#FFFF00"> </td>
</tr>
<tr>
<td bgcolor="#990000"> </td>
</tr>
<tr>
<td height="20" bgcolor="#FFFF00"> </td>
</tr>
</table>
</body>
</html>

And the .css

html, body{
height:100%;
margin: 0;
padding: 0;
border: none;
}
.fullheight{
background-color: #FFFFFF;
height:100%;
margin: 0 auto;
}
 
try controlling the heights of the top and bottom rows with CSS. you could toss in a style="{height: 20px;}" into the <tr> tags for the appropriate rows.

Or you could try just moving the height parameter from your TD to the TR tags.
 
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<link href="main.css" rel="stylesheet" type="text/css">
</head>

<body>
<table width="100%" height="100%" border="0">
<tr>
<td height="20" bgcolor="#FFFF00"></td>
</tr>
<tr>
<td bgcolor="#993300"></td>
</tr>
<tr>
<td height="20" bgcolor="#FFFF00"></td>
</tr>
</table>
</body>
</html>



***Not 100% like your screenshot but you get the idea?***
 
Originally posted by: jordank32
Thanks for the screenshot. That is bizarre, not what I get at all. Any suggestions for why that would be happening?
Click to expand...

I think its his style sheet. Any luck with what I sent yet?
 
needed to add height="100%"

BAM, seemed to fix it. Because he had the top and bottom bars set to 20, but the middle set to nothing, it just crunched the middle to nothing........
 
that is strange because I already had height=100% in my style sheet. That did work though. however, I just tried to transfer that over to my actual website and it didn't work in IE. I was hoping you could take a look at the code:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<link href="main.css" rel="stylesheet" type="text/css">
</head>

<body>
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="20">
<img src="images/top_orange.gif" width="200" height="20"></td>
<td><img src="images/top_left_gray.gif" width="20" height="20"></td>
<td background="images/horiz_gray.gif"></td>
<td><img src="images/top_right_gray.gif" width="20" height="20"></td>
</tr>
<tr>
<td width="200" valign="top" bgcolor="#FF9900"></td>
<td width="20" background="images/vert_gray.gif"></td>
<td valign="top">
<IFRAME SRC="money_ch1_content1.html" scrolling="yes" width="600">
</IFRAME>

</td>
<td width="20" background="images/vert_gray.gif"></td>
</tr>
<tr>
<td height="20"><img src="images/bottom_orange.gif" width="200" height="20"></td>
<td><img src="images/bot_left_gray.gif" width="20" height="20"></td>
<td background="images/horiz_gray.gif"></td>
<td><img src="images/bot_right_gray.gif" width="20" height="20"></td>
</tr>
</table>
</body>
</html>


THANKS SO MUCH FOR YOUR HELP
 
Originally posted by: KEV1N
Seeing tables (for non-tabular data) makes me cry a little..but that's because I'm a geek.
Click to expand...

Apparently a geek who has never been exposed to the real world where users don't always use the browser you want them to and you can't afford to spend the time implementing something twice.
 
You must log in or register to reply here.

TRENDING THREADS

Back
Top