Jump to content

Cre8asiteforums Internet Marketing
and Conversion Web Design


Photo

Css Flyout Menu Working In Ie7 Not Firefox Or Opera


  • Please log in to reply
4 replies to this topic

#1 MaryKrysia

MaryKrysia

    Gravity Master Member

  • Members
  • 157 posts

Posted 08 May 2008 - 01:59 PM

My first attempt at a pure CSS flyout menu!

Armed with lots of help from CSS Web Sites, I have attempted to create a pure CSS flyout menu. The problem is that it is only working in IE7, and not in Firefox or Opera. I am thrilled that this is working at all! Not being a pro at CSS, I have no idea what is needed for this to work in all browsers. (I am not sure I really understand how this is working in IE7).

The test site is at http://www.wingsdove.com/agg/menus.htm. The CSS code is at http://www.wingsdove...lude/styles.css. Any insights or ideas?

Mary

#2 Guest_Autocrat_*

Guest_Autocrat_*
  • Guests

Posted 08 May 2008 - 03:44 PM

Well, not wanting to be the bearer of bad tidings...

But the use of visibility/hidden values can cause some problems with assistive/alternative technologies - which may mean that some user types cannot make full use of that navigation.

Further, you do realise that means IE6 etc. users won't get any benefit from the menu?

#3 Guest_Autocrat_*

Guest_Autocrat_*
  • Guests

Posted 08 May 2008 - 04:12 PM

Additional to those problems, your structure for the list was a little off...
you were closing the containing LI.


You could try this as the basic start point...
(basic SuckerFish)
http://www.htmldog.c...e/vertical.html


Works wiht no JS needed for browsers baring IE6 (and maybe NS6?).


If you want to go a step further... look at SuperFish... which is a JQuery version.
Works without JS for the good browsers... but with JS works in IE6 and allows for Keyboard navigation etc.

#4 MaryKrysia

MaryKrysia

    Gravity Master Member

  • Members
  • 157 posts

Posted 08 May 2008 - 07:27 PM

Further, you do realise that means IE6 etc. users won't get any benefit from the menu?


No, I did not know this. I have used CSS for 2 years but in very limited ways. Since search engines do not read javascript, I was hoping to create a flyout navigation menu without the use of javascript -- one that would work in all browsers, including IE6. Darn. :)

Thank you for the link, autocrat, but it sounds like will have to add javascript to the navigation menu.

I checked the link you refered me to and found information about Javascript.


Thanks, :flowers:
Mary

Edited by MaryKrysia, 08 May 2008 - 07:30 PM.


#5 MaryKrysia

MaryKrysia

    Gravity Master Member

  • Members
  • 157 posts

Posted 14 May 2008 - 04:52 PM

Hi, I'm back.

My drop-down/fly-out menu is getting closer to working but not quite there. I have gone over all the code a few times and can't see where the problem is.

In IE7, the second level of the menu does fly out to the right, but remains open and the next one overlaps the first. Opera and Firefox display both levels of the menu as one long level with no fly-out/drop-down.

Again, the link to the design is http://www.wingsdove.com/agg/index.htm, the css code is at http://www.wingsdove...lude/styles.css. The javascript is at http://www.wingsdove...lude/general.js.

I admit I know next to nothing about JavaScript, but knowing other languages, i can read some of the script and it seems ok.

Thanks,
Mary



RSS Feed

0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users