HTML - Vert Space Problem With Table In Ie

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; I'm trying to build this menu in a table. Each row has an image, which I'm using for a rollover. Altogether, the table should be 202 x 285 pix.

The problem is, 5 pixels of blank space are being added under every image, (in the same row as the image), and I'm not sure why. Altogether, it's making my table 45 pix too large.

Any help would be appreciated.

HTML:
<div id="menu">
<table border="0" cellpadding="0" cellspacing="0">
<tr><td ><img alt="Home" src="images/regHome.jpeg" /></td></tr>
<tr><td><img alt="Program Information" src="images/regInformation.jpeg" id="Image2" onmouseover="MM_swapImage('Image2','','images/rollOverInformation.jpeg',1)" onmouseout="MM_swapImgRestore()" /></td></tr>
...etc</table></div>

CSS:
#menu
{
margin: 0 auto;

text-align: left;
color: #000000;
font-family:Arial;

position:relative;
float:left;

font-size: 18px;

top:144px;
!top:140px;

height:271px;
!height:100px;
_height:100px;

width:202px;
!width:10px;
_width:10px;
float:left;

background-color:#00FF00;
}

Hello,

I made a goofy little website at adamvonwillis.com and if you look at the home page you will see a gap between the first and second rows. The rows need to be touching. If anyone could look at the code and help me out I would be very greatful! Thank you!

Hi folks,

I'm an amateur webpage designer. I've recently set up a page and am trying to see if there's a solution to something I've noticed when I view my page. In Internet Explorer and icab, it shows the way I would like, but in Safari and Firefox, I see a problem.

My webpage is: http://www.worldwideaccessiblewashrooms.com

At the top, I have the webpage title in a table. In Safari and Firefox, there is more space on the bottom of the text inside the table than on the top. I used a straightforward table html:

<center>
<table bgcolor="#f2e891" border="0" style="border: 3px solid black;">
<tr>
<td><h2>Worldwide Wheelchair Accessible Washrooms</h2></td>
</tr>
</table>
</center>

Is there a way I can change this so that there is equal space above and below the text inside the table box?

Thanks![/url]

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!

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?

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>

So i'm not very good at this stuff, somehow there is an extra white line below the initial title and the three sections. I know there's a lot of garbage in this code of tags that don't need to be here, this code has been constantly edited and by different people and none of us are experts, so a lot of random tags are left around. Possibly one of them is causing the issue.

To simplify things, in this example of my code I have removed all the text and links and what not that someone that visits the site sees with "data data data" as I believe they are irreverent to this issue.

Any help would be great!!!!

My guess is the issue is in the red section, as this is where the gap is between

Code:

<center>
<table width="100%" border="0" cellpadding="0" cellspacing="0" class="tableborder">
<tr><td width="100%" valign="top">
<div class='thead' align='left' style="padding: 5px;"><b>Title</b></div>
<table width="100%" border="0" cellpadding="0" cellspacing="1">
<!--- Left Section -->
<tr><td class="trow1" width="33%" valign="top"><font color="black"><center><b>Title</b></center></font></center>
 <hr color="#000000"><font face="verdana" color="000000"></center><u></u><font color="black">
     <div style="overflow:auto; width: 310px; height: 276px;"> 
Data Data Data Data....
<br>
      </div> 
      </td>       
<br>
</font></a>
<br>

<!-- Center Section -->
</center></td>
<td class="trow1" width="33%" valign="top"><center>
<font color="black"><b>Title</b></font></center>
<hr color="#000000"><font face="verdana" color="000000"></center><center><u></u><font color="black">
<br>
Data Data Data.....<br></br>

<!-- Right Section -->
</center></div></td>
</i></b></font></a>
</center></td>
<td class="trow2" width="33%" valign="top"><center>
<font color="black"><b>Title</b></font></font></center>
<hr color="#000000">
<center>
<br>
Data Data Data.....
</td></div></table></td></tr>
</center> </center
</table>

Here's a screenshot of the issue on the website:

I got a problem with the list I pasted below. I would like to get rid of the space between the last </dd> and the opening of the <ol> tag. Is their any other way I can do this so I don't have the space between the 2 elements?




<dl>

<dt>CHAPTER 1:Why HTML Rocks!</dt>

<dd>Coding isn't for pussies</dd>

<dd>What do you need to know</dd>

<dd>Common Mistakes</dd>

<ol>

<li>Eat</li>

<li>Sleep</li>

<li>Huh?</li>

</ol>

</dl>

Thanks

Here's what I have...

http://img378.imageshack.us/img378/502/currentmw7.jpg


...and here's what I'm trying to get...

http://img388.imageshack.us/img388/3810/wantedvp6.jpg


Basically, just rid of the white space above "Looking Out For You". Here's the coding for the page in a text file...

http://www.megaupload.com/?d=JG3ELL2T


If anyone can help me with coding or anything (most likely a table I have to fix), that would amazing and greatly appreciated! Thank You!

Hi,

Please can someone have a look at the photo's page on my site here http://www.leeds-cityscape.co.uk/. The page is made up of a frame, so that I can have an advert at the top of the page that scrolls down as the visitor scrolls down. The problem is that when you go to the page there is a large gap at the top of the page. I have checked the code, but I cannot see what could be causing this. Any help would be appreciated.

<table>
<tr>
<td>Flag Name </td>
<td><input style="background-color:010280; color:white" type="button" name="edit" value="Add" onclick="javascript:addContent(this.parentNode.parentNode.rowIndex,'Flag Name');"></td>
<td><input style="background-color:010280; color:white" type="button" name="edit" value="Edit" onclick="javascript:editContent(this.parentNode.parentNode.rowIndex,'Flag Name');"></td>
</tr>
</table>
<script>
function editContent(tableRow, flag_data) {
alert(flag_data);
}
</script>
It is working properly. But when i add new row with textbox value with the following data "Sample Sample". The alert box is not working... but for the data "SampleSample" it is working properly.... Please help me to solve the issue...

I got this little problem, if you view the below page on IE it shows fine, but on FF it shows a space after the flash.

http://www.test.muslimways.com

Any advice?

Hi on one of my websites there is just to much dead space at bottom of page and it makes people have to scroll down to see the whole page . how do i get rid of that blank space at bottom? i have tried just deleting but it doesnt want to delete it . i think there is a code error or two , im gonna try to post the html code of site here ..

Thanks for help in advance .

CODE:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<HTML
xmlns="http://www.w3.org/1999/xhtml"><HEAD><TITLE>Exclusive - Template</TITLE>
<META http-equiv=Content-Type content="text/html; charset=utf-8">
<STYLE type=text/css>#mainWrapper {
MARGIN-TOP: 0px; FONT-SIZE: 12px; MARGIN-LEFT: auto; WIDTH: 732px; COLOR: #333333; MARGIN-RIGHT: auto; FONT-FAMILY: Arial, Helvetica, sans-serif
}
BODY {
MARGIN-TOP: 0px; BACKGROUND-IMAGE: url(repeater-orange.jpg); BACKGROUND-REPEAT: repeat-x
}
#video-area {
BACKGROUND-IMAGE: url(../ExclusiveTemplate/HTML/images/video-area-bg.jpg); BACKGROUND-REPEAT: no-repeat; HEIGHT: 385px
}
#footer {
BORDER-TOP: #cccccc 1px dotted; MARGIN-TOP: 20px; PADDING-BOTTOM: 10px; PADDING-TOP: 10px
}
.style1 {
FONT-WEIGHT: bold; FONT-SIZE: 10px; COLOR: #666666
}
</STYLE>

<META content="Created with Trellian WebPage" name=description>
<META content="MSHTML 6.00.2900.6036" name=GENERATOR></HEAD>
<BODY>
<DIV align=center>
<TABLE
style="Z-INDEX: 101; LEFT: 331px; WIDTH: 589px; POSITION: absolute; TOP: 103px; HEIGHT: 351px"
height=351 cellSpacing=0 cellPadding=0 width=589 border=0>
<TBODY>
<TR>
<TD><IMG style="WIDTH: 596px; HEIGHT: 334px" height=300 alt="" hspace=0
src="7fa10df874.jpg" width=600 border=0></TD></TR></TBODY></TABLE>
<DIV id=mainWrapper style="WIDTH: 733px; HEIGHT: 1101px">
<DIV id=header align=left><IMG style="WIDTH: 732px; HEIGHT: 87px" height=84
alt="" hspace=0 src="header-orange.jpg" width=732 border=0> </DIV>
<DIV align=center><IMG height=385 alt="" hspace=0 src="video-area-bg.jpg"
width=732 border=0></DIV>
<P align=center><FONT face=Default size=2><FONT face=Impact><FONT size=4><FONT
face="Gill Sans MT" color=#ff0000><STRONG>Discover The
Secret&nbsp;$35K/Month&nbsp;System&nbsp;That <U>WILL</U> Separate You From The
Pack!</STRONG></FONT>&nbsp;<BR></FONT></FONT><FONT size=3><FONT
face="Tw Cen MT"><FONT face="Lucida Sans Unicode" color=#000000 size=2>You Will
Be Getting Instant&nbsp;Access To The Full 1on1&nbsp;Training Course That
<BR>Others Have Paid Upto $1,997&nbsp;To Use&nbsp;For <U>FREE</U>! This Wont
Last Long, Sign Up Today...</FONT></FONT></FONT><BR></FONT><IMG
style="Z-INDEX: 102; LEFT: 374px; POSITION: absolute; TOP: 721px" height=111
alt="" hspace=0 src="arrow-hand.JPG" width=128 border=0>
<SCRIPT src="http://www.jotform.com/min/g=jotform&amp;3.1.9"
type=text/javascript></SCRIPT>

<SCRIPT type=text/javascript>
JotForm.init(function(){
$('input_7').hint('ex: myname@example.com');
});
</SCRIPT>
<LINK href="http://www.jotform.com/css/styles/form.css?v3.1.9" type=text/css
rel=stylesheet><LINK href="http://www.jotform.com/css/styles/jottheme.css"
type=text/css rel=stylesheet><LINK
href="http://www.jotform.com/css/calendarview.css?v3.1.9" type=text/css
rel=stylesheet>
<STYLE type=text/css>.form-label {
WIDTH: 50px! important
}
.form-label-left {
WIDTH: 50px! important
}
.form-line {
PADDING-RIGHT: 10px; PADDING-LEFT: 10px; PADDING-BOTTOM: 10px; PADDING-TOP: 10px
}
.form-label-right {
WIDTH: 50px! important
}
.form-all {
FONT-SIZE: 12px; BACKGROUND: #ffffff; WIDTH: 250px; COLOR: #000000! important; FONT-FAMILY: "Trebuchet MS"
}
</STYLE>

<FORM class=jotform-form id=3155437226 name=form_3155437226 accept-charset=utf-8
action=http://www.jotform.com/submit.php method=post><INPUT type=hidden
value=3155437226 name=formID> </P>
<DIV class=form-all>
<DIV align=center>
<UL class=form-section>
<DIV align=left>
<LI class=form-line id=id_9><LABEL class=form-label-right id=label_9
for=input_9>First Name<SPAN class=form-required>*</SPAN> </LABEL>
<DIV class=form-input id=cid_9><INPUT class="form-textbox validate[required]"
id=input_9 size=30 name=q9_firstName9> </DIV></LI></DIV>
<LI class=form-line id=id_7><LABEL class=form-label-right id=label_7
for=input_7>E-mail<SPAN class=form-required>*</SPAN> </LABEL>
<DIV class=form-input id=cid_7><INPUT
class="form-textbox validate[required, Email]" id=input_7 size=30
name=q7_email7> </DIV></LI>
<LI class=form-line id=id_8><LABEL class=form-label-right id=label_8
for=input_8>Phone Number<SPAN class=form-required>*</SPAN> </LABEL>
<DIV class=form-input id=cid_8><SPAN class=form-sub-label-container><INPUT
class="form-textbox validate[required]" id=input_8_area size=3
name=q8_phoneNumber[area]> - <LABEL class=form-sub-label id=sublabel_area
for=input_8_area>Area Code </LABEL></SPAN><SPAN
class=form-sub-label-container><INPUT class="form-textbox validate[required]"
id=input_8_phone size=8 name=q8_phoneNumber[phone]> <LABEL
class=form-sub-label id=sublabel_phone for=input_8_phone>Phone Number
</LABEL></SPAN></DIV>
<DIV align=left></DIV></LI>
<LI class=form-line-column id=id_2 style="WIDTH: 272px; HEIGHT: 168px">
<DIV class=form-input-wide id=cid_2 align=center>
<P class=form-buttons-wrapper style="TEXT-ALIGN: center" align=center><INPUT
style="WIDTH: 268px; HEIGHT: 69px" type=image height=69 alt=Submit width=280
src="get-instant-access.jpg" size=19 border=0></P>
<DIV class=form-buttons-wrapper style="TEXT-ALIGN: center"><STRONG><FONT
size=1>Primary Goal: Create The Next 20 "Internet Big Shots" This Year! (Your
Background, Experience, Online Skills, Looks, Doesnt
Matter...)</FONT></STRONG></DIV></DIV></LI></UL></DIV>
<LI style="DISPLAY: none">Should be Empty: <INPUT name=website>
<UL></UL></LI></DIV></DIV><INPUT id=simple_spc type=hidden value=3155437226
name=simple_spc>
<SCRIPT type=text/javascript>
document.getElementById("si" + "mple" + "_spc").value = "3155437226-3155437226";
</SCRIPT>
</FORM><A href="index-orange.html#"></A><IMG
style="Z-INDEX: 103; LEFT: 775px; POSITION: absolute; TOP: 722px" height=111
alt="" hspace=0 src="arrow-hand1.JPG" width=128 border=0>
<TABLE style="Z-INDEX: 104; LEFT: 381px; POSITION: absolute; TOP: 902px"
height=16 cellSpacing=0 cellPadding=0 width=506 border=0>
<TBODY>
<TR>
<TD>
<P class="style21 style1" align=center>Michael´s Millionaire
Mentoring&nbsp;- Home -&nbsp;Privacy - Disclaimer - All Rights
Reserved&nbsp; 2010</P></TD></TR></TBODY></TABLE></DIV>
<DIV></DIV></BODY></HTML>



Thanks again for help if you can.. Michael