Welcome to WebmasterWorld Guest from 54.166.102.61

Forum Moderators: incrediBILL

Tables and spaces

   
9:55 am on Aug 23, 2002 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



I have never come across this myself and I cant have a go now as I am at work.

When a table is written in Notepad for example and you have hit return after a <td> tag like:

<td>
<img src="logo.jpg">
</td>

Will that break in line after the <td> tag show up as white space around the image. I have heard some one calling it "White space in your code." Just all the books, tutorials, sites and forums that I have ever read, it has never mentioned anything like this at all.

Hope some one can clear this up for me!

:)

10:07 am on Aug 23, 2002 (gmt 0)

10+ Year Member



I don't believe it does - however any un-needed spaces in your code show up as extra bytes(and slow the loading) in your file size.
10:25 am on Aug 23, 2002 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



I thougt so to, wouldnt there have to be a &nbsp; to make a gap around the image?
10:29 am on Aug 23, 2002 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Would that be a frame-like gap around the whole image or just before the image?
10:35 am on Aug 23, 2002 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Well the way that I took it to mean is there would be a border like gap around the whole of the image if there were line breaks after the <img src="logo.jpg">.
10:41 am on Aug 23, 2002 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



The only way I can figure how this can happen has nothing really to do with the line break. The border would only come if you defined a cellspacing or cellpadding for your table.
10:57 am on Aug 23, 2002 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



<td>
<img src="logo.jpg">
</td>

I have read on a forum that the above would cause a gap around the image, but the code below wouldnt have the gaps, as there are no line breaks. Nothing to do with the cellpadding in the <table> tag.

<td><img src="logo.jpg"></td>

11:24 am on Aug 23, 2002 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Just tried it and it's true, there is a space under the image with this version:

<td>
<img src="logo.jpg">
</td>

Don't know where it comes from though.

11:32 am on Aug 23, 2002 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Is this maybe something to do with the browser and the way that it dislpay or interprets the code or is this in built into HTML to do this?

I just had ago myself and its only the closing tag </td> that has to be on the same line, not the opening one <td> as well.

Well I learn something new everyday... the adventure continues!

5:09 pm on Aug 23, 2002 (gmt 0)

10+ Year Member



See this thread I started for more information:

CSS & image gaps [webmasterworld.com]

5:18 pm on Aug 23, 2002 (gmt 0)

WebmasterWorld Senior Member pageoneresults is a WebmasterWorld Top Contributor of All Time 10+ Year Member



Anytime the </td> or </p> tags are not on the same line as the rest of the code, you'll get the gap. Haven't quite figured out why this happens but caught on to it years ago.
6:16 pm on Aug 23, 2002 (gmt 0)

WebmasterWorld Senior Member keyplyr is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month



In addition to what pageoneresults said, it is also poor syntax to "hit return" when writing any code. Not only does this habit add white space, but most editors (and thusly the browser) terminate the line. This can cause scripting errors and other problems, including those spaces around images.

Instead of hitting the return key, use your space bar.

7:50 pm on Aug 23, 2002 (gmt 0)

WebmasterWorld Senior Member g1smd is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month



Using a space still occupies 1 byte in the file, however this is preferable to the two characters used with a new line... on Windows systems this is a Carriage Return and a Line Feed character, two characters/bytes in total.

8:14 pm on Aug 23, 2002 (gmt 0)

10+ Year Member



Sometimes I prefer to put the closing td tag on a new line because it makes it easier for me to work on the HTML in NoteTab Pro. I work around this issue you all are discussing by putting a <br> at the end of the line above. It seems to work on all the browsers I've tested it on.

<td>
<img src="logo.jpg"><br>
</td>

5:48 pm on Aug 24, 2002 (gmt 0)

10+ Year Member



This is a known issue with Netscape browsers. It can be argued whether Netscape is at fault for rendering the white space where it shouldn't be, or Microsoft for not rendering the white space where it should be.

A similar thing happens with code like this:

<a href="index.html">
Home
</a>

Netscape browsers will make the space after the text part of the link. This is especially ugly with code like:

<a href="index.html">
<img src="home.gif" alt="Home" />
</a>

Here, you get the button with a little clickable _ next to it -- a blemish on your otherwise beautiful site.

8:52 am on Aug 26, 2002 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Thanx for all the info people :)
 

Featured Threads

Hot Threads This Week

Hot Threads This Month