/    Sign up×
Community /Pin to ProfileBookmark

[RESOLVED] Rollover Question

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

[CODE]<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>
[/CODE]

and html is

[CODE]<!–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>[/CODE]

Here is a picture of the problem
[URL=”http://webuycrap.webs.com/Problem.bmp”]http://webuycrap.webs.com/Problem.bmp[/URL]

to post a comment
JavaScript

14 Comments(s)

Copy linkTweet thisAlerts:
@thraddashAug 10.2009 — Are you using a STRICT doctype and running this code in FireFox by any chance?
Copy linkTweet thisAlerts:
@hubbajubbaauthorAug 10.2009 — What do you mean STRICT, sorry i dont do java that much, and ya im using firefox
Copy linkTweet thisAlerts:
@thraddashAug 10.2009 — 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:

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

(This should be the first line of code in your source file)
Copy linkTweet thisAlerts:
@EasyTechAug 10.2009 — Wow, I haven't seen a <center> tag in a long time.....

use css instead. Example:
[CODE]
<td id="home">
[/CODE]

then your css could be as simple as:
[CODE]#home {background: url('buttonup.png')}
#home hover {background: url('buttondown.png')}[/CODE]


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 image[B]s[/B] 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
Copy linkTweet thisAlerts:
@thraddashAug 10.2009 — You right EasyTech, <center> tags are depricated. If you want to center the <table> on the page you should be using the margin style:

[code=html]<table style="margin: 0px auto;" border="0" cellspacing="0" cellpadding="0">[/code]

Little bit of useless information there ?
Copy linkTweet thisAlerts:
@hubbajubbaauthorAug 10.2009 — Wow, I haven't seen a <center> tag in a long time.....

use css instead. Example:
[CODE]
<td id="home">
[/CODE]

then your css could be as simple as:
[CODE]#home {background: url('buttonup.png')}
#home hover {background: url('buttondown.png')}[/CODE]


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 image[B]s[/B] 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[/QUOTE]


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?
Copy linkTweet thisAlerts:
@hubbajubbaauthorAug 10.2009 — You right EasyTech, <center> tags are depricated. If you want to center the <table> on the page you should be using the margin style:

[code=html]<table style="margin: 0px auto;" border="0" cellspacing="0" cellpadding="0">[/code]

Little bit of useless information there ?[/QUOTE]


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
Copy linkTweet thisAlerts:
@hubbajubbaauthorAug 10.2009 — 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:

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

(This should be the first line of code in your source file)[/QUOTE]


It still put the extra 5px padding at the bottom, but thanks
Copy linkTweet thisAlerts:
@thraddashAug 10.2009 — 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.
Copy linkTweet thisAlerts:
@EasyTechAug 10.2009 — 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 [I]both[/I] 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/text-shadow#outline

    --Dave
    Copy linkTweet thisAlerts:
    @hubbajubbaauthorAug 10.2009 — 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.[/QUOTE]

    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
    Copy linkTweet thisAlerts:
    @hubbajubbaauthorAug 10.2009 — I just took and made it so only one of my images is linked

    &lt;a href="http://webuycrap.webs.com/about.htm"&gt;&lt;IMG src="http://www.freewebs.com/webuycrap/NavigationTop/PNG/PoliciesOff.png" border=0&gt;&lt;/a&gt;

    and that worked fine

    then when i put

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


    it made the space? I tryed this with multiple images and they all did the same thing
    Copy linkTweet thisAlerts:
    @thraddashAug 10.2009 — 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:

    [code=html]<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>[/code]
    Copy linkTweet thisAlerts:
    @hubbajubbaauthorAug 11.2009 — 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:

    [code=html]<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>[/code][/QUOTE]


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

    Success!

    Help @hubbajubba spread the word by sharing this article on Twitter...

    Tweet This
    Sign in
    Forgot password?
    Sign in with TwitchSign in with GithubCreate Account
    about: ({
    version: 0.1.9 BETA 6.1,
    whats_new: community page,
    up_next: more Davinci•003 tasks,
    coming_soon: events calendar,
    social: @webDeveloperHQ
    });

    legal: ({
    terms: of use,
    privacy: policy
    });
    changelog: (
    version: 0.1.9,
    notes: added community page

    version: 0.1.8,
    notes: added Davinci•003

    version: 0.1.7,
    notes: upvote answers to bounties

    version: 0.1.6,
    notes: article editor refresh
    )...
    recent_tips: (
    tipper: @meenaratha,
    tipped: article
    amount: 1000 SATS,

    tipper: @meenaratha,
    tipped: article
    amount: 1000 SATS,

    tipper: @AriseFacilitySolutions09,
    tipped: article
    amount: 1000 SATS,
    )...