Forum Moderators: not2easy

Message Too Old, No Replies

CSS Rollovers - Flicker in IE

css image rollover hover question

         

cyppher

9:57 am on Jun 28, 2005 (gmt 0)

10+ Year Member



Dear All,

As my deadline approaches and I'm desperate building an efficient CSS Rollover menu I post my question in this forum. Hoping for soon replies.

The situation:
I have a vertical menu with 8 items. Each menu-item has its own unique (background) image and there's no text in the menu. I'm trying to build a CSS rollover menu, in which the user see each menu-item change (highlighted) when he mouses over.

The problem:
I've tried 2 different approaches to build such a rollover menu. One way or another way, neither methods seems to work for me, although they work in the examples from which I copied the HTML en CSS codes.

1. In the first method I use a DIV for each menu-item. The DIV contains a <a href> tag with an image. When there is a mouse-over, the background of the DIV changes. In FireFox this works just fine, however in Internet Explorer (IE) the rollover images flicker.
I've searched the web for a solution and copied the code, however for unique background-images this doesn't work...

2. In the 2nd method I use <ul> and <li> to build the menu. The <ul> uses a CSS class with a background image. This image contains the complete menu as well as the complete rollover menu. (normal state and hover state). As soon as the user mouses over a <li> item, the background of that list-item changes. (The position of the background image changes to the right, which should show the hover part of the image). The problem is that I can't get this menu working. The background doesn't seem to change. The Firefox view is terrible, the positioning doesn't work at all.
This method is explained here: [dellwebsites.com...]

[snip]

Please have a look at this situation, as I can't come up with a solution...

Thanks in advance,

Mathijs de Jong
[snip]

[edit: no urls, please. See CSS Forum Charter [webmasterworld.com] for details.]

[edited by: createErrorMsg at 10:37 am (utc) on June 28, 2005]
[edit reason] url fixing [/edit]

4css

11:10 am on Jun 28, 2005 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Hi cyppher
Welcome to WebmasterWorld!
Ok, first, if you have not yet validated your xhtml/html and css, I suggest that you do so before you do anything else.

IF after you do so, and you still have problems, post some of your code in here as per the charter for this area. There are directions for how to do this correctly.

Its a bit difficult to help you out if you dont' let us see the styles and your code.

Good luck.

cyppher

11:19 am on Jun 28, 2005 (gmt 0)

10+ Year Member



ok thanks for your reply

I don't understand why URL's are deleted, I posted the links to the CSS and the code...

And yep I validated all code, nothing wrong...

However the menu is in progress now. Only thing left is the positioning of the DIV...
Keep y'all posted.