[RESOLVED] Rollover Question

[hubbajubba]

Ok i have a rollover effect that's set to 35 pixels, but then when you click on it it has a 5px space underneath the image. I then made the image 30 pixels and it is now the right height but the image is stretched.

My code is

<script language="JavaScript" type="text/javascript">
<!--
if (document.images) {
    homebuttonup       = new Image();
    homebuttonup.src   = "http://webuycrap.webs.com/NavigationTop/PNG/Homeoff.png" ;
    homebuttondown     = new Image() ;
    homebuttondown.src = "http://webuycrap.webs.com/NavigationTop/PNG/Homeon.png" ;
}
function buttondown( buttonname )
{
    if (document.images) {
      document[ buttonname ].src = eval( buttonname + "down.src" );
    }
}
function buttonup ( buttonname )
{
    if (document.images) {
      document[ buttonname ].src = eval( buttonname + "up.src" );
    }
}
// -->
</script>

and html is

<!--Nav Bar-->
<table width=1000 cellpadding=0 cellspacing=0 class="bgrepeat" background="http://webuycrap.webs.com/NavigationTop/Navbg.png">
<tr height=35><td>

<center><table cellpadding=0 cellspacing=0><tr>

<td><a href="index.html"
  onmouseover="buttondown('homebutton')"
  onmouseout="buttonup('homebutton')">
<img src="http://webuycrap.webs.com/NavigationTop/PNG/Homeoff.png" name="homebutton" border="0" height=35 />
</a>
</td>

</tr>
</table></center>
</td></tr>
</table>

Here is a picture of the problem
http://webuycrap.webs.com/Problem.bmp

[thraddash]

Are you using a STRICT doctype and running this code in FireFox by any chance?

[hubbajubba]

What do you mean STRICT, sorry i dont do java that much, and ya im using firefox

[EasyTech]

Wow, I haven't seen a <center> tag in a long time.....

use css instead. Example:

<td id="home">

then your css could be as simple as:

#home  {background: url('buttonup.png')}
#home hover   {background: url('buttondown.png')}

This still doesn't solve the 30 vs 35 pixel problem, but I did not see enough code there to guess as to the nature of the problem. There may be a problem with the original images being different heights, you can stop the stretching by inserting the correct width. If you eliminate tables and used css, then it's not an issue.

Better yet, don't use pictures for the word "Home" use text, and change it's style when hovering. This way the navbar will flow around your customer's browser settings.

--Dave

[thraddash]

You right EasyTech, <center> tags are depricated. If you want to center the <table> on the page you should be using the margin style:

<table style="margin: 0px auto;" border="0" cellspacing="0" cellpadding="0">

Little bit of useless information there

[hubbajubba]

You right EasyTech, <center> tags are depricated. If you want to center the <table> on the page you should be using the margin style:

<table style="margin: 0px auto;" border="0" cellspacing="0" cellpadding="0">

Little bit of useless information there

I started to use that on my older version of this site, but i kinda driffed away from that. Ill go threw and set a style up for Centering and just use a class and refrence sheet. Thanks

[hubbajubba]

Wow, I haven't seen a <center> tag in a long time.....

use css instead. Example:

<td id="home">

then your css could be as simple as:

#home  {background: url('buttonup.png')}
#home hover   {background: url('buttondown.png')}

This still doesn't solve the 30 vs 35 pixel problem, but I did not see enough code there to guess as to the nature of the problem. There may be a problem with the original images being different heights, you can stop the stretching by inserting the correct width. If you eliminate tables and used css, then it's not an issue.

Better yet, don't use pictures for the word "Home" use text, and change it's style when hovering. This way the navbar will flow around your customer's browser settings.

--Dave

I tryed to do the whole Id="navbar" thing and set it up with css but it was kinda complicated i thought, I only tryed it once 1 night and i guess if nothing here works i could try that again. And for the Home i have a special text and a border around that text, is there anyway to atleast put a border around it the word? (not a box but around every letter)

Thanks for all the replies

---------------------------------
Ok i just tried your

</style>
#home {background: url('aboutoff.png')}
#home hover {background: url('abouton.png')}
</style>

<body>
<table><td id=home ></td></table>
</body>

and it didnt work. Nothing shows up. If i did the using text instead of pictures, how would i make it so when you hover over it it changes a 94 by 35 pixel Dimgray box behind it?

[thraddash]

As far as I am aware, Firefox adds extra padding to the bottom of all images if you use the strict doctype.

Try the transitional doctype and see if it solves your problem:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

(This should be the first line of code in your source file)

[hubbajubba]

As far as I am aware, Firefox adds extra padding to the bottom of all images if you use the strict doctype.

Try the transitional doctype and see if it solves your problem:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

(This should be the first line of code in your source file)

It still put the extra 5px padding at the bottom, but thanks

[thraddash]

Negative padding does not work, just give use a better view of what we are dealing with here, or a link to an example page online if possible.

[EasyTech]

A few ideas:

* Put img {border:0; margin:0; padding:0} in your style sheet to eliminate any potential border issues.

*You need to quote any name or id's . <td id="home"></td> There can only be one id'd tag on your page as well. There may be multiple names.

* Make sure that both pictures have the same height and width.

* Set both the height and width of the picture. If you don't do this, then the image will be scaled to fit. You can force a 30 by 40 picture into a 20 by 38 frame by putting 'width="20 Height="38"' into your <img> tag, and the image will be horribly distorted, but it will fit.

*For shadows, it's css3 and may not work in all browsers. http://www.w3.org/Style/Examples/007...shadow#outline

--Dave

[hubbajubba]

Negative padding does not work, just give use a better view of what we are dealing with here, or a link to an example page online if possible.

Its not a very good example because this is just the code i copyied onto a new page, ive made fixes to some of it on the other page.

http://webuycrap.webs.com/NewLook.htm

[hubbajubba]

I just took and made it so only one of my images is linked

<a href="http://webuycrap.webs.com/about.htm"><IMG src="http://www.freewebs.com/webuycrap/NavigationTop/PNG/PoliciesOff.png" border=0></a>

and that worked fine

then when i put

<a href="http://webuycrap.webs.com/policies.htm"><IMG src="http://www.freewebs.com/webuycrap/NavigationTop/PNG/PoliciesOff.png" border=0></a>
<a href="http://webuycrap.webs.com/about.htm"><IMG src="http://www.freewebs.com/webuycrap/NavigationTop/PNG/aboutOff.png" border=0></a>

it made the space? I tryed this with multiple images and they all did the same thing

[thraddash]

Took me a while but whew!!

Your problem is because your <td> content is on multiple lines.
Try removing all line breaks and spaces between your <td> tags eg:

<td><a href="http://webuycrap.webs.com/index.html" onmouseover="buttondown('homebutton')" onmouseout="buttonup('homebutton')"><img src="NewLook_files/Homeoff.png" name="homebutton" border="0" height="35" /></a></td>

[hubbajubba]

Took me a while but whew!!

Your problem is because your <td> content is on multiple lines.
Try removing all line breaks and spaces between your <td> tags eg:

<td><a href="http://webuycrap.webs.com/index.html" onmouseover="buttondown('homebutton')" onmouseout="buttonup('homebutton')"><img src="NewLook_files/Homeoff.png" name="homebutton" border="0" height="35" /></a></td>

Dude thanks, finally one that works . Is there any logic to why they have to be on same line?