Mouseover GIF Button - Image Size Changes in IE
I am building a small website that uses javascript mouseover buttons. These are 150x22 pixel GIFs I created in Microsoft Image Composer. When I view them in Opera, Netscape and Firefox, they look great. When I view them in IE, they look much larger, and therefore, very distorted. For what it's worth, I'm running IE 6.0.29, SP2.
I am trying to find a way to keep these GIFs from resizing when the site is opened in IE. I tried to create a table and made the table cells the same size as the GIFs, then I put the GIF images in each cell, however this did not work.
When I began building this site (in FrontPage 2000), I used hover buttons. Hover buttons, via the use of a Java applet, displays nicely in IE. I quickly learned that these Java applets may not be the best way to display my menu because of not knowing whether or not the viewer would have Java installed to view them (Windows XP apparently doesn't have this capability). Therefore, I found a nice javascript that does the job.
Now that I have the mechanics working, I am trying to find a solution to handle the image consistently.
For the record, I am a beginner at this.
I have attached the HTML for my page in question. I have attached 2 of the GIFs in question. They are all created identically.
Here is the code and thanks in advance for any help anyone can provide:
Heritage Home Inspections - Your Premier Northern Kentucky Home Inspector
<script type="text/javascript">
</script>
| Attachment | Size |
|---|---|
| Home.gif | 978 bytes |
| Home-over.gif | 978 bytes |
CptAwesome posted this at 23:25 — 27th July 2005.
He has: 370 posts
Joined: Dec 2004
The images don't seem to be attached, and nothing in the code seems to indicate the size changing at any point, could you link us to the actual result so we can compare in IE and FF?
tstach posted this at 01:29 — 28th July 2005.
He has: 17 posts
Joined: Jul 2005
Since I haven't published my website yet, I set this page up in Geocities and attached all the GIF files. Here is the URL:
http://www.geocities.com/doctor_wirehead/index.htm
I tried it in Opera and IE and am getting the same results in IE.
demonhale posted this at 02:52 — 28th July 2005.
He has: 3,278 posts
Joined: May 2005
Ok I get what you mean, Its not a GIF problem, its a spacer problem... IE has problems recognizing block sizing, FF however does... Now If youll need to use the gifs to show your menu, why not look in dynamic drive for a css/js script menu... Im sure theres one there which you can alter to look the same as the one shown here...
tstach posted this at 05:16 — 28th July 2005.
He has: 17 posts
Joined: Jul 2005
Check this out.
http://www.geocities.com/doctor_wirehead/index.htm
The first page is the original menu. Click any of the buttons and you'll go to the new one that was done per your recommendation.
It looks great in all the browsers I've looked at so far - including IE.
Now I have a couple of uneducated questions:
First, is it correct to say that I just created this menu using CSS? I've never used this before, however, it didn't seem to be too hard to figure out after about an hour of playing with it.
Second, I am wondering if this method of displaying the menu will cause any issues in other viewer's browsers like the Java applet hover buttons may have if the viewer didn't have Java installed?
I've been messing with this on my own since last Sunday. It has been a good learning experience. Thanks for your help on this.
Todd
demonhale posted this at 05:28 — 28th July 2005.
He has: 3,278 posts
Joined: May 2005
Ok try not to use
tstach posted this at 19:05 — 28th July 2005.
He has: 17 posts
Joined: Jul 2005
I did that. Thanks again. It is working great now.
tstach posted this at 03:53 — 3rd August 2005.
He has: 17 posts
Joined: Jul 2005
I spoke too soon last week when I said this was working fine. I meant to say that it was working good in all browsers EXCEPT Netscape. Maybe I didn't clear the browser cache the other day, but now when I open this link up in Netscape, all I get are just basic hyperlinks. No buttons, no animations.
I'm guessing that something very simple is wrong with the CSS format of the new buttons.
Can anyone see any problems as to why these buttons wouldn't work in Netscape?
I haven't addressed the Firefox issue totally yet.
Thanks and here's the link:
http://www.geocities.com/doctor_wirehead/index.htm
The first page is the or
benf posted this at 00:24 — 31st July 2005.
They have: 426 posts
Joined: Feb 2005
Ye i have been using this kind of css menu for a while, think it is better for SEO as well. But i found that in the line 'background-repeat: no-repeat;' if i left no space next to no-repeat; then the menu wouldn't work. I thought that white space didn't matter but in this case it did. Any ideas?
Good Value Professional VPS Hosting
demonhale posted this at 02:44 — 31st July 2005.
He has: 3,278 posts
Joined: May 2005
Why not do the shorthand and it will be sure to work... Example:
background: #f0f0f0 url(picture.gif) center left no-repeat;
you can also use repeat-x ; repeat-y ; repeat ; or insert fixed before repeat commands to have the pic static...
Want to join the discussion? Create an account or log in if you already have one. Joining is fast, free and painless! We’ll even whisk you back here when you’ve finished.