Improve company productivity with a Business Account.Sign Up

x
?
Solved

HTML, Image Tag placing

Posted on 2009-04-06
15
Medium Priority
?
226 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
What Kind of Coding Program is Right for You?

There are many ways to learn to code these days. From coding bootcamps like Flatiron School to online courses to totally free beginner resources. The best way to learn to code depends on many factors, but the most important one is you. See what course is best for you.

 
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 2000 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

Easily Design & Build Your Next Website

Squarespace’s all-in-one platform gives you everything you need to express yourself creatively online, whether it is with a domain, website, or online store. Get started with your free trial today, and when ready, take 10% off your first purchase with offer code 'EXPERTS'.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).
This video shows how to quickly and easily deploy an email signature for all users in Office 365 and prevent it from being added to replies and forwards. (the resulting signature is applied on the server level in Exchange Online) The email signat…

589 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