Row Height

  • Thread starter Thread starter dancer
  • Start date Start date
D

dancer

Using ASP.net 1.1

I have sliced an image in Photoshop, saved it as html code, pasted the code
into my asp.net file, then added onmouseover and onmouse out code.
All the slices line up horizontally perfectly. Some of the slices line up
vertically perfectly. But some have too much space between the rows. I can
change the row height to INCREASE the space, but cannot decrease the space.

Here is sample code.

Any ideas?? Can anybody find something I'm missing??

<TABLE WIDTH=120 BORDER=0 CELLPADDING=0 CELLSPACING=0>

<tr>

<td>

<IMG SRC="http://www.xxxx.com/images/menu/pictures_aspx/sidebar_Red_01.jpg"
WIDTH=120 HEIGHT=15 ALT="">

</td>

</tr>

<tr>

<td><A
onmouseover="document.about.src='http://www.xxxx.com/images/menu/pictures_aspx/sidebar_Green_02.jpg'"

onmouseout="document.about.src='http://www.xxxx.com/images/menu/pictures_aspx/sidebar_red_02.jpg'"

href="../about.htm">

<IMG
SRC="http://www.xxxxxx.com/images/menu/pictures_aspx/sidebar_Red_02.jpg"
name = about WIDTH=120 HEIGHT=46 border="0" ALT=""></TD></A>

</tr>

<tr>

<td>

<A
onmouseover="document.products.src='http://www.xxxxx.com/images/menu/pictures_aspx/sidebar_Green_03.jpg'"

onmouseout="document.products.src='http://www.xxxxx.com/images/menu/pictures_aspx/sidebar_Red_03.jpg'"

href="../products.htm">

<IMG
SRC="http://www.xxxxxx.com/images/menu/pictures_aspx/sidebar_Red_03.jpg"
WIDTH=120 HEIGHT=44 border="0" ALT="" name=products>

</td></tr>

<tr><td>

<A
onmouseover="document.distribution.src='http://www.xxxxxx.com/images/menu/pictures_aspx/sidebar_Green_04.jpg'"

onmouseout="document.distribution.src='http://www.xxxxxx.com/images/menu/pictures_aspx/sidebar_Red_04.jpg'"

href="../distribution.htm">

<IMG
SRC="http://www.xxxxxx.com/images/menu/pictures_aspx/sidebar_Red_04.jpg"
name = distribution WIDTH=120 HEIGHT=50 ALT="" border="0">

</td></tr>

<tr><td>

<A
onmouseover="document.testimonials.src='http://www.xxxxxx.com/images/menu/pictures_aspx/sidebar_Green_05.jpg'"

onmouseout="document.testimonials.src='http://www.xxxxxx.com/images/menu/pictures_aspx/sidebar_Red_05.jpg'"

href="../testimonials.htm">

<IMG
SRC="http://www.xxxxxx.com/images/menu/pictures_aspx/sidebar_Red_05.jpg"
WIDTH=120 HEIGHT=43 ALT="" name=testimonials border="0">

</td></tr>

<tr><td>

<A
onmouseover="document.news.src='http://www.xxxxxx.com/images/menu/pictures_aspx/sidebar_Green_06.jpg'"

onmouseout="document.news.src='http://www.xxxxxx.com/images/menu/pictures_aspx/sidebar_Red_06.jpg'"

href="../news.htm">

<IMG
SRC="http://www.xxxxxx.com/images/menu/pictures_aspx/sidebar_Red_06.jpg"
name = news WIDTH=120 HEIGHT=39 ALT=""border = "0">

</td></tr>

<tr><td>

<A
onmouseover="document.contact.src='http://www.xxxxxx.com/images/menu/pictures_aspx/sidebar_Green_07.jpg'"

onmouseout="document.contact.src='http://www.xxxxxx.com/images/menu/pictures_aspx/sidebar_Red_07.jpg'"

href="../contact.htm">



<IMG
SRC="http://www.xxxxxx.com/images/menu/pictures_aspx/sidebar_Red_07.jpg"
name= contact WIDTH=120 HEIGHT=45 ALT=""border="0">

</td></tr>

<tr><td>

<A
onmouseover="document.employment.src='http://www.xxxx.com/images/menu/pictures_aspx/sidebar_Green_08.jpg'"

onmouseout="document.employment.src='http://www.xxxxxx.com/images/menu/pictures_aspx/sidebar_red_08.jpg'"

href="../employment.htm">

<IMG SRC="http://www.xxxx.com/images/menu/pictures_aspx/sidebar_Red_08.jpg"
name = employment WIDTH=120 HEIGHT="42" ALT="" border="0"></TD>

</tr>

<tr><td>

<A
onmouseover="document.home.src='http://www.xxxxxx.com/images/menu/pictures_aspx/sidebar_Green_09.jpg'"

onmouseout="document.home.src='http://www.xxxxxx.com/images/menu/pictures_aspx/sidebar_red_09.jpg'"

href="../home.htm">



<IMG
SRC="http://www.xxxxxx.com/images/menu/pictures_aspx/sidebar_Red_09.jpg"
name = home WIDTH=120 HEIGHT=56 ALT="" border="0">

</td> </tr>

</TABLE>
 
Your images have differing height attributes within the same rows.

--
HTH,

Kevin Spencer
Microsoft MVP

Printing Components, Email Components,
FTP Client Classes, Enhanced Data Controls, much more.
DSI PrintManager, Miradyne Component Libraries:
http://www.miradyne.net
 
Any ideas?? Can anybody find something I'm missing??
Click to expand...
HEIGHT=15
HEIGHT=46
HEIGHT=44
HEIGHT=50
HEIGHT=43
HEIGHT=39
HEIGHT=45
HEIGHT="42"
HEIGHT=56
Click to expand...

The row height will default to the height of the tallest image - you can
make it larger than that, but not smaller...
 
Each image is in a *different* row. Does *every* row default to the largest
image height?

Thank you.
 
dancer said:
Using ASP.net 1.1

I have sliced an image in Photoshop, saved it as html code, pasted the code
into my asp.net file, then added onmouseover and onmouse out code.
All the slices line up horizontally perfectly. Some of the slices line up
vertically perfectly. But some have too much space between the rows. I can
change the row height to INCREASE the space, but cannot decrease the space.
Click to expand...

What doctype are you using?
Here is sample code.

Any ideas?? Can anybody find something I'm missing??
Click to expand...

I found eight errors in the code. See below.
<TABLE WIDTH=120 BORDER=0 CELLPADDING=0 CELLSPACING=0>

<tr>

<td>

<IMG SRC="http://www.xxxx.com/images/menu/pictures_aspx/sidebar_Red_01.jpg"
WIDTH=120 HEIGHT=15 ALT="">

</td>

</tr>

<tr>

<td><A
onmouseover="document.about.src='http://www.xxxx.com/images/menu/pictures_aspx/sidebar_Green_02.jpg'"

onmouseout="document.about.src='http://www.xxxx.com/images/menu/pictures_aspx/sidebar_red_02.jpg'"

href="../about.htm">

<IMG
SRC="http://www.xxxxxx.com/images/menu/pictures_aspx/sidebar_Red_02.jpg"
name = about WIDTH=120 HEIGHT=46 border="0" ALT=""></TD></A>
Click to expand...

You have placed the closing tag of the link outside the table cell.
</tr>

<tr>

<td>

<A
onmouseover="document.products.src='http://www.xxxxx.com/images/menu/pictures_aspx/sidebar_Green_03.jpg'"

onmouseout="document.products.src='http://www.xxxxx.com/images/menu/pictures_aspx/sidebar_Red_03.jpg'"

href="../products.htm">

<IMG
SRC="http://www.xxxxxx.com/images/menu/pictures_aspx/sidebar_Red_03.jpg"
WIDTH=120 HEIGHT=44 border="0" ALT="" name=products>

</td></tr>
Click to expand...

You have completely forgotten to close the link.
<tr><td>

<A
onmouseover="document.distribution.src='http://www.xxxxxx.com/images/menu/pictures_aspx/sidebar_Green_04.jpg'"

onmouseout="document.distribution.src='http://www.xxxxxx.com/images/menu/pictures_aspx/sidebar_Red_04.jpg'"

href="../distribution.htm">

<IMG
SRC="http://www.xxxxxx.com/images/menu/pictures_aspx/sidebar_Red_04.jpg"
name = distribution WIDTH=120 HEIGHT=50 ALT="" border="0">

</td></tr>
Click to expand...

There too.
<tr><td>

<A
onmouseover="document.testimonials.src='http://www.xxxxxx.com/images/menu/pictures_aspx/sidebar_Green_05.jpg'"

onmouseout="document.testimonials.src='http://www.xxxxxx.com/images/menu/pictures_aspx/sidebar_Red_05.jpg'"

href="../testimonials.htm">

<IMG
SRC="http://www.xxxxxx.com/images/menu/pictures_aspx/sidebar_Red_05.jpg"
WIDTH=120 HEIGHT=43 ALT="" name=testimonials border="0">

</td></tr>
Click to expand...

There too.
<tr><td>

<A
onmouseover="document.news.src='http://www.xxxxxx.com/images/menu/pictures_aspx/sidebar_Green_06.jpg'"

onmouseout="document.news.src='http://www.xxxxxx.com/images/menu/pictures_aspx/sidebar_Red_06.jpg'"

href="../news.htm">

<IMG
SRC="http://www.xxxxxx.com/images/menu/pictures_aspx/sidebar_Red_06.jpg"
name = news WIDTH=120 HEIGHT=39 ALT=""border = "0">

</td></tr>
Click to expand...

There too.
<tr><td>

<A
onmouseover="document.contact.src='http://www.xxxxxx.com/images/menu/pictures_aspx/sidebar_Green_07.jpg'"

onmouseout="document.contact.src='http://www.xxxxxx.com/images/menu/pictures_aspx/sidebar_Red_07.jpg'"

href="../contact.htm">



<IMG
SRC="http://www.xxxxxx.com/images/menu/pictures_aspx/sidebar_Red_07.jpg"
name= contact WIDTH=120 HEIGHT=45 ALT=""border="0">

</td></tr>
Click to expand...

There too.
<tr><td>

<A
onmouseover="document.employment.src='http://www.xxxx.com/images/menu/pictures_aspx/sidebar_Green_08.jpg'"

onmouseout="document.employment.src='http://www.xxxxxx.com/images/menu/pictures_aspx/sidebar_red_08.jpg'"

href="../employment.htm">

<IMG SRC="http://www.xxxx.com/images/menu/pictures_aspx/sidebar_Red_08.jpg"
name = employment WIDTH=120 HEIGHT="42" ALT="" border="0"></TD>

</tr>
Click to expand...

There too.
<tr><td>

<A
onmouseover="document.home.src='http://www.xxxxxx.com/images/menu/pictures_aspx/sidebar_Green_09.jpg'"

onmouseout="document.home.src='http://www.xxxxxx.com/images/menu/pictures_aspx/sidebar_red_09.jpg'"

href="../home.htm">



<IMG
SRC="http://www.xxxxxx.com/images/menu/pictures_aspx/sidebar_Red_09.jpg"
name = home WIDTH=120 HEIGHT=56 ALT="" border="0">

</td> </tr>
Click to expand...

There too.
 
Mark and Göran,

1) RE: "What doctype are you using?"
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

2) I changed all my closing "a" tags. Now, there is space between ALL the
cells. Before, it was only some.

Following is my revised code. I have left the graphic links for real so
that you may view it in your browser and see for yourself.

3) Do I have the /a tags in the right places?

Thank you.



<TABLE WIDTH=120 BORDER=0 CELLPADDING=0 CELLSPACING=0>
<tr><td>
<IMG
SRC="http://www.wheelers.com/images/menu/pictures_aspx/sidebar_Red_01.jpg"
WIDTH=120 HEIGHT=15 ALT="">
</td></tr>
<tr><td><A
onmouseover="document.about.src='http://www.wheelers.com/images/menu/pictures_aspx/sidebar_Green_02.jpg'"
onmouseout="document.about.src='http://www.wheelers.com/images/menu/pictures_aspx/sidebar_red_02.jpg'"
href="../about.htm">
<IMG
SRC="http://www.wheelers.com/images/menu/pictures_aspx/sidebar_Red_02.jpg"
name = about WIDTH=120 HEIGHT=46 border="0" ALT="">
</a>
</TD></tr>
<tr><td>

<A
onmouseover="document.products.src='http://www.wheelers.com/images/menu/pictures_aspx/sidebar_Green_03.jpg'"
onmouseout="document.products.src='http://www.wheelers.com/images/menu/pictures_aspx/sidebar_Red_03.jpg'"
href="../products.htm">
<IMG
SRC="http://www.wheelers.com/images/menu/pictures_aspx/sidebar_Red_03.jpg"
WIDTH=120 HEIGHT=44 border="0" ALT="" name=products>
</a>

</td></tr>
<tr><td>
<A
onmouseover="document.distribution.src='http://www.wheelers.com/images/menu/pictures_aspx/sidebar_Green_04.jpg'"
onmouseout="document.distribution.src='http://www.wheelers.com/images/menu/pictures_aspx/sidebar_Red_04.jpg'"
href="../distribution.htm">
<IMG
SRC="http://www.wheelers.com/images/menu/pictures_aspx/sidebar_Red_04.jpg"
name = distribution WIDTH=120 HEIGHT=50 ALT="" border="0">
</a>
</td></tr>
<tr><td>
<A
onmouseover="document.testimonials.src='http://www.wheelers.com/images/menu/pictures_aspx/sidebar_Green_05.jpg'"
onmouseout="document.testimonials.src='http://www.wheelers.com/images/menu/pictures_aspx/sidebar_Red_05.jpg'"
href="../testimonials.htm">
<IMG
SRC="http://www.wheelers.com/images/menu/pictures_aspx/sidebar_Red_05.jpg"
WIDTH=120 HEIGHT=43 ALT="" name=testimonials border="0">
</a>
</td></tr>
<tr><td>
<A
onmouseover="document.news.src='http://www.wheelers.com/images/menu/pictures_aspx/sidebar_Green_06.jpg'"
onmouseout="document.news.src='http://www.wheelers.com/images/menu/pictures_aspx/sidebar_Red_06.jpg'"
href="../news.htm">
<IMG
SRC="http://www.wheelers.com/images/menu/pictures_aspx/sidebar_Red_06.jpg"
name = news WIDTH=120 HEIGHT=39 ALT=""border = "0">
</a>
</td></tr>
<tr><td>
<A
onmouseover="document.contact.src='http://www.wheelers.com/images/menu/pictures_aspx/sidebar_Green_07.jpg'"
onmouseout="document.contact.src='http://www.wheelers.com/images/menu/pictures_aspx/sidebar_Red_07.jpg'"
href="../contact.htm">
<IMG
SRC="http://www.wheelers.com/images/menu/pictures_aspx/sidebar_Red_07.jpg"
name= contact WIDTH=120 HEIGHT=45 ALT=""border="0">
</a>
</td></tr>
<tr><td>
<A
onmouseover="document.employment.src='http://www.wheelers.com/images/menu/pictures_aspx/sidebar_Green_08.jpg'"
onmouseout="document.employment.src='http://www.wheelers.com/images/menu/pictures_aspx/sidebar_red_08.jpg'"
href="../employment.htm">
<IMG
SRC="http://www.wheelers.com/images/menu/pictures_aspx/sidebar_Red_08.jpg"
name = employment WIDTH=120 HEIGHT="42" ALT="" border="0">
</a>
</TD></tr>
<tr><td>
<A
onmouseover="document.home.src='http://www.wheelers.com/images/menu/pictures_aspx/sidebar_Green_09.jpg'"
onmouseout="document.home.src='http://www.wheelers.com/images/menu/pictures_aspx/sidebar_red_09.jpg'"
href="../home.htm">
<IMG
SRC="http://www.wheelers.com/images/menu/pictures_aspx/sidebar_Red_09.jpg"
name = home WIDTH=120 HEIGHT=56 ALT="" border="0">
</a>
</td></tr>
</TABLE>



news:[email protected]...
 
1) RE: "What doctype are you using?"
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
Click to expand...

Ouch! You *really* should consider updating this to something a little more
standards-compliant:
http://gutfeldt.ch/matthias/articles/doctypeswitch/table.html
I recall from some of our previous exchanges that that's not something you
appreciate hearing, but things move on and you either keep up or get left
behind...
2) I changed all my closing "a" tags. Now, there is space between ALL the
cells. Before, it was only some.
Click to expand...

OK - is that what you actually want, though...?
Following is my revised code. I have left the graphic links for real so
that you may view it in your browser and see for yourself.

3) Do I have the /a tags in the right places?
Click to expand...

Pretty much, though you should remove the name attribute from your <img>
tags: http://www.w3schools.com/tags/tag_img.asp
 
1) RE: You *really* should consider updating this to something a little more
standards-compliant:
Click to expand...
I don't mind being told I need to update. I just don't know how. At this
moment, I need to make work what I have.

2)RE: I changed all my closing "a" tags. Now, there is space between ALL the
OK - is that what you actually want, though...?
Click to expand...
NO! That is NOT what I want. That is the whole purpose of my original
question. I don't want space between cells. I want the images to line up
smoothly.
Why did moving the /a tags to their proper place (as was suggested) make
more cells that have space between them instead of correcting my problem?
 
dancer said:
Mark and Göran,

1) RE: "What doctype are you using?"
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

2) I changed all my closing "a" tags. Now, there is space between ALL the
cells. Before, it was only some.
Click to expand...

That's better. Now the code is correct, which rules out incorrect code
as a factor.
Following is my revised code. I have left the graphic links for real so
that you may view it in your browser and see for yourself.
Click to expand...

The reason that you get spaces between images, is that the images are
placed on the base line of the text in the table cells. The text block
extends below the base line, so the spacing is the distance from the
base line to the bottom of the text block.

Add this style in the head of the page:

<style type="text/css">
td a { display: block; }
td a img { display: block; }
</style>

This turns the links and images from inline elements to block elements.
3) Do I have the /a tags in the right places?
Click to expand...

Yes.
 
2)RE: I changed all my closing "a" tags. Now, there is space between ALL
the
NO! That is NOT what I want. That is the whole purpose of my original
question. I don't want space between cells. I want the images to line up
smoothly.
Click to expand...

OK - Göran has solved this for you...
 
RE:
td a { display: block; }
td a img { display: block; }
</style>
Click to expand...

YEAA!!! This worked! Thank you, Göran. I would *never* have figured that
out by myself! But it caused my links at the bottom of the page to be in a
vertical line. How can I get them back to their horizontal format?
Here's the code.
<TD vAlign=top height=23><br><br>

<DIV align=center><FONT face="Arial, Helvetica, sans-serif" size=1><A

href="about.htm"><FONT size=-7>about

wheeler's</FONT></A><FONT size=-7> | <A

href="products.htm">wheeler's products &amp;

services</A> | <A

href="distribution.htm">wheeler's distribution

sites</A> | <A href="testimonial.htm">wheeler's

testimonials</A><BR><A href="newsbak.htm">wheeler's

news</A> | <A href="contact.htm">contact

wheeler's</A> | home

</FONT></FONT></DIV>
 
dancer said:
RE:


YEAA!!! This worked! Thank you, Göran. I would *never* have figured that
out by myself! But it caused my links at the bottom of the page to be in a
vertical line. How can I get them back to their horizontal format?
Click to expand...

Define the style for a class:

<style type="text/css">
..AnythingYouLike a { display: block; }
..AnythingYouLike a img { display: block; }
</style>

Use the class in the table:

<TABLE WIDTH=120 BORDER=0 CELLPADDING=0 CELLSPACING=0
class="AnythingYouLike">

That makes the style only apply to the links and images in the table.
 
Once again, thank you!!! Worked great.


Göran Andersson said:
Define the style for a class:

<style type="text/css">
.AnythingYouLike a { display: block; }
.AnythingYouLike a img { display: block; }
</style>

Use the class in the table:

<TABLE WIDTH=120 BORDER=0 CELLPADDING=0 CELLSPACING=0
class="AnythingYouLike">

That makes the style only apply to the links and images in the table.
Click to expand...
 
Goran, Very good.

because I don't understand I like to ask:
Why have td a {display:block}; and td a img {display:block}; Both?
I tried it with only td a img {display:block}; and it works. !!!!

what does block mean?

Thank you,

Lit
 
Back
Top