Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Chris Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Aigning pics in html table... 3

Status
Not open for further replies.
Isadore

Isadore

Technical User
Feb 3, 2002
2,167
US
I have admire for some time the use of images surrounding a dropbox, used here and there in tables, etc, especially in "framing" materials on a web page.

I now find myself in a position in which I need to build an image "frame" around a chart, and so I have taken the full images and "cut out" the various images as if making a puzzle, and then inserting these images into their respective <td> blocks within the table.

The imgages are of course cut to the exact "pixel" so that a "merged" image will result when two images are sitting next to each other in different <td> cells.

For some reason I cannot seem to get rid of what appears to be default spacing between the images. I set the cellpadding and cellspacing to zero, yet these spaces persist, and do not allow the images to tough edge to edge.

This is only problem I am facing with the project I am working on, the code was the easy part (ASP.NET - making it work). The difficult part seems to get these images into "position" so that a persistent and dependable "frame" appears with no gapping or general disorder when the web page is called.

I sure could use a tip or two on this effort. Many thanks in advance for you help.
 
Sort by date Sort by votes
Sorry about the typo in the Title, should be "Aligning Pis in an html grid". Thanks again!
 
Upvote 0 Downvote
How about
Code: 
<table style="border-collapse: collapse; border-width: 0;">

--Chessbot

"Violence is the last refuge of the incompetent." -- Asimov, Foundation
 
Upvote 0 Downvote
Thanks chessbot for the quick response. I'll tackle that angle and post back and let you know how it goes.
 
Upvote 0 Downvote
Chessbot, I just tried that and it seems the gaps are still persistent.

There are a few examples, but let me share with you the first problem (of about maybe 3 I have in this endeavor).

I have a table row serving as a header for the project, in which there are 6 jpegs in a row. Each of course has individual widths that total to the row's length. Changing the cell + 1 or 2 pixels doesn't seem to help. Putting in a restrictive <div> might work, but haven't tested that yet.

Here is what is happening in the first row. The first 5 jpegs align properly (with their persistent gaps), height looks good, but the 6th jpeg, which is 509 pixels long, appears below the others, as if it hasn't enough room to sit in the top row with the other images, and so defaults on the line below. However, if I allow the table cell to grow longer, the 6th image remains persistent and occupies the next line down. That behavior I though a bit strange.

Here's what I have in the first row:

Code: 
..
<td width="911" height="58" colspan="5">
  <img src="images2/t1.bmp" height="58" width="122">
  <img src="images2/t2.bmp" height="58" width="65">
  <img src="images2/t3.bmp" height="58" width="82">
  <img src="images2/t4.bmp" height="58" width="68">
  <img src="images2/t5.bmp" height="58" width="65">
  <img src="images2/t6.bmp" height="58" width="509">
</td>
..

If I put:

style="border-collapse: collapse; border-width: 0;"

in the <body> tag nothing notable happens, unforuntely (I would have thought this was correct, and in the end may still play a part).

When I put this style in the <td> block it had no effect.

I measured the "gap" between the images and it is 4 pixels.

Perhaps I could put a "table" inside this cell? or as I suggested, a restrictive <div>?? What do you think?

Right now I am using the bitmaps as I will convert them in Photoshop to jpegs at the last minute. I mention this because this behavior may? be related to image type? I suppose an internal table or other restrictive device might come into play.

Here's the deal Chessbot, as you know. This technique is very nice, very cutting edge stuff (in my case, I have this very nice looking grey border with trimmed edges, etc, makes the web page very very attractive -- but the nitemare scenario of course is that if the "packing" of images within the html table cannot be guaranteed (it must be as people are using this technique) then it may happen that someone opens up the web page and the table "relaxes" with gaps here and there, etc.. Have to be absolutely sure that this thing will pac the images next to each other without question in all cases.

Anyway, some background on what I'm trying to accomplish.
 
Upvote 0 Downvote
put it in the table tag
Code: 
table{
  border-collapse: collapse; border-width: 0;
}
 
Upvote 0 Downvote
mexico: thanks, my mistake, I did put it in the table tag (I think I said body tag, my err). Here's what I have as the table tag:

<table border="0" style="border-collapse: collapse; border-width: 0;" width="911" height="663" align="center">

The behavior of the first 6 images, which should all properly align, can be see here:


The final product, for which I will recieve a huge christmas bonus if I can accomplish it, appears as an image at:


Thanks, any more ideas? I think in the end this collapse tag will play a part. Where could these persistent 4 pixel gaps be coming from?
 
Upvote 0 Downvote
and finally, the entire html code scenario (fyi):

Code: 
<html>
<head>test</head>
<body>
<form id="form1" runat="server">
<table border="0" style="border-collapse: collapse; border-width: 0;" width="911" height="663" align="center">
<tr>
 <td width="911" height="58" colspan="5">
  <img src="images2/t1.bmp" height="58" width="122"> <img src="images2/t2.bmp" height="58" width="65">
  <img src="images2/t3.bmp" height="58" width="82">
  <img src="images2/t4.bmp" height="58" width="68">
  <img height="58" src="images2/t5.bmp" width="65">
  <img height="58" src="images2/t6.bmp" width="509">
</td>
</tr>
<tr>
<td width="5" height="577" rowspan="5" style="WIDTH: 5px">
 <img src="images2/l1.bmp" height="577" width="10">
</td>
<td width="556" height="577" rowspan="5" style="WIDTH: 556px">
<img src="images2/map1.jpg" height="576" width="712">
</td>
<td width="189" height="36" colspan="3">
<img src="images2/r1.bmp" height="36" width="189">
</td>
</tr>
<tr>
<td width="189" height="20" colspan="3">
<img src="images2/r2l.bmp" height="20" width="18">
<asp:DropdownList id="ddLink" runat="server" width="154px" height="20px" />
<img src="images2/r2r.bmp" height="20" width="18">
</td>
</tr>
<tr>
<td width="189" height="86" colspan="3">
<img src="images2/r3.bmp" height="86" width="189">
</td>
</tr>
<tr>
<td width="10" height="378">
<img src="images2/r4l.bmp" height="378" width="11">
</td>
<td width="55" height="378" style="WIDTH: 55px">
<img src="images2/sp1.jpg" height="378" width="165">
</td>
<td width="10" height="378">
<img src="images2/r4r.bmp" height="378" width="11">
</td>
</tr>
<tr>
<td width="189" height="54" colspan="3">
<img src="images2/r5.bmp">
</td>
</tr>
<tr>
<td width="910" height="28" colspan="5">
<img src="images2/b1.bmp" height="28" width="910">
</td>
</tr>
</table>
</form>
</body>
</html>
 
Upvote 0 Downvote
I just notice the code I pasted up (came out of Visual Studio) -- put in its own style commands; I have taken out all of the duplicate statements so height and width are given only once. The code (cleaned up) is given below (just an html table, but the one I am using right now).

This copy should be perfect (sorry for the double post, but I do most of my programming in NotePad and whenever I come out of an SDE there's typically extraneous statements put in here and there.

Code: 
<table style="border-collapse: collapse; border-width: 0;" width="951" height="663" align="center">
<tr>
<td width="911" height="58" colspan="5">                                      
<img src="images/t1.bmp" height="58" width="122">
<img src="images/t2.bmp" height="58" width="65">
<img src="images/t3.bmp" height="58" width="82">
<img src="images/t4.bmp" height="58" width="68">
<img src="images/t5.bmp" height="58" width="65">
<img src="images/t6.bmp" height="58"width="509">                                    </td>
</tr>
<tr>
<td width="10" height="577" rowspan="5">
<img src="images/l1.bmp" height="577" width="10">
</td>
<td width="556" height="577" rowspan="5">
<img src="images/map1.jpg" height="576" width="712">
</td>
<td width="189" height="36" colspan="3">
<img src="images/r1.bmp" height="36" width="189">
</td>
</tr>
<tr>
<td width="189" height="20" colspan="3">
<img src="images/r2l.bmp" height="20" width="18">
<asp:DropdownList id="ddLink" runat="server" width="154px" height="20px" />
<img src="images/r2r.bmp" height="20" width="18">
</td>
</tr>
<tr>
<td width="189" height="86" colspan="3">
<img src="images/r3.bmp" height="86" width="189">
</td>
</tr>
<tr>
<td width="10" height="378">
<img src="images/r4l.bmp" height="378" width="11">
</td>
<td width="55" height="378" style="WIDTH: 55px">
<img src="images/sp1.jpg" height="378" width="165">
</td>
<td width="10" height="378">
<img src="images/r4r.bmp" height="378" width="11">
</td>
</tr>
<tr>
<td width="189" height="54" colspan="3">
<img src="images/r5.bmp">
</td>
</tr>
<tr>
<td width="910" height="28" colspan="5">
<img src="images/b1.bmp" height="28" width="910">
</td>
</tr>
</table>

This is an exactly duplicate of what I am working with, without the added statements by the VS SDE.

I'll post back solutions as they are figured out - it may be my original 911 pixels is too long to start with? Perhaps something more along the lines of 800 or so.

Thanks for your imput.
 
Upvote 0 Downvote
one final note; just kidding about the Xmas bonus -- but sure would be nice to handle this type of problem with the confidence that the image will always appear "seemless" when the web page is called.
 
Upvote 0 Downvote
remove all the linebreaks (whitespace) between the group of <img src=...> lines so that they are all one line of code, and between the closing bracket of the <td> and the opening <img>, same at the closing tag
so it will be
<td ...><img ...></td>

the cause is probably IE rendering the whitespace.

and 911px should be fine if you are designing for a min resolution of 1024px (1024 x 768). 780px is about the max width if you are aiming for resolution 800px (800 x 600)



Chris.

Indifference will be the downfall of mankind, but who cares?
A website that proves the cobblers kids adage.
Nightclub counting systems

So long, and thanks for all the fish.
 
Upvote 0 Downvote
Christ - thanks a million. I'll post the final html table that behaves. The whitespace may be just the ticket here. Again thanks all, I'll repost later this weekend.

Happy holidays!
 
Upvote 0 Downvote
This looks like a white-space problem. You try to make your code look nice and you put every image in its own line and so forth, but browsers (namely IE) interpret that as extra space character between the pictures. Try putting all the imgs as well as <td></td> in one continuous line and try with that.
 
Upvote 0 Downvote
Hey, if this works I owe you guys a cheesburger.
 
Upvote 0 Downvote
Making much progress, thanks all.

One final problem though. After (1) removing all white space between <td> tags, as well as (2) including in the table tag the defaulted table collapse, there remains one final mystery it seems.

The case of "horizontal" spacing (looks like white spacing).

Anyway, the current state of affairs is:


Note: The dropdown has been removed, the remaining issue are the residual "horizontal white spacing" that appears to be going on. I've played with the image height, but will look at a few other odds and ends.
 
Upvote 0 Downvote
that will now be whitespace between the </tr><tr> tags.


Make sure you are using a valid doctype as well to put IE into standards mode.



Chris.

Indifference will be the downfall of mankind, but who cares?
A website that proves the cobblers kids adage.
Nightclub counting systems

So long, and thanks for all the fish.
 
Upvote 0 Downvote
Actually, I think that would be default cellspacing and cellpadding since you did not specify it for your table. Try adding cellpadding="0" cellspacing="0" and border="0" to your table. They are all xhtml 1.0 strict compliant and unfortunately, cellspacing does not have a proper css setting (border-spacing will be someday, but it is not widely supported today). Another option is to go with a css: add padding: 0; to your <td>s and border: none; to table and <td>s. Cellspacing you might want to keep. White-space shouldn't exist between <tr> tags because text should not exist between <tr> tags.
 
Upvote 0 Downvote
Vragabond, exactly. And that is what cleared up the final horizonatal spacing by including the statement setting cellspacing to zero.

You guys were a great help. And since the final product, which is now fast taking form, is headed for Latin America to be used in monitoring water quality, I think you both deserve a 'token' star from our friends south of the border.
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

soni21
  • Locked
  • Question
JavaScript String to Number Conversion in HTML: Seeking Clarification
Replies
4
Views
1K
Chris Miller
Chris Miller
lmcate
  • Locked
  • Question
From HTML Page open an MDB files on the server and work
Replies
0
Views
204
lmcate
lmcate
jizzer
  • Locked
  • Question
HTML/CSS Image map with multiple tool-tips
Replies
3
Views
1K
spamjim
spamjim
cae154
  • Locked
  • Question
Body of email not appearing in correct font on iPhone and iPad
Replies
1
Views
773
spamjim
spamjim
PeDa
  • Locked
  • Question
Display table td's as block element on mobile phone 1
Replies
3
Views
895
spamjim
spamjim

Part and Inventory Search

Sponsor

Back
Top