Row Height

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>
 
K

Kevin Spencer

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
 
M

Mark Rae [MVP]

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...
 
D

dancer

Each image is in a *different* row. Does *every* row default to the largest
image height?

Thank you.
 
?

=?ISO-8859-1?Q?G=F6ran_Andersson?=

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.
 
D

dancer

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]...
 
M

Mark Rae [MVP]

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
 
D

dancer

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?
 
?

=?ISO-8859-1?Q?G=F6ran_Andersson?=

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.
 
M

Mark Rae [MVP]

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...
 
D

dancer

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>
 
?

=?ISO-8859-1?Q?G=F6ran_Andersson?=

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.
 
D

dancer

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...
 
L

Lit

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
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Help with Visual Lightbox: Scripts 2
Can someone tell me if this a real tracker? Or is it one designed to show you a different message at certain times, ie. acting like one? 0
Sort by number of characters 1
SendGrid email issue in responsive Gmail 1
Put image over the top of another image on hover 3
Uncaught ReferenceError: item is not defined at HTMLButtonElement.onclick in the: <button onclick="item.inserir()">Inserir dados</button> 1
Help with my responsive home page 2
Image shifts to the right when export the page to pdf 4

Members online

Total: 28 (members: 1, guests: 27)
Robots: 198

Forum statistics

Threads
473,766
Messages
2,569,569
Members
45,042
Latest member
icassiem

Latest Threads

Top