HTML - Unwanted Spacing Between Images

Hello everyone. I have been given to task to create a signature template. I am pretty new to html. I am trying to remove the vertical spacing in between the website link/phone number and job title. I have sat here playing around with it for about an hour without much luck. What can I do?



---------------------------------
here is the code i am using
---------------------------------
<p>
<strong><font color="blue">_______________________________________________</font></strong>
</p>
<p style="MARGIN-RIGHT: 0px" dir="ltr">
<font color="gray" size="4" face="Arial Narrow"><font color="gray"><strong>Debra Scott</strong></font>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp ;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <strong><font size="2">Newmarket Chamber of Commerce</font></strong>
<br />
<font size="2"><strong><em>President &amp; Ceo&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;& nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp ; &nbsp;<font size="1">"Leading Businesses. Leading Communities"</font></em></strong></font><font size="4"> </font></font>
</p>
<font color="#808080" size="4" face="Arial Narrow"></font><font color="gray" size="4" face="Arial Narrow">
<font color="#000000" face="Times New Roman"></font><font color="#000000" face="Times New Roman"><a href="http://www.newmarketchamber.ca" target="_blank"><font color="gray" size="1" face="Arial Narrow"><strong><img class="floatLeft" style="WIDTH: 20px; HEIGHT: 19px" border="0" src="http://NewmarketONCOC.weblinkconnect.com/External/WCPages/WCWebContent/WebContentPage.aspx?ContentID=296" width="36" height="34" />Newmarket Chamber Website</strong></font></a><font size="3"><font color="gray" size="1" face="Arial Narrow"><strong>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <img class="floatLeft" style="WIDTH: 24px; HEIGHT: 19px" border="0" src="http://NewmarketONCOC.weblinkconnect.com/External/WCPages/WCWebContent/WebContentPage.aspx?ContentID=299" width="36" height="34" />905
898-5900 ex. 223</strong></font></font></font>
<br />
<font color="#d5d500" size="3" face="Times New Roman">_______________________________________________</font></font>
</p>

I'm sorry I can't provide a url because I'm not online yet, but here is my problem.

I am trying to post a series of images with text descriptions of each image, but I can't seem to align the images so they are spaced evenly. (Basically like tabs in between the photos)

I have tried the following things:

<img src="party23.jpg" width="150" height="150" hspace=50>Blowing out candles <img src="party24.jpg" width="150" height="150">The cake<br>

what I got was the pictures separated from the text - and the next picture's placement spaced from the end of the 1st picture's text, instead of from the first picture.

I have also tried this:

<img src="party23.jpg" width="150" height="150">Blowing out candles <center><img src="party24.jpg" width="150" height="150">The cake</center><br>

what I got was the first picture & text was fine but the 2nd was centered on a new line instead of to the right of the first picture.

Then I tried:

<img src="party23.jpg" width="150" height="150">Blowing out candles &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img src="party24.jpg" width="150" height="150">The cake<br>

I might be able to get this to work...but I would have to count the spaces from the end of each text until the space where the photo needs to go so I know how many &nbsp's to insert.. and since all the text captions are different, that would be really time-consuming since there are alot of photos.

Anyone able to help me find an easier way??

Any help greatly appreciated!!

I've tried and tried and can't figure this one out, probably VERY easy for others. I've got a table with images and I can't figure out how to remove the spacing betwen the table rows.

Here is a link

http://www.4wheelcustoms.com/new%20template/index.html

Notice both sides of the navagation images have horizontal spacing around them.

Any help is appreciated.

Hi, I am designing my first website by teaching myself HTML using google, etc, so I am very new to designing from scratch (without using Dreamweaver, etc). My webpage is not online yet, so I can't post a link - sorry!

First, I am using .png image files which look great in Google Chrome, but when I check my page in IE, the images look horrible - very pixelated. Why is that, and is there a way to fix them? My only thought would be to use a "smoothed out" image such as a .jpg, however that might make the problem even worse.

Second, I am using frames and in my main frame I'm using a table with text on the left column and an image on the right column. Again, in Google Chrome it looks great with the text at the very top of the frame/table, but in Firefox, there is tons of space at the top of the table which makes the text too "tall" for the window, and a scroll bar is necessary.

I hope I've explained this properly and would greatly appreciate your help - I have many more questions as well! Thanks so much,
Kristen

I'm quite new to HTML and have only just started using Div tags as oppose to large tables to produce websites, i only do this for fun and they don't go on the net. As for my problem, the div tag that contains the main content of the page has moved below the navigation bar and i want it to be sat to the right of it... Will you need the coding for the website?

It looks like this..

Header
Nav bar
Main content
Footer

I want it to be like..

Header
Nav bar | Main content
Footer

It had been like this, and i'm not sure why it changed.. Thanks in advance for any help. =]
~Josh.

Hi!
I've looked it over and over ant I can't seem to find the solution to this.
A huge space appears on my webpage without permission!
Here is the code
HTML Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<SCRIPT TYPE="text/javascript">

function popup(mylink, annonces)
{
if (! window.focus)return true;
var href;
if (typeof(mylink) == 'string')
   href=mylink;
else
   href=mylink.href;
window.open(href, annonces, 'width=600,height=600,scrollbars=yes');
return false;
}
//
</SCRIPT>

<TITLE>Duo: balalaika et piano -- Dmitri Nassyrov et Victoria Khramova</TITLE>
 <META HTTP-EQUIV="Content-Type" CONTENT="text/html; Charset=Windows-1251">
 <META NAME="GENERATOR" CONTENT="Microsoft FrontPage 5.0">
 <META NAME="Author" CONTENT="Dmitri Nassyrov">
 <META NAME="KeyWords" CONTENT="balalaika, Victoria, Khramova, Dmitri, Nassyrov, 

concerts, piano, duo, stringsandkeys, douce, soiree, histoire, du, balalaika">
 <META NAME="Description" CONTENT="Le duo du balala&iuml;ka et du piano: Dmitri 

Nassyrov et Victoria Khramova, ont un repertoire tres vari&eacute;: folklorique, 

classique, jazz, et autres... ">
<TITLE>Duo:balala&iuml;ka et piano - Dmitri Nassyrov et Victoria Khramova</TITLE>

<link rel="stylesheet" type="text/css" href="style.css" />
</HEAD>

<div id="container">
<BODY BGCOLOR="#000000" TEXT="#000000" LINK="#0000FF" VLINK="#7F007F" ALINK="#FF0000" 

BACKGROUND="../img/bcknd.jpg" bgproperties="fixed">

<script language="javascript">
var u=13200; 
var vsbl=0;
var l='';
</script>
<script type="text/javascript" language=Javascript 

src="http://h1.hitslog.com/counter.js"></script>
<script language="javascript">
document.write('<a href=http://hitslog.com/><img border=0 width=1 height=1 

src=http://h1.hitslog.com/hl.php?'+l+'></a>');
</script>
<noscript>
<a href="http://hitslog.com/"><img border=0 width=1 height=1 

src="http://h1.hitslog.com/hl.php?u=13200" alt="MySpace tracker"></a></noscript>


<TABLE id="main">
  <tR width=720 height=160>

    <td valign=top width=615 height=160><IMG width=615 height=160 alt="Duo: 

balala&iuml;ka et piano - Dmitri Nassyrov et Victoria&nbsp;Khramova" 

SRC="../site/IMG/HEADER2.gif">
     </td>
     <td>
                  <table valign=center width=105 height=75 cellpadding=0>
                    <tr class="lang">
                     <img alt="En Fran&ccedil;ais"  border=0 

src="../site/img/francaisclik.gif" >
                    </tr>                    
                    <tr class="lang">
                      <a href="../eng/index.html"><img alt="In English" 

onmouseover="this.src='../site/img/englishon.gif'" 

onmouseout="this.src='../site/img/english.gif'" 

onclick="this.src='../site/img/englishclik.gif'" border=0 

src="../site/img/english.gif"></a>
                    </tr>
		            <tr class="lang">
                      <a href="../rus/index.html"><img alt="По-Русски" 

onmouseover="this.src='../site/img/russianon.gif'" 

onmouseout="this.src='../site/img/russian.gif'" 

onclick="this.src='../site/img/russianclik.gif'" border=0 

src="../site/img/russian.gif"></a>
                    </tr>

                    <tr width=100 height=85>
                     
                        <img alt="Duo: balala&iuml;ka et piano - Dmitri Nassyrov et 

Victoria &nbsp;Khramova" src="../site/img/sideheader.gif">
                      
                    </tr>
                  </table>
     </td>

  </tR>



<!--The big space is here-->



  <TR>
    <td colspan=2> 
     <table width=720>
      <tr>
       <td valign=top>
        <TABLE valign=top>
        <TR>
          <TD class="menu"><A HREF="INDEX.HTML"><img src="../img/bienvenueclik.gif" 

alt="Bienvenue"  border="0"></a></TD>
        </TR>
        <TR>
          <TD class="menu"><A HREF="DUO.HTML"><img src="../img/leduo.gif" alt="Notre 

duo" onmouseover="this.src='../img/leduoon.gif'" 

onmouseout="this.src='../img/leduo.gif'" onclick="this.src='../img/leduoclik.gif'" 

border="0"></A></TD>
        </TR>
        <TR>
          <TD class="menu"><A HREF="concerts.HTML"><img src="../img/concerts.gif" 

alt="Nos concerts" onmouseover="this.src='../img/concertson.gif'" 

onmouseout="this.src='../img/concerts.gif'" 

onclick="this.src='../img/concertsclik.gif'" border="0"></A></TD>
        </TR>
        <TR>
          <TD class="menu"><A HREF="audio.HTML"><img src="../img/audio.gif" alt="Notre 

musique" onmouseover="this.src='../img/audioon.gif'" 

onmouseout="this.src='../img/audio.gif'" 

onclick="this.src='../img/audioclik.gif'"border="0"></A></TD>
        </TR>
        <TR>
          <TD class="menu"><A HREF="historique.HTML"><img src="../img/historique.gif" 

alt="L'Histoire du balala&iuml;ka" onmouseover="this.src='../img/historiqueon.gif'" 

onmouseout="this.src='../img/historique.gif'" 

onclick="this.src='../img/historiqueclik.gif'" border="0"></A></TD>
        </TR>
        <TR>
          <TD class="menu"><A HREF="liens.HTML"><img src="../img/liens.gif" alt="Liens" 

onmouseover="this.src='../img/lienson.gif'" onmouseout="this.src='../img/liens.gif'" 

onclick="this.src='../img/liensclik.gif'" border="0"></A></TD>
        </TR>
        <TR>
          <TD class="menu"><A HREF="contact.HTML"><img src="../img/contact.gif" 

alt="Comment nous rejoindre" onmouseover="this.src='../img/contacton.gif'" 

onmouseout="this.src='../img/contact.gif'" onclick="this.src='../img/contactclik.gif'" 

border="0"></A></TD>
        </TR>
      </TABLE>
    </tD>
    <TD VALIGN=top>
      <table id="text" height=100% width=500 cellpadding=20 style="BACKGROUND:          

                                url('../site/img/textbcknd.jpg'); "> 
        <tr>
          
          <!--<marquee id="test" onMouseOver="document.all.test.stop()" 

onMouseOut="document.all.test.start()" scrollamount="2" scrolldelay="20" width="100%" 

height="51"       behavior="scroll" direction="left"><font face="arial" 

align=middle><i>
<A HREF="annonces3.html"
   onClick="return popup(this, 'annonces',true)"><b>17 novembre - 20:00</b></A><br>
Festival "From Russia With Love"<br>
&agrave la biblioth&egraveque publique juive.
</i></font></marquee>-->

        </tr>
        
        <tr>
          <td valign=top>
<font face="times new roman" size=3>
          <h2>Un duo, c'est indivisible...</h2>
<p align=justify>Dans un duo, le r&ocirc;le de chaque musicien n'est pas seulement de 

compl&eacute;ter son partenaire, mais aussi de souligner la sonorit&eacute; de son 

instrument.</p>

          <p align=justify>Notre duo est assez particulier et assez unique &agrave; 

Montr&eacute;al. Les deux instruments composant notre duo sont: le piano et le 

balala&iuml;ka - instrument folklorique russe. Les possibilit&eacute;es de cette union 

sont surprenantes, dans le r&eacute;pertoi  folklore, classique, jazz...</p>

<hr width=95%></hr>

<p>Sur ce site, vous trouverez de l'information sur nos &nbsp;<A 

HREF="concerts.HTML">concerts</A>, vous pourrez &eacutecouter nos <A 

HREF="audio.HTML">enregistrements</A>, lire nos <A HREF="DUO.HTML">biographies</A>, et 

plus encore.</p>

<p>Et, bien s&ucirc;r, nous serons heureux de vous voir &agrave; nos concerts!</P>

<p><i>Dmitri Nassyrov et Victoria Khramova</i></p>

          </TD>
        </tr>
      </table>
    </td>
   </tr>
   </table>
   </td>
  </TR>
</TABLE> 
<font face="arial" size=1 

align=right>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nb

sp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nb

sp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nb

sp;&nbsp;Dmitri Nassyrov et Victoria Khramova &copy; Tous droits 

r&eacute;serv&eacute;s.</font>



</BODY>
</div>
</HTML>

I put "The big space is here" where the space occurs. The weird thing is that if I open the file in some html editing software (frontpage), it looks fine, but once I open it in IE, the space appears.

Here is the style.css file if it needs checking:
HTML Code:

body { 
text-align: center;
background-color: rgb(239,197,137); 
}

#container {
margin: 0 auto;
}

#main {
border:0px; /* border="0" */
border-collapse:collapse; /* cellspacing="0" */
}

#top {
border:0px; /* border="0" */
border-collapse:collapse; /* cellspacing="0" */
}

tr.lang {
horizontal-align:left;
width:100px;
height:25px;
}

td.menu {
width:220;
height:40;
}

table {
border-collapse:collapse;
}

#text {
padding:20px;
}

Any help is appreciated.
Thank you for your time!

This is my very first post on this forum, so please, be gentle with me.

I write my websites in HTML code but recently I seem to have created an anomaly that I cannot get to the bottom of.

If you pop over to this page: http://website.lineone.net/~barrybboor/tirol58.html you will see a very large space below the 'FULL RESULT' line and the start of the result table.

According to the coding I have, there shouldn't be any such space but I can see no reason for it and cannot find a way to reduce it.

Can anyone help a poor elderly novice, please?

Hey everyone,
I was wondering how I can get rid of a scrollbar that only shows up in IE, when I embedded another webpage inside a webpage. I specified size and the other webpage is only a few lines of text so it doesn't need to scroll to see everything. I don't have this problem in FF.

HTML Code:

<object data=siteupdates.html width="100%" height="212"> 
</object>

Thanks

I inserted a SWF inside a table and it should fit perfectly. However, the table streches a bit and makes the background repeat for a couple of pixels which totally screws the layout.

Here is my website: http://jlcq.uuuq.com/jl.html

I'm talking about the two horizontal lines on each side of the banner. It looks like the SWF has some kind of margin. How can i delete it so it fits perfectly?

If you have the time take a look at my code or download the site and find a way to modify the code so that it fits. Note that the problem also occurs if I insert an image in the same spot instead of a SWF.

Thanks!

I've been writing all of my HTML in notepad since I started, and Id really like to keep it that way, but the browser seems to treat line breaks (in notepad) between elements as a space character in certain instances.

For example, say I have

HTML Code:

<img1><img2>
<img3>
<img4>

in the browser, that will render every image on the same line, but with a physical white space between img2, img3, and img 4

example:
[1][2] [3] [4]

in the past ive just sucked it up and put everything on the same line, but in larger projects that gets messy very quickly...

any input that i'snt "use something better" is appreciated, thanks.

www.artdied.com
I've created this website using frames and am now getting lines appearing at the edges of the frames on the bottom and right side when the browser window is at certain sizes.
I have no idea clue what's causing it or how to get rid of it. Any ideas?
Much thanks!

Hi there, I'm a bit of a noob to HTML, and I'm working on creating a site for my webcomic.

The main portion of the layout has a simple table with a header and footer at the top and bottom rows. It's supposed to look like



Instead it looks like



The code for the table is this:
Quote:
<table align="center" cellpadding="0" cellspacing="0" border="0" width="725">
<tr>
<td width="725" valign="bottom" border="0">
<img src="/images/header.png" width="725" height="33" /></td>
</tr>
<tr>
<td width="725" bgcolor="0099CC" align="center">
<p>***todays_comics***<p>***first_day*** ***previous_day*** ***next_day*** ***last_day***
</td>
<tr>
<td width="725" valign="top" border="0">
<img src="/images/footer.png" width="725" height="33" /></td>
</tr>
</table>
Whenever I put the code into an HTML test bed, it works fine, but for some reason refuses to work when I upload it to my FTP. It's driving me crazy. If you could help, I'd really appreciate it. Thanks.

Hi guys,

I would like to block visitors from certain websites and if possible display a message that my website is no longer available.

Please help me with this. It's crucially important.

Thanks in advance

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;
}