HTML problem

Chris_Evans

Hi there,
I've written a little bit of html ready for the next php script I'm writing, it looks like the following:

<img src="images/topleft.gif" align="left"><img src="images/middlebackground.gif" width="100%" height="200"><img src="images/topright.gif" align="right">

I just wondered if there was anyway of removing the little gap in between the two images?

Chris

jllydgnt

Try setting the border attribute = 0 in each image.

Chris_Evans

Like this?

<img.. border="0">

If so, no luck. 🙁

Thanks,

Chris

jllydgnt

I think you need to take out the align attribute from each image. If I remember, that is used to control how stuff like text fits around the image, not where the image is layed out on a page. Use a table to control the placement of the image on the page.

Elizabeth

Well, I think the align attribute does affect where the image shows up on the page, but if it were me, I would also use a table to control the placement of the images to make them butt up against each other.

Does that help?

-Elizabeth

stolzyboy

hey Elizabeth

i'm pretty sure jllydgnt has his explanation a little better....

if you do align="center" in a <img> tag, it won't center it on the page, it tells whatever is by the img tag to do

so Elizabeth, you are somewhat correct, but simple

align="left"
align="right"
align="center"

in an <img> tag won't act the same as a <td> alignment

Elizabeth

Correct me if I'm wrong, but img align=center isn't a true function. You can do img align=middle if you want the text to show up at the middle of either side of the img, but img align=right or align=left really will align it on the page (or within a cell or whatever).
If you are concerned about aligning the image around the text, you can use the img align=texttop, etc.

Here's a little more about it.

-Elizabeth

Elizabeth

... regarding the original problem, wouldn't you want to do this:

<table border="0">
  <tr>
     <td><img src="leftmost image" align="right"></td>
     <td><img src="center image"></td>
     <td><img src="rightmost image" align="left"></td>
  </tr>
</table>

This should make the images appear to be continuous across the row.

-Elizabeth

stolzyboy

and if the td is wide enough so the images don't wrap

you can simple do

with no align's at all

two other att's you can use are vspace, and hspace, play around with those for spacing above and below the image (in pixels)

goldbug

Perhaps its something not visible in a one-line scope.

Just for fun, try putting an hspace="0" attribute into each of the image tags, see if that helps. (or style="padding: 0px; margin: 0px;")

Also, you've got a width="100%" in the middle image. Some browsers do not like stuff like that, and would always need horizontal scrolling (the image would be 100% of the available width -- say your window width is 500px, if you make the middle image 100%, and the left and right images are 10px, your page would technically be 520px wide).
A different (an my preferred) solution is to use only the left and right images, and in whatever div/table cell you put them in, make the middle image the background.. it will widen (not scale) accordingly.

P.S.:
Please for crissakes, put in the alt="" attribute and title="" if you want a tooltip, and dont forget to close the tag ( ... /> )

Chris_Evans

Hi there,
Thanks for all the info, I created the <td> tags but no luck, then I thought, cell padding/cell spacing = 0 should be in main table (lol - late night) - anyway by doing that it fixed the problem of the images being different sizes in terms of height.

Now I'm back to the main problem of images not joining against each other but I can't find find a way to fix this...

Anyway ideas?

Chris

stolzyboy

this works

<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td><img src="images/left_graphic.gif"></td><td><img src="images/middle_graphic.gif"></td><td><img src="images/right_graphic.gif"></td>
</tr>
</table>

Elizabeth

If you're using Netscape, and you have line breaks as I showed you, the gap will show up because in Netscape a space is added for a line break (or at least that's how it used to be). Did you try stolzy's way? Keeping them on the same line could get rid of the gap.

-Elizabeth

Chris_Evans

Hi there,
To give you an idea of what I've done, here's my current html instruction:

<body background="images/background.gif">
<table width="90%" align="center" cellpadding="0" cellspacing="0">
  <tr> 
    <td><img src="images/topleft.gif" align="left" border="0"></td>
    <td width="100%" align="center" background="images/middlebackground.gif"></td>
    <td><img src="images/topright.gif" align="right"></td>
  </tr>
</table>
</body>

Obviously with <html> etc tags.

The problem is this:

I need the following:

|||

But I get:

| | |

Thanks,

Chris

stolzyboy

keep the td's inline like

<td><img src="images/topleft.gif" align="left" border="0"></td><td width="100%" align="center" background="images/middlebackground.gif"></td><td><img src="images/topright.gif" align="right"></td>

Chris_Evans

No luck. 🙁

stolzyboy

is your site viewable online anywhere

stolzyboy

use this

<td><img src="images/topleft.gif"></td><td><img src="images/middlebackground.gif"></td><td><img src="images/topright.gif"></td>

and take the width out of the table tab too

Chris_Evans

Hmm.. not viewable yet since I haven't uploaded anything. I have got a current site but just started on this design so not much help on that one, sorry.

All the problem is is a minute :rolleyes: gap between two cells... that's the whole problem. I've removed cellpadding and cellspacing (both now = 0) and although there is a difference it's not quite enough. Just another millimetre or so.

I could give you a screenshot of the problem.

Included now. 😉

Forget the last image since I haven't created it yet. he he. 🙂

Chris

Chris_Evans

Hmm, forgot to include the image. :rolleyes: 😃

You can just about see the gap, there's sort of a line right through the middle. 😉