HTML - Table - How To Avoid Space Under Text

Can anyone tell me why there is a space at the bottom of my page between the images in the middle and the bottom image? The page looks fine in Firefox and I cannot figure out why there is a space in IE7. Any suggestions would be greatly appreciated. Thanks

Frank

http://www.spartafitness.com/home.htm

I am working on a layout for a website, I'm not new at all to HTML, it's just been a while. I have a banner taking up the first row of the table(colspan=2), and for the 2nd row, I have a menu and a text region. This 2nd row always has a small space between it and the 1st, even if cellspacing=0. Is there any way to do this with a simple <table>??? Someone told me that using a table would be less effective than using <div>, is this true? If so, how would I do this using <div>. Thank you for any suggestions.

Hey guys

Ok so I have a table with one row and three columns, all sizes set. Now, this table is a part of a PHP script output.

So what happens is the <td> on the left has an image in it, the <td> on the right has an image in it, and the <td> in the middle has the text output from the script.

Problem: if someone inputs a row of letters "aaaaaaaaaaaaaaaaaaaaaaa..." after a certain point it's going to stretch the table and ruin the entire layout.

I bypassed this by having the middle <td> completely filled with <textarea>, however this way I can't apply styling like <b> to the text inside of <textarea>. how do I make a table ABSOLUTELY set in size or that <td> ABSOLUTELY set to a certain size?

Sorry for a long explanation.


Thanks a bunch in advance.

Hi everyone, not sure if this is possible but I would like to have a page that has two textboxes - "1: Input" and "2: Output"

So if you copy a few paragraphs from MSWord into that first input box, then click a button that says "Convert", the second Output box shows up with the same text only with a full line break in between paragraphs (not put html tags like <BR> in it)

My reasoning is that in word, you can distinguish between paragraphs because of tabbing, but when you copy/paste it into a forum post, it just mushes together and becomes very difficult to read, making line breaks the best way to separate.

Example:

Input:
Code:

Once upon a time blah blah blah.
The next day thirty people died. It was sad.

Output:
Code:

Once upon a time blah blah blah.

The next day thirty people died. It was sad.

Thank you!

Hi All!

I have a question about the (white) space above any text.
I don't know if its possible or not but i hope yes...
Please look at the attached picture.
You can see the space between the text and the black border on the top...

I tried padding, margin set to zero but nothing worked!
Maybe its not possible to remove it?

Thanks in advance!

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>

For some reason, I have a lot of extra space at the top of my page. What could be causing this and how do I fix it?

Hi. The following example code displays the way I want it to in Firefox, with the top row about one pixel deep. But in IE 7 and MS email viewers (outlook, outlook express) it doesn't, with the top row being maybe 15 px deep. I've tried coding it all kinds of ways but I can't get the same effect as in Firefox.

Does anyone know how to get round this? (The reaso for using inline style and tables is that it's for a subscriber-only email newsletter. and that's what works.)

Would be grateful for any suggestions !

Thanks

Dedge

********************************

Code:

<TABLE width="520" cellSpacing=0 cellPadding=0 border=1>
	<tr><!--Row to set column widths-->
		<td valign="middle" align="center">
			<IMG src="spacer.gif" width="1"  height="1" alt="">
		</td>
		<td  valign="middle" align="center">
			<img src="spacer.gif" width="256" height="1" alt="">
		</td>
		<td  valign="middle" align="center">
			<IMG src="spacer.gif" width="8" height="1" alt="">
		</td>
		<td  valign="middle" align="center">
			<IMG src="spacer.gif" width="255" height="1" alt="">
		</td>
	</tr>
	<tr>
		<td><IMG src="spacer.gif" width="1"  height="30" alt=""></td>	
		<td style="PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-WEIGHT: bold; FONT-SIZE: 13px; LINE-HEIGHT: 15px; PADDING-BOTTOM: 3px; MARGIN: 4px 0px; VERTICAL-ALIGN: middle; WIDTH: 100%; COLOR: #ffffff; PADDING-TOP: 3px; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; BACKGROUND-COLOR: #000066; TEXT-ALIGN: center">Left-Hand Heading</td>	
		<td><IMG src="spacer.gif" width="1"  height="1" alt=""></td>
		<td style="PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-WEIGHT: bold; FONT-SIZE: 13px; LINE-HEIGHT: 15px; PADDING-BOTTOM: 3px; MARGIN: 4px 0px; VERTICAL-ALIGN: middle; WIDTH: 100%; COLOR: #ffffff; PADDING-TOP: 3px; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; BACKGROUND-COLOR: #000066; TEXT-ALIGN: center">Right-Hand Heading</td>	
	</tr>
</TABLE>

On every other page, my table around my content works, but on the main page:

http://www.snowwhitedesign.com

there is a lot of white space below my image.

My entire image is broken down into 3 x 3 images, 9 total in the grid. All images have different heights and widths

I constructed the table by first creating the larger table with the blue border, and then created separate vertical tables within each vertical <td> since the images are of different heights.

Also, how can I get rid of that small border line running right through the middle of my image?

thanks!

Hi, I have a problem. some of my HTML text appears differently in the browsers. for e.g - I want my text to show normally like this - Hi My name is raj.

BUT on the browser it is showing as Hi M Y na me is r aj.

How do I get rid of the unwanted space. Pease help somebody and thanks in advance (",)

I am having a small problem after inserting a URL. all the text a head of it is spaced out far apart and not sure why or how to fix this.

Here is this code and below is a screen shot.

HTML Code:

<p> <a href="/images/how_to/signframe/fig1_sign.JPG"><img src="/images/how_to/signframe/fig1_sign.JPG" style="float: left" height="150" width="150" hspace=10 border="0"></a> I got the idea to do this project from Ryan Johnson at <a STYLE="text-decoration:none" href="www.johnsonschristmascorner.com">www.johnsonschristmascorner.com</a> on the Texas Christmas Lights Forum as he had made one for himself. It really fit the look I had this year as well as what I would be implementing for the next year. So I decided to build one and document the process of the build for those that would be interested in building one for them selfs. These plans are for a 18" x 24" sign which was made from corrugated plastic. You can get these done from your favorite sign shop. I used Stellar Signs in Plano, Tx on Plano Pkwy. Took them about an hour to make with my design I gave them for $23. That was for a full color one sided sign which is not a bad price, cheapest I had found without ordering it online. So call Cassie and tell them Mesquite Christmas sent you and they will hook you up. You are going to need to set a side a couple of hours for assembly and I recommend a full day to allow the paint to dry before assembling.</p>

Notice the first line the text is space wide apart. If I remove the URL from the HTML above it is fine. It only happens when I add the URL. Weird. I have never seen this before.




Any help or feedback

-Thanks

Hello-

A quick question for those in the know:

Is it considered "proper" to put multiple &nbsp; between words to space them out, or is another method preferred as the "correct" way to do it?

I've used tables and transparent 1x1 .gifs for spacing as well depending on the page, but there are a number of times where it's just easier to lay about ten or fifteen nbsps in there till the text is nudged over where you need it and be done with it. Makes for an ugly source, but seems to work fine.

It seems to render properly doing it this way, at least in IE and Firefox, but is it still kosher to do so? Or is everything "proper" supposed to be done with style sheets now?

Thanks,

iv been trying to make a header for a new ebay store.
i have dream weaver with a table with 1 row and 2 col in the first column i have the main logo and 3 hotspot buttons, in the 2nd column i have a solid colour image set as the background for that row.
the problem i am having is the 1st column with the logo image has a white space under the image which looks very annoying html code below:


<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td width="1200" height="292">
<img name="MainHeader" src="http://imagehost.vendio.com/a/35060807/view/MainHeader.jpg" width="1200" height="292" border="0" id="MainHeader" usemap="#m_Main20Header" alt="" />
<map name="m_Main20Header" id="m_Main20Header">
<area shape="poly" coords="810,21,964,21,964,55,810,55,810,21" href="javascript:;" title="Terms And Conditions Page" alt="Terms And Conditions Page" />
<area shape="poly" coords="990,21,1144,21,1144,55,990,55,990,21" href="javascript:;" title="Email Us Page" alt="Email Us Page" />
<area shape="poly" coords="630,21,784,21,784,55,630,55,630,21" href="javascript:;" title="About Our Company Page" alt="About Our Company Page" />
<area shape="poly" coords="450,21,604,21,604,55,450,55,450,21" href="javascript:;" title="Frequently Asked Questions Page" alt="Frequently Asked Questions Page" />
</map>&nbsp;</td>
<td background="http://imagehost.vendio.com/a/35060807/view/headerbg.jpg" width="845" height="292" border="0">&nbsp;</td>
</tr>
</table>

Hi,

I created a table with rounded corners and I'm having a white-space problem in the inner bottom and top part of the table while using the MOZILLA FIREFOX browser. The URL below will show you what I'm talking about. I've spent many hours trying to get rid of those white spaces but cant figure out.

http://www.imageenvision.com/test.html


Code:

<!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01//EN' 'http://www.w3.org/TR/html4/strict.dtd'>
<html>
    <head>
        <title>TEST</title>
        <link rel="stylesheet"  href="/css_style_sheet.css" type="text/css">
    </head>
<body>


<table align='center' width='500' height='0' border='0' cellspacing='0' cellpadding='0'>
    <tr>
        <td width='0' height='0'><img src='/pics/top_left_rounded_corner.gif' height='9' width='9' border='0'></td>
        <td width='100%' height='0'><img src='/pics/top_middle.gif' height='9' width='100%' border='0'></td>
        <td width='0' height='0'><img src='/pics/top_right_rounded_corner.gif' height='9' width='9' border='0'></td>
    </tr>
    <tr>
        <td colspan='3' height='100' align='center' bgcolor='#F8F8F8'><!--MAIN TABLE STUFF--></td>
    </tr>
    <tr>
        <td width='0' height='0'><img src='/pics/bottom_left_rounded_corner.gif' height='9' width='9' border='0'></td>
        <td width='100%' height='0'><img src='/pics/bottom_middle.gif' height='9' width='100%' border='0'></td>
        <td width='0' height='0'><img src='/pics/bottom_right_rounded_corner.gif' height='9' width='9' border='0'></td>
    </tr>
</table>


</body>
</html>

Thanks in advance for your help.

Kenny Adams
Image Envision

i am new, i found this site through google and seen how helpful everyone is and decided to join to try and find an answer.
i got the design for the site from a template but i remade a majority of it and used photoshop to slice it.

so heres the problem, the page is fine the way it is, but i need to be able to type in the white area.
i dont know if a code exists to do such a thing but i attempted to will in the white area with a table instead of the image.

please help me.
thanks in advance.


http://haskinsart.awardspace.com/index.html
above is the page with the image as the white space (the body(where i want to type))

http://haskinsart.awardspace.com/indexart.html
and this one has the table. but as u can see now i have gaps!!! please help me.