Placing IMG flush to each other

[Daniel Kaplan]

I was curious about something.

In the same table cell I can say this:

<A HREF="menu.pl" ><IMG SRC="menu.jpg" width="95" height="35"
border="0"></A>

<A HREF="help.pl" ><IMG SRC="help.jpg" width="95" height="35"
border="0"></A>

And the out will have the two images flush to each other (their sides are
flush).

But if I add a <br> in between the two, the two images are not flush (tops
and bottom).

Is there a way to make them flush top and bottom?

Oh, and my table does have borders and cellpadding set to 0.

Thanks ahead!

Daniel

[Jim Moe]

Daniel Kaplan wrote:

In the same table cell I can say this:

<A HREF="menu.pl" ><IMG SRC="menu.jpg" width="95" height="35"
border="0"></A>
<A HREF="help.pl" ><IMG SRC="help.jpg" width="95" height="35"
border="0"></A>

And the out will have the two images flush to each other (their sides are
flush).

But if I add a <br> in between the two, the two images are not flush (tops
and bottom).

Is there a way to make them flush top and bottom?

img { vertical-align:bottom; }

--
jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)

[Neredbojias]

To further the education of mankind, "Daniel Kaplan" <No****@NoSpam.com>
declaimed:

I was curious about something.

In the same table cell I can say this:

<A HREF="menu.pl" ><IMG SRC="menu.jpg" width="95" height="35"
border="0"></A>

<A HREF="help.pl" ><IMG SRC="help.jpg" width="95" height="35"
border="0"></A>

And the out will have the two images flush to each other (their sides
are flush).

But if I add a <br> in between the two, the two images are not flush
(tops and bottom).

Is there a way to make them flush top and bottom?

Of course they're not flush - you're adding the html equivalent of a
linefeed between them. Remove the <br>.

--
Neredbojias
Infinity can have limits.

[Neredbojias]

To further the education of mankind, "Daniel Kaplan" <No****@NoSpam.com>
declaimed:

I was curious about something.

In the same table cell I can say this:

<A HREF="menu.pl" ><IMG SRC="menu.jpg" width="95" height="35"
border="0"></A>

<A HREF="help.pl" ><IMG SRC="help.jpg" width="95" height="35"
border="0"></A>

And the out will have the two images flush to each other (their sides
are flush).

But if I add a <br> in between the two, the two images are not flush
(tops and bottom).

Is there a way to make them flush top and bottom?

Oh, and my table does have borders and cellpadding set to 0.

Oh, I assume you mean flush top-to-bottom. This is probably a white-space
issue. Google for "white-space images".

--
Neredbojias
Infinity can have limits.

[Daniel Kaplan]

"Neredbojias" <http://www.neredbojias.com/fliam.php?cat=alt.html> wrote in
message news:Xn**********************************@208.49.8 0.251...

Of course they're not flush - you're adding the html equivalent of a
linefeed between them. Remove the <br>.

right, i want one on TOP of the other...but flush on top

[Neredbojias]

To further the education of mankind, "Daniel Kaplan" <No****@NoSpam.com>
declaimed:

"Neredbojias" <http://www.neredbojias.com/fliam.php?cat=alt.html>
wrote in message
news:Xn**********************************@208.49.8 0.251...

Of course they're not flush - you're adding the html equivalent of a
linefeed between them. Remove the <br>.

right, i want one on TOP of the other...but flush on top

Yeah, I tried to cancel that mess. after re-reading your original post.
It's surely a white-space problem, although you could try placing each
image in a separate <div> instead of using <br>. Btw, why did you reply to
this and not the other message?

--
Neredbojias
Infinity can have limits.

[Jim Moe]

Neredbojias wrote:

Is there a way to make them flush top and bottom?

Of course they're not flush - you're adding the html equivalent of a
linefeed between them. Remove the <br>.

And that does not matter for margin or padding. <br> only adds a line
break, no spacing. <img> is an inline element that follows the rules for
text; it allows space below the image for descenders.
Extra space can show between images on the same line because of a
textual newline in the code. Newlines are treated as whitespace so a space
is inserted between the images. To prevent the space have all of the image
code all on one line of text.

--
jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)

[Daniel Kaplan]

"Neredbojias" <http://www.neredbojias.com/fliam.php?cat=alt.html> wrote in
message news:Xn**********************************@208.49.8 0.251...

Yeah, I tried to cancel that mess. after re-reading your original post.
It's surely a white-space problem, although you could try placing each
image in a separate <div> instead of using <br>.

img { vertical-align:bottom; } worked.
Btw, why did you reply to
this and not the other message?

My news server sucks, I got this one first, the other didn't appear for a
while later.

[Daniel Kaplan]

"Jim Moe" <jm***************@sohnen-moe.com> wrote in message
news:0Y******************************@giganews.com ...

Daniel Kaplan wrote:

img { vertical-align:bottom; }

thanks, this appears to do the trick, yet am confused as to why. The
googling I did came up with this:

"The vertical-align property in CSS has given gray hair to many a starting
css coder until they finally realized what this property is, and what it is
not." Which right about now is on the money ;-)

Thanks again

[Neredbojias]

To further the education of mankind, "Daniel Kaplan" <No****@NoSpam.com>
declaimed:

"Neredbojias" <http://www.neredbojias.com/fliam.php?cat=alt.html>
wrote in message
news:Xn**********************************@208.49.8 0.251...

Yeah, I tried to cancel that mess. after re-reading your original
post. It's surely a white-space problem, although you could try
placing each image in a separate <div> instead of using <br>.

img { vertical-align:bottom; } worked.

Yes, that surprised me and suggests you _didn't_ have a white-space
problem.

Btw, why did you reply to
this and not the other message?

My news server sucks, I got this one first, the other didn't appear
for a while later.

Hehe, I should've guessed. Same thing happens to me occasionally.

--
Neredbojias
Infinity can have limits.

[Neredbojias]

To further the education of mankind, Jim Moe
<jm***************@sohnen-moe.com> declaimed:

Neredbojias wrote:

Is there a way to make them flush top and bottom?

Of course they're not flush - you're adding the html equivalent of a
linefeed between them. Remove the <br>.

And that does not matter for margin or padding. <br> only adds a
line
break, no spacing. <img> is an inline element that follows the rules
for text; it allows space below the image for descenders.
Extra space can show between images on the same line because of a
textual newline in the code. Newlines are treated as whitespace so a
space is inserted between the images. To prevent the space have all of
the image code all on one line of text.

Yes, that is the problem with which I was more familiar. Never tried
"vertical-align:bottom" but I never experienced the OP's problem per se.
What I do do is set "line-height:0px;font-size:0;" en container to sort of
equalize vertical image spacing inter-browserwise.

--
Neredbojias
Infinity can have limits.

[dwight.stegall]

add a negative magin to the top of the bottom image.

<A HREF="menu.pl" ><IMG SRC="menu.jpg" width="95" height="35"
border="0"></A> <br>
<A HREF="help.pl" ><IMG SRC="help.jpg" width="95" height="35"
border="0" style-"margin-top:-1em;"></A>

adjust this to whatever size you need.
style-"margin-top:-1em;"

that is just one of several ways to accomplish that.

[Jim Moe]

Daniel Kaplan wrote:

img { vertical-align:bottom; }

thanks, this appears to do the trick, yet am confused as to why.

See my reply to Neredbojias.

--
jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)