image alignment-- extra white space

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
m3rajk
DevNet Resident
Posts: 1191
Joined: Mon Jun 02, 2003 3:37 pm

image alignment-- extra white space

Post by m3rajk »

i need some help removing extra white space.

right now the profiles have data that's held in place by a table (iframes used to call another page for some of the data)

it's adding extra white space around the pictures for some reason. i haven't been able to figure it out. i use css to remove cell padding and spacing. i am testing on mozilla 1.5.1 now, but in both 1.5.1 and 1.3.1 the space would come and go, and in ie 6.0 it's always there.

you can see it here: http://24.91.157.113/findyourdesire/profile.php?un=neo

if anyone has any ideas why, i'd appreciate hearing them. and since i am new to css, if you feel i shouldn't be using a table nested there to hold the pictures, then i'd be interested in chatting on aim or icq to go over switching to css with you.

-Josh
microthick
Forum Regular
Posts: 543
Joined: Wed Sep 24, 2003 2:15 pm
Location: Vancouver, BC

Post by microthick »

Remove all line breaks, spaces, and tabs between <table> and <tr> and <td> and </td> and </tr> and </table> and the white space will be gone.
User avatar
igoy
Forum Contributor
Posts: 203
Joined: Fri May 02, 2003 11:57 pm
Location: India
Contact:

Post by igoy »

correct....

it should somewhat look like this

Code: Select all

<table>
<tr>
<td><img src="boo.gif"></td>
<tr>
</table>
User avatar
Derfel Cadarn
Forum Contributor
Posts: 193
Joined: Thu Jul 17, 2003 12:02 pm
Location: Berlin, Germany

Post by Derfel Cadarn »

I've been struggling with a similar problem. The testsite at http://www.birgitgolms.com/20031222/index.html shows up correct in Mozilla 1.4, Opera 6.0 and even in Konqueror. But Netscape 6.2.2 places a whitespace between the table-cells.
I've tried the solution you've mentioned above (on my own PC, not yet online), but the result is still the same.

Any ideas?? Please???
microthick
Forum Regular
Posts: 543
Joined: Wed Sep 24, 2003 2:15 pm
Location: Vancouver, BC

Post by microthick »

I remember having problems with NS6.2 on the last large site I developed. Basically, my menu was contained within a three column table. The first and third columns were images and the middle column was text with a background image. NS6.2 had severe problems removing white space. But by removing the DOCTYPE from the top of the page, the problems were fixed. Of course, this is a bad way of fixing the problem, so I blamed it on the browser itself. Netscape 7 didn't have this same problem.
m3rajk
DevNet Resident
Posts: 1191
Joined: Mon Jun 02, 2003 3:37 pm

Post by m3rajk »

ok. i had no white space in the cells. but that wasn't working. i removed it from the rows and it looked different.. then i removed whitespace from the entire image section so it's all one line.

now it displays right in ie but has white space in mozilla (1.5.1)
here's the new code below. any help is GREATLY appreciated. formerly i had a return carriage and "pretty printing" white space after each <tr> and </tr> and </td> but no other spaces.
relevant section of code (row in the outer table that has the images)

Code: Select all

<!-- table for pics and options -->
	  <td>
	    <table cellspacing="0" class="regw100">
	      <tr><td colspan="2" rowspan="2"><a name="#main" href="#main" onclick="window.open('pic.php?pic=main.neo.jpg&fn=full', 'pic', 'height=259,width=236');"><img alt="main pic" src="pic.php?pic=main.neo.jpg&fn=main" title="Neo's main picture" /></a></td><td><a name="#t1" href="#t1" onclick="window.open('pic.php?pic=t1.neo.jpg&fn=full', 'pic', 'height=392,width=470');"><img alt="thumb 1" src="pic.php?pic=t1.neo.jpg&fn=thumb" title="thumb 1" /></a></td></tr><tr><td><a name="#t2" href="#t2" onclick="window.open('pic.php?pic=t2.neo.jpg&fn=full', 'pic', 'height=320,width=372');"><img alt="thumb 2" src="pic.php?pic=t2.neo.jpg&fn=thumb" title="thumb 2" /></a></td></tr><tr><td><img alt="no picture to display" src="pic.php?pic=&fn=thumb" title="no picture to display" /></td><td><img alt="no picture to display" src="pic.php?pic=&fn=thumb" title="no picture to display" /></td><td><a name="#salute" href="#salute" onclick="window.open('pic.php?pic=slaute.neo.jpg&fn=full', 'pic', 'height=272,width=340');"><img alt="Neo's salute" src="pic.php?pic=salute.neo.jpg&fn=thumb" title="Neo's salute" /></a></td></tr>	      
	      <tr>

		<td colspan="3" class="profilegoodies">
		  <ol>
		    <li>View or Make <a name ="#comments"href="#comments" onclick="window.open('comments.php?un=Neo&uid=1', 'comments', 'height=250,width=500,scrollbars=yes');">Comments</a></li>
		    <li>View my <a name="#lust" href="#lust" onclick="window.open('desire.php?un=Neo&uid=1&fn=lust', 'lustlist', 'height=200,width=482,scrollbars=yes');">Lustation List</a></li>
		    <li>Add this member to your <a name="#desire" href="#desire" onclick="window.open('adddesire.php?fun=Neo&fuin=1', 'desire', 'height=196,width=288,scrollbars=yes');">Desires</a></li>
		    <li>View my <a href="blog.php?buid=1&mtd=Neo">Journal</a></li>

		    <li>Link Directly to this profile: http://www.FindYourDesire.com/findyourdesire/profile.php?un=Neo</li>
		  </ol>
		</td>
	      </tr>
	    </table>
	  </td>
	</tr>
Gen-ik
DevNet Resident
Posts: 1059
Joined: Mon Aug 12, 2002 7:08 pm
Location: London. UK.

Post by Gen-ik »

You're missing cellpadding from your <table> tag...

Code: Select all

<table cellpadding="0" cellspacing="0">
<tr>
<td><img src="image.gif" alt="" /></td>
</tr>
</table>
User avatar
Derfel Cadarn
Forum Contributor
Posts: 193
Joined: Thu Jul 17, 2003 12:02 pm
Location: Berlin, Germany

Post by Derfel Cadarn »

Well, I just tried removing the DOC-type: no effect in NS6.2.
I checked the TABLE-tag: it had both cellpadding="0" and cellspacing="0" in it...still a mess in NS 6.2

Just now I noticed a site, where they used:

Code: Select all

<frameset framespacing="0" border="false" frameborder="0" cols="155,*">
instead of the code I used:

Code: Select all

<frameset cols="245,*" FRAMEBORDER="0" BORDER="no" framespacing="0">
Can anyone tell me which one is the correct one? Not that it makes much difference, I tried both of them and it didn't make any difference in NS6.2..Haven't tried other browsers though.

Perhaps I should just let it be...
Could anyone tell me how it looks in NS7, please? Microthick, please? I don't have it installed (yet)...waiting for my new HD.
microthick
Forum Regular
Posts: 543
Joined: Wed Sep 24, 2003 2:15 pm
Location: Vancouver, BC

Post by microthick »

Derfel Cadarn wrote:Well, I just tried removing the DOC-type: no effect in NS6.2.
I checked the TABLE-tag: it had both cellpadding="0" and cellspacing="0" in it...still a mess in NS 6.2

Just now I noticed a site, where they used:

Code: Select all

<frameset framespacing="0" border="false" frameborder="0" cols="155,*">
instead of the code I used:

Code: Select all

<frameset cols="245,*" FRAMEBORDER="0" BORDER="no" framespacing="0">
Can anyone tell me which one is the correct one? Not that it makes much difference, I tried both of them and it didn't make any difference in NS6.2..Haven't tried other browsers though.

Perhaps I should just let it be...
Could anyone tell me how it looks in NS7, please? Microthick, please? I don't have it installed (yet)...waiting for my new HD.
Check your pm. We've hijacked this thread too much already.
m3rajk
DevNet Resident
Posts: 1191
Joined: Mon Jun 02, 2003 3:37 pm

Post by m3rajk »

micro: it's all realated so i don't think it's hi-jacking.

genik: i use css to remove cell spacing (i thought) but i guess it's not working in all browsers. i have "padding:0;" as part of all table classes, and if inheritence doesn't work, i still have a td{} in there and "padding:0;" is in that. since adding the padding didn't quite work i think it's an ie compensating for something, so i'm going to check something. i think it has to do with the classes used....and i'm right.. it's the classes and the fact for some reason the sizes of the pics aren't as large as i expected, or the cells are larger.

Derfel Cadarn: according tothe refrences i can find, yes/no is nescape 4 and under only. 1 and 0 is the w3c standard. and since XHTML is case sensitive and everything needs to be lowerrcase, if you haven't already, i suggest making your code lower case.
m3rajk
DevNet Resident
Posts: 1191
Joined: Mon Jun 02, 2003 3:37 pm

Post by m3rajk »

ok. i think i see the issue.. i just don'tknow why it's occuring. the issue deals with the image sizes.

the table is 750 pixels in width. the frame ont he side of the pictures isn 375 pixels in width. the small pictures are 125 by 125 and the large one is 250 by 250. this means the pictures should be a 375 by 375 block.

this occurs right in explorer but not in mozilla.

does anyone have any idea why?

i checked the inner table is to take up 100% of the width it has available, but the outer table is only 750 pixels in width and the cell to the left of the icell containing the inner table is 375 (375+375==750?)
microthick
Forum Regular
Posts: 543
Joined: Wed Sep 24, 2003 2:15 pm
Location: Vancouver, BC

Post by microthick »

Maybe it has to do with how the different browsers interpret the box model?

For most new browsers, width = inner width + padding + border.

Older browsers like IE5.5 have width = inner width.
m3rajk
DevNet Resident
Posts: 1191
Joined: Mon Jun 02, 2003 3:37 pm

Post by m3rajk »

border is set to non-existant in css, padding is set to nothing in both css and html.

even adding the size of the images to the table cells, the space is still there... on the bottom and side of the main pic and side of the 3rd and 4th thumb.
m3rajk
DevNet Resident
Posts: 1191
Joined: Mon Jun 02, 2003 3:37 pm

Post by m3rajk »

for those wondering: the issue was an unbroken string. i should look for a css way to stop that from happening
Post Reply