HTML - This Table Is Driving My Crazy

I am trying to create a table that looks like the following:
_____________
|_______|____|
|___________ |
|___|________|

Here is the code I am using:

HTML Code:

#mainTable {
	width: 100%;
	padding: 0;
	margin: 0;
}

#headerLeft {
	padding: 10px 0 10px 10px;
	width: 606px;
}

#headerRight {
	margin-top: 25px;
	text-align: right;
	white-space: nowrap;
}

.orangeBar {
	margin: 0;
	padding: 0;
	font-size: 8px;
	background-color: #FFC342;
}

#navCell {
	width: 225px;
	vertical-align: top;
}

#contentCell {
	width: auto;
	vertical-align: top;
}
<table id="mainTable" border="1">
  <tr>
      <td id="headerLeft" colspan="2"><img src="images/logo.gif" width="596" height="60" alt="Our Logo" /></td>
      <td id="headerRight">Nav Links</td>
  </tr>
  <tr>
      <td colspan="3"><p class="orangeBar">&nbsp;</p></td>
  </tr>
  <tr>
      <td id="navCell">Nav</td>
      <td colspan="2" id="contentCell">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In a sem. Integer mattis justo eu nunc.</p>
      </td>
  </tr>
</table>

For some reason, the Nav cell in the last row is taking on the width of the image in the first cell, even though I want it to be 225px wide. I want the table to be the width of the page (100%).

Anyone have any ideas? I know it can be done by nesting two tables, I was just trying to avoid that. Thanks!

Just a quick edit, I added a bg color to headerLeft. Then I tested my code with the image removed, and the layout works they way I want, but as soon as I put it back, it is messed up again! The bg color I added confirms that the cell is the same size with and without the image.

I am hoping someone with "fresh" eyes will be able to spot why I have a 1 pixel space pushing the bottom of my table down. It's a project I inherited, so it's not my code, but it should be obvious to me as to why it's not formatting correctly (but for the life of me, I cant see it). Anyone?

Top part of code (if it's of any use):
Code:

<table border="0" cellpadding="0" cellspacing="0" bordercolor="0">
  <tr>
    <td width="453" valign="top" background="images/homeBackground.jpg" class="BackNoRepeat">&nbsp;</td>
    <td width="742" align="right" valign="top"><table width="742" border="0" cellpadding="0" cellspacing="0">
        <tr>
          <td width="300" align="left" valign="top"><table border="0" cellpadding="0" cellspacing="0">
              <tr>
                <td colspan="2"><img src="images/topLogo.jpg" width="300" height="128" /></td>
              </tr>
              <tr>
                <td align="left" valign="top"><img src="images/imgOpening.jpg" width="163" height="124" /></td>
                <td align="right" valign="top"><img src="images/rolloverMenu1.jpg" width="137" height="20" /><br />
                  <a href="recipes.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image15','','images/homeRecipesBTN_ov.jpg',1)"><img src="images/homeRecipesBTN.jpg" alt="Recipes" name="Image15" width="137" height="28" border="0" id="Image15" /></a><br />
                  <a href="nutrition.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image16','','images/homeNutritionBTN_ov.jpg',1)"><img src="images/homeNutritionBTN.jpg" alt="Nutrition" name="Image16" width="137" height="25" border="0" id="Image16" /></a><br />
                  <a href="webstore.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image17','','images/homeWebstore_ov.jpg',1)"><img src="images/homeWebstore.jpg" alt="Web Store" name="Image17" width="137" height="36" border="0" id="Image17" /></a><br />
                  <img src="images/home3.jpg" width="137" height="15" /></td>
              </tr>
            </table></td>
          <td width="442" background="images/mainBackground-right.jpg"><table width="441" border="0" cellpadding="0" cellspacing="0">
              <tr>
                <td width="441" align="left" valign="top"><img src="images/topRight.jpg" width="442" height="71" /></td>
              </tr>
              <tr>
                <td><table width="442" border="0" cellpadding="0" cellspacing="0">
                    <tr>
                      <td width="235"><script type="text/javascript">
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0','width','235','height','135','id','opening animation','align','','src','images/home','quality','high','bgcolor','#FFFFFF','name','opening animation','pluginspage','http://www.macromedia.com/go/getflashplayer','movie','images/home' ); //end AC code
</script>
                        <noscript>
                        <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"  codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" width="235" height="135" id="opening animation" align="">
                          <param name="movie" value="images/home.swf" />
                          <param name="quality" value="high" />
                          <param name="bgcolor" value="#FFFFFF" />
                          <embed src="images/home.swf" quality="high" bgcolor="#FFFFFF"  width="235" height="135" name="opening animation" align="" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"></embed>
                        </object>
                        </noscript></td>
                      <td width="207" rowspan="2"><img src="images/main-top-right1.jpg" width="207" height="181" /></td>
                    </tr>
                    <tr>
                      <td height="47"><img src="images/main-top-right2.jpg" width="235" height="46" /></td>
                    </tr>
                  </table></td>
              </tr>
            </table></td>
        </tr>

this is where the space happens...and then the following code:
Code:

        <tr>
          <td colspan="2"><img src="images/home5.jpg" width="742" height="69"></td>
        </tr>
        <tr>
          <td colspan="2" align="left" valign="top"><table width="742" border="0" cellpadding="0" cellspacing="0">
              <tr>
                <td width="224" align="left" valign="top"><img src="images/home6.jpg" width="224" height="57" /></td>
                <td width="251"><form action="" method="post" >
                    <table width="93%" border="0" align="center" cellpadding="0" cellspacing="0">
                      <tr>
                        <td width="29%" align="right">Username:</td>
                        <td width="34%"><input name="textfield" type="text" size="15"  style="font-size:.75em"/></td>
                        <td width="37%" rowspan="2"><input type="image" name="imageField" src="images/loginBTN.gif" /></td>
                      </tr>
                      <tr>
                        <td align="right">Password:</td>
                        <td><input name="textfield2" type="password" size="15" style="font-size:.75em"" /></td>
                      </tr>
                    </table>
                  </form></td>
                <td width="267" align="right" valign="top"><img src="images/home7.jpg" width="267" height="57" /></td>
              </tr>
            </table></td>
        </tr>
      </table>
      <div id="greenLineBack"></div>
      <div id="footer">&copy; Copyright 2007. All Rights Reserved.<img src="clear.gif" width="50" height="1"/><a href="#">RECIPES</a> | <a href="#">NUTRITION</a> | <a href="#">WEBSTORE </a></div></td>
    <td width="454" valign="top" background="images/mainBackground-right.jpg" class="BackNoRepeat2">&nbsp;</td>
  </tr>
</table>

Hello All,

I've been having trouble with this table because I have interior cells adding to the confusion. I've included the current code, what you will see is three item images with their descriptions on the right side. You will also see a "view cart" button on the far right of the page.

What I want is a simple 2 row 2 column set up for all four components. "Item 1" in the TOP LEFT cell. "Item 2" in the Bottom Left. The "view cart" feature in the TOP RIGHT cell. And finally "Item 3" in the BOTTOM RIGHT cell. I know I only need a few <td> or <tr> lined up in the right place but I've tried everything.


THANK YOU IN ADVANCE!!!!


<!--// Document Style //-->

<style>
.product-image { border:none; }
.product-title, .product-price, .product-shipping { font-weight:bold; }
.data-cell { padding:0px 50px 0px 10px;vertical-align:top}
.align-cart { padding-left:280px; top:30pt;}
</style>

<!--// Document Table //-->

<table class="data-cell">
<tr class="product">
<td><img
src="images/stainless_thumbnail.gif" width="65" border="0" align="absmiddle" class="product-image"/></td>
<td class="data-cell">
<div class="product-title">
<div align="center">Item 1 Name</div>
</div>
<div class="product-price">
<div align="right">Price: $10.00</div>
</div>
<div class="product-shipping">Shipping: $3.00</div><br/>
<div class="googlecart-add-button"></div>
</td>
</tr>

<tr class="product">
<td><img
src="Item2_image.jpg" width="65" border="0" align="absmiddle" class="product-image"/>
</td>
<td class="data-cell">
<div class="product-title">
<div align="center">Item 2 Name</div>
</div>
<div class="product-price">
<div align="right">Price: $10.00</div>
</div>
<div class="product-shipping">Shipping: $3.00</div><br/>
<div class="googlecart-add-button"></div>
</td>
</tr>

<tr class="product">
<td><img
src="Item3_image.gif" width="66" border="0" align="absmiddle" class="product-image"/>
</td>
<td class="data-cell">
<div class="product-title">
<div align="center">Item 3 Name</div>
</div>
<div class="product-price">
<div align="right">Price: $10.00</div>
</div>
<div class="product-shipping">Shipping: $3.00</div><br/>
<div class="googlecart-add-button"></div>
</td>
</tr>
</table>

<!--// Document Script "View Cart" //-->

<script id="googlecart-script" type="text/javascript"
src="http://checkout.google.com/seller/gsc/v2/cart.js?mid=xyz"
currency="USD"
post-cart-to-sandbox="fale">
</script>

Hi,
I have a cell within a table and into that I would like to place 4 x layers, all on top of each other. Adjacent to this I have 4 rows in a table, each with an image - the aim is to use OnMouseOver to hide / unhide the layers depending on which of the 4 smaller images are hovered over...

The problem I have is that my website uses tables (width 950px) that are centred on the screen - and with resizing the screen in different browsers, the layers go out of alignment.

Is there an easy way to ensure the layers always stay within the table cell?

I'm using Dreamweaver MX2004.

Thank you in advance for your very kind help.

Matt

Hey good morning Im a photographer in st.louis . I normally do well with basic html im stuck now though. Im simply trying to get a Google Check out Button , Schedule Now Button , Facebook button and Twitter button all to appear on the same line on my web site. Right now they are stacked taking up way to much space. Any help would be appreciated. Here is a link to my web site so you know what Im talking about. simply scroll to just under the description of my Beginner Photography Course http://www.stlphotoart.com/Other/Beg...6793697_9F5rP3

So I'm redesigning a page for a friend, and we decided that iframes would be an awesome way to not have to update every page of the site when he wanted to change his menu or whatever.

The design looks good now, but I'm having a problem trying to redirect the pages to only open in the frame. I've looked on google endlessly and can't seem to find what I'm looking for.

The code that puts the iframe in my main frame page looks like this:
<center><iframe name="iframe" width="100%" height="100%" *overflow-x:hidden;*></iframe> </center>

The problem is that if someone finds a page on a search engine, they'll only see the page intended to be viewed in the frame. There's no way for them to get back to the home page, and the design of the page is basically absent. To deal with that, I found a piece of javascript that is supposed to make the page automatically open in its proper iframe, regardless of where it is linked from.

That code looks like this:
<SCRIPT LANGUAGE='JavaScript'>
<!--
if (top == window)
location.href = "home.htm"
-->
</SCRIPT>

So, assuming you're still with me... when I use that piece of javascript, it redirects to the page with the iframe, but the iframe is blank. Originally I had the iframe set up to display the home page by default, but then when I used the js on other pages, it brought up the frame as well as an error message in the iframe.

My question, then, is this: how the #(&$ do I set the iframe to display whatever page it is redirected from? It's driving me nuts, and I can't find info on this anywhere! Any help would be greatly appreciated!

FYI, if it helps to see the pages and the errors I'm getting, the frames page is www.inthebackrow.com/home.htm. To see the orphaned pages, you can try www.inthebackrow.com/fun.htm, and the page I've been javascript-experimenting with is www.inthebackrow.com/driveins.htm.

Thank you!!

Heres the html code:
Iam just leaning the stuff, so please be patient. when you goto the url theres a box
all arond the website like its a pictue or somthing Heres the

www:The BOX
http://onestart.awardspace.biz


HTML: CODE
http://onestartcomputers.weebly.com/html.html

Not sure this is the right way of posting but it works.

Hi all, I have a problem that I think is simple but is making me go insane.

I have a HTML email service that sends me email from my google blog without having top give my email address out. The problem is that it doesn't fit into my google blog. What I want to do is just to take the boxes and put the labels in myself, which is not a problem, but I need to know what part of the HTML makes the buttons work. Any help would be greatly appreciated, for my sanity more than anything else!:


<form method="post" action="http://www.emailmeform.com/fid.php?formid=68804" enctype="multipart/form-data">
<INPUT TYPE=hidden NAME=FCode VALUE="5bb5hnjb">


<table cellpadding="2" cellspacing="0" border="0" bgcolor="#FFFFFF">
<tr>
<td>
<font face="Verdana" size="2" color="#000000"></font>
<div style="" id="mainmsg"> </div>

</td>
</tr>
</table>

<br>

<table cellpadding="2" cellspacing="0" border="0" bgcolor="#FFFFFF">

<tr valign="top">
<td nowrap><font face="Verdana" size="2" color="#000000">Your Name</font></td>
<td>
<input type="text" name="FieldData0" value="" maxlength="100" size="20"> </td>
</tr>

<tr valign="top">
<td nowrap><font face="Verdana" size="2" color="#000000">Your Email Address</font></td>
<td>
<input type="text" name="FieldData1" value="" maxlength="100" size="20"> </td>
</tr>

<tr valign="top">
<td nowrap><font face="Verdana" size="2" color="#000000">Subject</font></td>
<td>
<input type="text" name="FieldData2" value="" maxlength="100" size="20"><div style="position:absolute; top:343px; right:1582px;"><b>Tip: How to create web forms</b><br>Ever needed to create web forms for your website? We recommend Emailmeform, a service that helps you <a href="http://www.emailmeform.com">create web forms</a> easy in a few steps. No need to learn HTML or PHP!</div> </td>
</tr>

<tr valign="top">
<td nowrap><font face="Verdana" size="2" color="#000000">Message</font></td>
<td>
<textarea name="FieldData3" cols="40" rows="15"></textarea><br> </td>
</tr>

<tr>
<td colspan="2">
</td>
</tr>
<tr>
<td> </td>
<td align="right">
<input type="text" name="hida2" value="" maxlength="100" size="3" style="display : none;">
<input type="submit" class="btn" value="Send email" name="Submit"> <input type="reset" class="btn" value=" Clear " name="Clear"></td>
</tr>
<tr>
<td colspan=2 align="center">
<br>
</td>
</tr>
</table>

</form>

Iv been creating an ebay listing on Frontpage, the pictures iv added to the page have been from my pc, next I click on the CODE tab at the bottom, I copy all the code, then I go into turbo lister and click the HTML tab, I paste the code in, then I click on preview, the pics are not there, just a little red x in the corner.

So Im thinking I should upload the Pics from my PC onto my server, (uk2) aswel as the whole file, in uk2 on the panel it shows EDIT HTML, it has all the pics there! then I click the CODE Tab and copy the code and pasted the code back into turbo lister, same thing, no pics again. Most of the time I figure these typs of things out before I get help, and this was is a real brain teaser! The filename is ebaylisting1, also it says the the file is a firefox Document

Please Advise, thank you

I have stared and stared and STARED at my code, but I cannot figure out where the stray equal sign (=) comes from on this page. It shows up centered on the page between the "Log out" and the "Team"

Maybe another set of eyes can help. Thanks in advance.

Jo

http://www.bocachristian.org/preview/_pages/stray.php

Hi Guys,

Firstly, I'd like to say this is a great forum - it's been a great help getting started with html & web design.

I've an issue regarding IE and CSS layouts. I'm currently creating www.pulselifts.net . In Firefox and any other browser, it displays fine, however, in IE, the buttons on the left hand side have alignment issues.

I've tried looking at all of the CSS & IE issues, but cannot seem to fix it!

Does anybody have any ideas?

Thanks!

Hello there friends! first i apologize if this thread is in the wrong section its just that i don't even know how to name what i want.

OK here is the deal, i have a software that i developed and im trying to create a page where my costumers adds any error that they found while using the software..

fox example, a user find some type of error in the software then they go to my webpage click an "add" button to type the error that they found, click submit and the new error is displayed i the list. its kind off like the lists in sharepoint. i don't if you are familiar with sharepoint.

anyway, thats all, even some help naming what i want would be really appreciate. im using expression web if that helps.

done
i've made my own way to solve it thanks

Hi!

I had my test webpage where i test my designs, scripts etc. working well but then my little brother change some stuff in both the html file and css file, I already fixed a lot but I don't know what's wrong now.

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>ComBBAT  - FRC Team 21</title>
<link href="http://demo.combbat21.com/css/general.css" rel="stylesheet" type="text/css" media="screen, all"/>
<link href="http://demo.combbat21.com/css/img.css" rel="stylesheet" type="text/css" media="screen"/>
<link href="http://demo.combbat21.com/css/print.css" rel="stylesheet" type="text/css" media="print"/>
<meta name="description" content="ComBBAT, Team 21 is a FIRST Robotics Competition team consisting of both Titusville and Astronaut Highschools in Titusville, Florida." />
<meta name="keywords" content="USFirst, robotics, titusville, brevard, florida, FRC, ASRC, boeing, FIRST, ComBBAT, team 21, govconnection, team, competition, FIRST, first," />
<meta name="author" content="Daniel Cuesta" />
<link rel="shortcut icon" type="image/x-icon" href="http://files.combbat21.com/website/images/favicon.ico" />
<!--[if IE]>
<style type="text/css"> 
</style>
<![endif]-->
<!--JAVASCRIPTS-->
<script type=text/javascript"" src="http://demo.combbat21.com/js/addfav.js"></script>
<script language="JavaScript1.1" src="http://demo.combbat21.com/js/slidehome.js"></script>
<script type="text/javascript" src="http://demo.combbat21.com/js/report.js"></script>
</head>
<!--|| -->
<body>
  <div id="container">
   <div class="br10"></div>
    <div id="top">
     <ul>
<li><a href="http://m.combbat21.com">mobile</a></li>
<li><a href="javascript: function('addfav')" >Bookmark us</a></li>
<li><a href="http://members.combbat21.com">login</a></li>
</ul>
             </div>
      <div id="header">
       <a href="../../../" id="logo" title="Home"></a>
        <a href="../../../" id="name" title="Home"></a>
         <a href="http://usfirst.org" id="first" title="FIRST" target="_blank"></a>
                                  </div>
              <div id="navbar">
 <ul>
  <li><a href="http://combbat21.com" id="n1" class="active">Home</a></li>
  <li><a href="first/">FIRST</a></li>  
  <li><a href="about/">About us</a></li>
  <li><a href="multimedia/">Multimedia</a></li>
  <li><a href="resources/">Resources</a></li>
  <li><a href="contact/">Contact us</a></li>
 </ul>
    </div>
    <div id="breaker"><!--
<span class="pathway">You are he </span><a href="../../../../">Combbat21.com</a>
<div id="search">
<form name="cse" id="searchbox_demo" action="http://www.google.com/cse">
  <input tabindex="3" class="txt" name="q" value="" title="Search" /><input type="image" id="searchB" name="submit" src="http://files.combbat21.com/website/images/search-button.gif"/></form>
-->
</div>
</div>
    <div id="rightcol">
          <ul>
            <li><a href="about/">about combbat</a></li>
             <li><a href="first/">about first</a></li>
            <li><a href="news/">news</a></li>
            <li><a href="blog/">blog</a></li>
            <li><a href="calendar/">calendar</a></li>
            <li><a href="donate/">donate</a></li>
            <li><a href="sitemap/">sitemap</a></li>
          </ul>
       </div>
       <div id="leftcol">
<a href="javascript:gotoshow()"><img src=".jpg" name="slide" border=0 width=100% height=100%></a>
<script> 
<!--
slideshowimages("http://files.combbat21.com/website/images/slideshow/1.jpg","http://files.combbat21.com/website/images/slideshow/2.jpg","http://files.combbat21.com/website/images/slideshow/3.jpg","food4.jpg","food5.jpg")
slideshowlinks("http://food.epicurious.com/run/recipe/view?id=13285","http://food.epicurious.com/run/recipe/view?id=10092","http://food.epicurious.com/run/recipe/view?id=100975","http://food.epicurious.com/run/recipe/view?id=2876","http://food.epicurious.com/run/recipe/view?id=20010")
 
var slideshowspeed=2000
 
var whichlink=0
var whichimage=0
function slideit(){
if (!document.images)
return
document.images.slide.src=slideimages[whichimage].src
whichlink=whichimage
if (whichimage<slideimages.length-1)
whichimage++
else
whichimage=0
setTimeout("slideit()",slideshowspeed)
}
slideit()
 
//-->
</script>
<noscript>In order to see the slideshow you must enable javascripts</noscript>
 
</div>
        <div id="content">
<a href="" onClick="window.print(); return false">
 <img src="http://files.combbat21.com/website/images/print.png" title="Print" alt="print button" class="tb"></a> 
         <h2>Welcome to combbat21.com</h2> 
<p>FIRST Robotics Competition Team 21 was started in 1996 to share and expand FIRST's vision with students of Astronaut and Titusville High Schools in Titusville, Fl. Our mentors, Scott Strickland from Boeing, James Rallo from Upper Mohawk Inc, Stephen Stout from ASRC Aerospace, Kevin Cunningham from USA, and Jeff White, assist the ever-expanding team of high school students design, construct, and program a fully functional ~120 lb robot and facilitate the development of important life skills such as teamwork, communication, and leadership. </p>
    </div> 
   <div id="sponsors">
    <p>The FIRST Robotics Team 21 gracefully thanks its sponsors:</p>
     <a href="" target="_blank" id="boeing"></a> 
      <a href="" target="_blank" id="govc"></a>
       <a href="" target="_blank" id="asrc"></a>
    </div>
    <div id="footer">
 <ul>
   <li><a href="/chforum">chief delphi forum</a></li>
   <li><a href="/mobile">mobile</a></li>
   <li><a href="link/">link to us</a></li>
   <li><a href="sitemap/">sitemap</a></li>
   <li><a href="sponsorus/">sponsor us</a></li>
   <li><a href="contact/">contact us</a></li>
  </ul> 
   </div>
    <div id="end">
<a href="javascript:popUp('http://www.demo.combbat21.com/report')">Report</a>
</div>
     <div align="center"><!--needed for ff-->
      <div id="bottom">
       <p>FRC Team ComBBAT 21. Copyright &copy; 2010. All rights reserved.</p>
    </div>
</div>
  </div>
</body>
</html> 

css:www.demo.combbat21.com/css/general.css
Thanks a lot to anyone that replies.

Does anyone know why there is padding around all my buttons on this page? They should be flush against each other... Any ideas? http://www.curiousclothing.com/test/tours.htm