Solved

HTML, Image Tag placing

Posted on 2009-04-06
15
214 Views
Last Modified: 2012-05-06
Hi

Why does the following happen:
<table cellpadding=0 cellspacing=0>
    <tr>
         <td>
                 <img src="xyz.gif">
          </td>
    </tr>
    <tr>
         <td>
                 <img src="xyz.gif">
          </td>
    </tr>
</table>

The above leave a space between the images, but the below does not:
<table cellpadding=0 cellspacing=0>
    <tr>
         <td><img src="xyz.gif"></td>
    </tr>
    <tr>
         <td><img src="xyz.gif"></td>
    </tr>
</table>

?
0
Comment
Question by:skrombeen
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 9
  • 5
15 Comments
 
LVL 14

Expert Comment

by:theras2000
ID: 24076690
That is odd.  I didn't realise that would happen either.
With a little testing, I can see that it is because your first </td> is on a new line.  In fact, even if there is just one space between the <img> and the </td> it seems to do this.  The Opening <td> seems to make difference.  I'm using IE7 BTW.
0
 
LVL 1

Author Comment

by:skrombeen
ID: 24076727
thanks for that prompt response...yip, im also on ie7...i've noticed on FireFox it doesn't have that problem...
0
 
LVL 16

Expert Comment

by:rbudj
ID: 24078651
I am getting the same result with ff3 and ie7.  Do you have a doc type in your page?
0
Why Off-Site Backups Are The Only Way To Go

You are probably backing up your data—but how and where? Ransomware is on the rise and there are variants that specifically target backups. Read on to discover why off-site is the way to go.

 
LVL 16

Expert Comment

by:rbudj
ID: 24078660
... by same result I mean there is no additional space.  Each table is identical.
0
 
LVL 1

Author Comment

by:skrombeen
ID: 24078949
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
0
 
LVL 16

Expert Comment

by:rbudj
ID: 24078983
can you post a screenshot of the spaces you see?
0
 
LVL 16

Expert Comment

by:rbudj
ID: 24079070
ok, i got it now.  What is happening is you have a space in the first table.  You have lots of spaces but html only allows one blank space.  All other spaces have to use the &nbsp; This is the same concept as a space between your text.  You can type text separated by a space without using the &nbsp;

So... in the second table, you have removed the one allowed space.

0
 
LVL 16

Accepted Solution

by:
rbudj earned 500 total points
ID: 24079099
notice the code below.  Your browser is seeing a space at the end of your image just before the closing </td>  The code below is the same as above
<table cellpadding=0 cellspacing=0>
    <tr>
    <td><img src="xyz.gif"> </td>
    </tr>
    <tr>
    <td><img src="xyz.gif"> </td>
    </tr>
</table>

Open in new window

0
 
LVL 1

Author Comment

by:skrombeen
ID: 24079215
Here is the image
Spaces.jpg
0
 
LVL 1

Author Comment

by:skrombeen
ID: 24079250
Hi rbudj,

If i type the code all in 1 line, then on visual studio i select format code...and it shifts it around to make the indents follow, etc... at that point the additional spaces come in?

thanks
Shaun
0
 
LVL 16

Expert Comment

by:rbudj
ID: 24079284
apparently so.  Not all WYSIWYG's are perfect.  This space is coming from somewhere and must be coming from VS.
0
 
LVL 16

Expert Comment

by:rbudj
ID: 24079330
if you place your cursor at the end of the first <img src="xyz.gif"> and press delete until the </td> is right next to the <img src="xyz.gif"> such as <img src="xyz.gif"></td> you will see the extra space disappears.  This is most certainly a flaw in VS.  Apparently, it thinks you want a space after each element.
0
 
LVL 16

Expert Comment

by:rbudj
ID: 24079335
btw, you may be able to prevent this extra space by defining or undefining it somewhere in your preferences.  
0
 
LVL 1

Author Comment

by:skrombeen
ID: 24079399
thanks, any idea on the setting?
0
 
LVL 16

Expert Comment

by:rbudj
ID: 24079720
im not sure as I use Dreamweaver for my designs but it should be close to Tools > Options >Text Editor > All Languages > General

Look for something about line spacing.  You will just have to try different related options and test them.
0

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…

707 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question