Solved

HTML, Image Tag placing

Posted on 2009-04-06
15
209 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
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
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

On Demand Webinar - Networking for the Cloud Era

This webinar discusses:
-Common barriers companies experience when moving to the cloud
-How SD-WAN changes the way we look at networks
-Best practices customers should employ moving forward with cloud migration
-What happens behind the scenes of SteelConnect’s one-click button

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Timer on div 5 34
HTML question 2 33
A responsive image gallery using flexbox 6 75
Table header must be on top 2 57
When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
This article discusses how to create an extensible mechanism for linked drop downs.
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

739 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