HTML - Problem With Table Layout [was 'html - Help Needed Please...']

hey guys!
I have a strange problem and I have no idea even what to ask google to find a solution... I'm writeing a simple html page. I have one outside div and everithing must be inside of it. I created some green and yellow borders just to see if layout works fine...

The problem: There is some text in the main section. You can see it HERE.
But if I add some text to that same middle div inside the table, than the table jums outside of its containing div. Check out HERE.

The main(middle) div has overflow property set to "-moz-scrollbars-vertical;". So it should not make bigger div, but just bigger vertical scroll. The table height property is set to 100%.

Any ideas???
_________________________________________________________________
You can also download the whole page via this LINK.

I'm trying to get a small section of my site to display a certain way with DIVs. I've asked for help on this back on Friday and haven't gotten any replies yet.

So instead I'm just gonna post a pic of a simple DIV layout I'm trying to get done instead of having people go through my code and try to make sense of the mess I made :p

Im trying to create a table for ebay use, i created pic for top left, top right, bottom left and bottom right. 1 also created pic for top middle (the middle part should be changeable- it can get longer or shorter same with the middle bottom and left and right middle pics) but the problem is i dont know how to make the right and left middle to repeat itself, also i dont know the correct HTML code to set the right middle picture in its rightful place. Im new in creating HTML, my goal is to have a table border that has a fixed size on all corners except for inbetweens - i want them stretching. i would appreciate some tips. Thanks



HTML Code:

<TABLE style="BORDER-RIGHT: #fff 3px solid; BORDER-TOP: #fff 3px solid; BORDER-LEFT: #fff 3px solid; 

BORDER-BOTTOM: #fff 3px solid" cellSpacing=0 cellPadding=0 width="95%" align=center>

<TBODY>
<TR>

<TD vAlign=top align=left><img src="http://img222.imageshack.us/img222/8549/topleftea0.gif"></TD>

<TD vAlign=top width="100%" background="http://img242.imageshack.us/img242/6443/topmiddleeq0.gif"></TD>

<TD vAlign=top align=right><img src="http://img222.imageshack.us/img222/5030/toprightqx9.gif"></TD>


<tr><td style="background:transparent url(http://img242.imageshack.us/img242/3990/leftframeru4.gif) left 

top;" valign="bottom"><img src="http://img242.imageshack.us/img242/3990/leftframeru4.gif"></td></TR>

<tr><td style="background:transparent url(http://img364.imageshack.us/img364/4470/rightsidetq1.gif) right 

top;" valign="bottom"><img src="http://img364.imageshack.us/img364/4470/rightsidetq1.gif"></TR></TD>

<TR>
<TD vAlign=bottom align=left><img src="http://img242.imageshack.us/img242/4265/lowerleftqo9.gif"></TD>

<TD vAlign=bottom width="100%" 

background="http://img242.imageshack.us/img242/1425/lowermiddlepn7.gif"></TD>

<TD vAlign=bottom align=right><img src="http://img242.imageshack.us/img242/4020/lowerrightwo9.gif"></TD>

Hi there,
After HOURS of battling with what I thought should be so simple I have given up and registered for help!

The very basic form of my problem is I want a table with 3 cells, The first two cells (one black, one blue) I want to be left aligned and simply as wide as the cell contents. I then want the 3rd cell to be right aligned, and fill up the rest of the row before reaching the text. So the 3rd cell spans from the 2nd cell all the way to the right of the table.

I have uploaded 2 images. One is the rough design that I'm trying to achieve, the other shows my results.

what I want: http://imageshack.us/photo/my-images/705/hopez.png/

(the 'music videos' would be in a separate cell as the background will be blue as you can see in my tests below)

actual: http://imageshack.us/photo/my-images/830/problemue.png/

It either ends up as above or with hours of fiddling I did somehow have it over at the right, but only behind the text was black, there was just open space between the blue cell and the right aligned cell.

So frustrated, better go to bed, haha.

Hi,

Im very new to php and mysql coding. Im trying to make support system for a basketball fantasy website where it predicts the player's next games fantasy pts.

The tables consists of a number of columns; Game, OFF, DEF, REB, AST, STL, BLK, TO, PF and PTS. There is a number of rows that contains the values of these columns. I want to write some code that takes these values and multiple them with a value and add them to next column. So it like formula for example;

Game|OFF|DEF|REB|AST|STL|BLK|TO|PF|PTS
1 | 1 | 0 | 2 | 1 | 3 | 1 | 0 | 2 | 6
2 | 2 | 0 | 2 | 1 | 3 | 1 | 0 | 2 | 6

The Formula would be (OFF *0.5) + (DEF*0.5) etc and place the result in column called FantasyPTS. So the resulting table would be like this;

Game|OFF|DEF|REB|AST|STL|BLK|TO|PF|PTS |FantasyPTS
1 | 1 | 0 | 2 | 1 | 3 | 1 | 0 | 2 | 6 | ?
2 | 2 | 0 | 2 | 1 | 3 | 1 | 0 | 2 | 6 | ?

Thank you in advance

Hi All,

I am newbie with HTML, I am having difficulties in nesting the tables.

I have 4 <TD> tags in a <Table> but somehow due to some nesting issues when i am inserting a table in my 3rd <TD> my 4th <TD> goes out of the table.

Here goes my Code...


-------------------------------------------------------------------------------------------------------
<HTML>
<BODY>
<table border=1 width="100%">
<tr>
<td>1st TD</td>
<TD>2nd TD</td>
<td>3rd TD
<table>
<tr>
<table>
<tr>
<td>Info</td>
<td>S/O</td>
</tr>
<tr>
<td><select><option>Info about Renting</option></select></td>
<td><input type="text" style="width:70px"></td>
</tr>
<tr>
<table width="50%">
<td></td>
<td>ABC</td>
<td>DEF</td>
<td>GHI</td>
<td>JKL</td>
</table>
</tr>
<table>
</tr>
</table>
</td>
<td>4th TD</td>
</tr>
</table>
</BODY>
</HTML>
--------------------------------------------------------------------------------------------------------

Please Help!!!...

-Gagan

Hey guys,

Okay so here is what I am trying to do. I am populating a table with some info from a database. The data should look something like this.

Recipe Name - Prep Time - Total Time- Rating
============================
test data here 12 mins 15 mins 4.5
test data here 12 mins 15 mins 4.5
test data here 12 mins 15 mins 4.5
test data here 12 mins 15 mins 4.5

The names of the recipe is what I want to create as links so that when the user clicks on a certain RECIPE NAME another page will open showing only the data that goes with that recipe he/she clicked on.

So far I have not gotten my code to work correctly, i dunno if i am missing something or doing it all wrong? I am using a while loop to generate all the recipes form the database.

Again, i want the names of the recipes to be the links. Please help me!!!!

Thanks for your time and help

Here is my code:
<? while( $row = mysql_fetch_array( $result ) ) { ?>

<tr>
<a href="ShowRecipe.php?id=<?=$row['id']?>"></a>
<td><?=$row['name']?></td>
<td><?=$row['preptime']?> mins</td>
<td><?=$row['totaltime']?> mins</td>
<td><?=$row['rating']?></td>
</tr>
<? } ?>

Hello everyone.

Im new to forums and am looking for some help my my html. I am having problems with the alignment of my tables. They used to align perfectly but are now being stretched the length of the page.

It has to do with my TD somewhere but I can't find it.

If you check this code you'll see what I mean. Im not sure what I did but it never had this problem before.


Let me know what you guys think.

Thanks

Hi,

I'm having a basic problem with a HTML table. It displays exactly how I want on Firefox 3.5.15 but on Internet Explorer 8 is does not.

Can anyone point out what I need to do to get this table displaying in IE as it does in Firefox?

Below is my HTML table and I suspect IE 8 is ignoring 'rules = rows';

<?php
echo '<TABLE bordercolor=#000000 cellspacing=0 cellpadding=10 border=0 rules=rows frame=box width="90%">'."\n";
echo '<tr>';
echo '<td><B><font size=1>Test Name</font></B></td><td><B><font size=1>Date</font></B></td><td>';
echo '</tr>';
echo '<tr>';
echo '<td><font size=1>Test Number 1</font></td><td><font size=1>01/01/2010</font></td>';
echo '</tr>';
echo '<tr>';
echo '<td><font size=1>Test Number 2</font></td><td><font size=1>02/01/2010</font></td>';
echo '</tr>';
echo '<tr>';
echo '<td><font size=1>Test Number 3</font></td><td><font size=1>03/01/2010</font></td>';
echo '</tr>';
echo '<tr>';
echo '<td><font size=1>Test Number 4</font></td><td><font size=1>04/01/2010</font></td>';
echo '</tr>';
echo '<tr>';
echo '<td><font size=1>Test Number 5</font></td><td><font size=1>05/01/2010</font></td>';
echo '</tr>';
echo '<tr>';
echo '</TABLE>'."\n"."\n";

?>


Thanks!

Hello Everyone! (hoping for quick reply.. lol)

I am not sure if this should go here, or in the design section. I chose here, because it is a problem in the code itself.

I have introduced myself in the introductory section, if you want to know a little bit more about what I am doing this for.

I made a template design in The Gimp photo editor. I sliced it up, and opened up the HTML file in the editor Kompozer. It opened up just like it should, but I wanted a liquid type layout, so I turned the cell's widths into the corresponding percentages, though Kompozer rounded them off. (Shown below) However, when I previewed the file this time, it appeared as if it skipped every other cell, leaving a blank white space in its spot. Not even in the right percentages. I think I know what I've done wrong, looking back now that I am writing this thread. Can someone please point me in the right direction?
EDIT: Code posted as comment, due to lack of character room.

Hi guys,

I'm making a newsletter template while volunteering for a charity. I'm very much not an expert in html and I'm really stumped as to how I've gotten the code for laying out cells in such a mess.

I managed to make a template with a less complex layout but then modified it and this happened:



I've highlighted the areas with a red ring where there is grey and there shouldn't be. It was perfectly fine when the newsletter sections were two per row but when I modified the code so that the first section took an entire row it went downhill Where the grey is there aren't actually cells and when I try to put ones in in the correct place, they turn up somewhere unexpected and wreck the whole layout.

Can someone please help me? I have uploaded my work he [now deleted]

Thank you for any help you can give!

am having problems with a table i need to add a text box of size 3 max length of 3
right next to the Phone number box. but when i added as a new <td> it moves the whole table and it gets broken.

you can see it in this link what's the table like

http://www.heartofgoldprogram.com/charities/index3.php

i need to add the text box right next to the phone number with a little space in between... its actually to add the box for a Extension... so you will have the phone number digits and in case you have an extension in your number you will put it in this box that i am trying to figure out how to do it.

if anyone can help me it will be great...

the code where that box need's to be is this one

<tr>
<td valign="middle" height="44"><b>Phone: *</b><br />
<input type="text" name="phone1" id="phone1" value="" size="3" maxlength="3" style="margin-bottom:10px; float:left; border-left:none; padding-left:4px; margin-right:0px;" onKeyUp="autoTab(this,'phone2'); buildPhoneNumber();"/>
<input type="text" name="phone2" id="phone2" value="" size="3" maxlength="3" style="float:left; border-left:none; margin-right:0px; margin-left:0px;" onKeyUp="autoTab(this,'phone3'); autoTabBack(this,'phone1'); buildPhoneNumber();"/>
<input type="text" name="phone3" id="phone3" value="" size="4" maxlength="4" style="float:left; border-left:none; margin-right:0px; margin-left:0px;" onKeyUp="autoTabBack(this,'phone2'); buildPhoneNumber();"/>
<input type="hidden" name="phone" id = "fullPhoneNumber" value="" size="27" />
<td valign="middle" height="40">&nbsp;</td>
<td colspan="1" height="40">
<input name="submit" type="image" src="images/joinbutton2.jpg" alt="joinus" align="right" border="0" style="margin-right:1px; margin-bottom:6px" />
<td width="11" height="39" valign="middle">&nbsp;</td>
</tr>




thanks

Federico

what am i doing wrong?
Quote:
<!--DON'T DARE TO REMOVE THIS-->
<!--This layout was made by Prodigy with a huge help of </b><a href="http://st.pcaworld.net/"><b>Levus</b></a>.</div>
/*these are the main properties of your layout */

body {
background-color: #DD0000;
background-image:
color: #000000;
}






/*these are the properties of a table cell */

td {
border: 0px;
vertical-align:top;
}






/*these are the properties of a link */

A:link { color: #000000; text-decoration: none; font-weight: ; cursor: ; }
A:visited { color:#000000; text-decoration: none; font-weight: ; cursor:; }
A:hover { color:#000000; text-decoration: underline; font-weight:; cursor:; }









/*these are the properties of the banner */

#banner {
background-color: #DD0000;
text-align:center;
height:198px;
width:100%x;
border:1px solid #000000;
}






/*these are the properties of the content */

#content {
float:left;
background-color: #DD0000;
width: 70%;
height: 100%;
color:#000000;

}






/*these are the properties of the right menu */

#rightmenu {
float:right;
background-color: #DD0000;
width: 15%;
height: 100%;
color:#000000;
border: 0px solid #000000;
border-top: 0px solid #000000;
}






/*these are the properties of the left menu */

#leftmenu {
float:left;
background-color: #DD0000;
width: 15%;
height: 100%;
color:#000000;
border: 0px solid #000000;
border-top: 0px solid #000000;
}






/*these are the properties of a category on a menu */

.catagory {
background-color: #DD0000;
color: #000000;
font-weight: bold;
border: 1px solid #000000;
}






/*these are the properties of a heading (page title) */

.heading {
background-color: #FF0000;
color: #000000;
width: 90%;
font-weight: bold;
border: 1px solid #000000;
}






/*these are the properties of the heading on the disclaimer */

.dheading {
background-color: #FF0000;
color: #000000;
width: 71%;
font-weight: bold;
border-top: 0px solid #000000;
border: 1px solid #000000;
}






/*these are the properties of the disclaimer */

#disclaimer {
float:right;
background-color: #FF0000;
color: #000000;
width: 100%;
border-top: 1px solid #000000;
border: 0px solid #000000;
}

</style>



</head>



<body>


<!--only edit under here-->




<!--this is the banner-->

<center><div id="banner">

<center>


<img src="http://i4.tinypic.com/63n130g.png">


</center>
</div></center>

<!--the banner end here-->






<!--left menu starts here-->
<div id="leftmenu">
<div class="catagory"><center>Layout Changer</center></div>
<div class="catagory"><center>Pokemon</center></div>
<a href="pokedex.html"><center>Pokedex</center></a>
<a href="POTW.html"><center>POTW</center></a>
<a href="FanArt.html"><center>Fan Art</center></a>
<div class="catagory"><center>Other</CeNtEr></div>
<a href="sigs.html"><center>Free Sigs</center></a>
<a href="layouts.html"><center>Free Layouts</center></a>
<a href="Games.html"><center>Games</center></a>
<a href="emulation.html"><center>Emulation</center></a>
<a href="affys.html"><center>Affiliation</center></a>
<div class="catagory"><center>Current POTW</center></div>
<center><b>#248 Tyranitar</b></center>
<center><IMG SRC="http://www.pokemonelite2000.com/sprites/dpmfa/dpmfa248.png" ALT="NPOTW"></center>
<center><a href="POTW.html"><b>Past POTW</b></a></center>
<!--left menu ends here-->
</div>
<!--page name goes here-->
<div id="content"><center><div class="heading">Secret Pokemon Training Other Known As SPT</div></center>
<!--page name stops here-->
<!--content goes here--><center><b>News</b></center><br><br>
<center>5/12/07: Aeroburn, he said hes gonna help but after hes done with some work of his own, so im happy about that. And maybe just maybe we'll be hosted by a network, not saying any spoilers..</center><br><br>
<center>5/4/07: Well, i talked to Aeroburn but it didn't help me i guess i got to do it the easy but complicated way. Site will be released soon.</center><br><br>
<center>4/28/07: Yea, its saturday. I still havent talked to Aeroburn! But i put a page hit, and uhh...idk</center><br><br>
<center>4/25/07: Since im new to html, i need to do somehting (without this i cant do anything on the liks) so im waiting for Aeroburn to go online XD =P</center><br><br>
<center>4/24/07: Yea, i havn't been posting on this, idk y though, i didnt give the link to anyone except Havok. lol, but i havnt been posting cuz ive been trying to figure out the misteries against the layout changer, and it's worth it i got it with the help of Aeroburn from PCA/PokeNebula: If u have errors with any layouts just refresh the page, it should be good =D<br><br></center>
<center>4/19/07: We're installing New Stuff. Including Layout Changer, Pokedex, POTW, Fan Art, Free Sig/Layouts, Games, Affiliation,PUA: Info, Trades, Battling, Show Off, PCA: Info, Trades, Battling, Show Off, PC: Info, Trades, Battling, Show Off.<br><br></center>
<!--content stops here-->
</div>
<!--right menu starts here-->
</div><div id="rightmenu">
<div class="catagory"><center>Affiliates</center></div>
<center><a href="affys.html"><b>Apply Here</b></a></center>
<div class="catagory"><center>ShoutBox</center></div>
<!-- BEGIN CBOX - http://www.cbox.ws -->
<center><div align="center" id="cboxdiv">
<iframe frameborder="0" width="160" height="305" src="http://www4.cbox.ws/box/?boxid=3166240&amp;boxtag=5868&amp;sec=main" marginheight="2" marginwidth="2" scrolling="auto" allowtransparency="yes" name="cboxmain" style="border:#FFFFFF 1px solid;" id="cboxmain"></iframe><br/>
<iframe frameborder="0" width="160" height="75" src="http://www4.cbox.ws/box/?boxid=3166240&amp;boxtag=5868&amp;sec=form" marginheight="2" marginwidth="2" scrolling="no" allowtransparency="yes" name="cboxform" style="border:#FFFFFF 1px solid;border-top:0px" id="cboxform"></iframe>
</div></center>
<!-- END CBOX -->
<div class="catagory"><center>SPT's Hits</center></div><br>
<!-- Start Bravenet.com Service Code -->
<center><script language="JavaScript" type="text/javascript" src="http://pub38.bravenet.com/counter/code.php?id=401896&amp;usernum=3260284116&amp;cpv=2">
</script></center>
<!-- END DO NOT MODIFY -->
<!--right menu ends here-->
</div>
<!--disclaimer starts here-->
<div id="disclaimer"><center><div class="dheading">Copyright Notice:</div>
<center><b>Do NOT steal! "Layout Made By Prodigy with a huge help of </b><a href="http://st.pcaworld.net/"><b>Levus</b></a>.</center></div>
<!--disclaimer ends here-->
<!-- --><script type="text/javascript" src="/i.js"></script></body>
</html>

I have the code to my website working perfectly when I view it in dreamweaver or by viewing the html file in internet explorer or firefox. But when I upload it to my server, It is pretty messed up. You can view the problem at larella.org. Code should be fine, and my server displayed the site correctly before. I've tried deleting files on my server and re-uploading the with no result. Any suggestions? Files I may be missing?

hello,
I have recently began making web pages. I understand the basics, however do not use an editor. Is their a good html editor to use, for laying out web sites a little easier? I have basically just always free handed it. Cut and paste in notepad, and altered accordingly. My question is any kind of editors recommended? Free preferably, but any help would be greatly appreciated.
-brett-