Solved

HTML, Image Tag placing

Posted on 2009-04-06
15
192 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
  • 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
Courses: Start Training Online With Pros, Today

Brush up on the basics or master the advanced techniques required to earn essential industry certifications, with Courses. Enroll in a course and start learning today. Training topics range from Android App Dev to the Xen Virtualization Platform.

 
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

Courses: Start Training Online With Pros, Today

Brush up on the basics or master the advanced techniques required to earn essential industry certifications, with Courses. Enroll in a course and start learning today. Training topics range from Android App Dev to the Xen Virtualization Platform.

Question has a verified solution.

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

Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

776 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