Flyout menu z-index issue

Hi everyone,

I have a problem with a flyout menu which I'm doing using CSS.
url: http://www.africanbush.co.za/horseonline1/

It's the menu in the middle : "Business Directory" - if you hover over
Breeders in Firefox it renders correctly, but of course IE doesn't! In
IE it allows the menu behind it to show through.

The CSS is in three separate files: The normal CSS is in ho.css, this
menu is in flyout1.css, and the IE additional CSS is in flyout_ie.css.

I've googled, and tried dozens of remedies, but what is up now is the
closest to what I want it to do.

Thanks.

--
== Not nuts, just a little eccentric ==

pecan wrote on 14 jul 2009 in comp.infosystems.www.authoring.stylesheets:

Hi everyone,

I have a problem with a flyout menu which I'm doing using CSS.
url: http://www.africanbush.co.za/horseonline1/

It's the menu in the middle : "Business Directory" - if you hover over
Breeders in Firefox it renders correctly, but of course IE doesn't! In
IE it allows the menu behind it to show through.

The CSS is in three separate files: The normal CSS is in ho.css, this
menu is in flyout1.css, and the IE additional CSS is in flyout_ie.css.

I've googled, and tried dozens of remedies, but what is up now is the
closest to what I want it to do.

Shows correctly and the same in IE8 and Chrome


--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

Evertjan. wrote:

pecan wrote on 14 jul 2009 in comp.infosystems.www.authoring.stylesheets:

Hi everyone,

I have a problem with a flyout menu which I'm doing using CSS.
url: http://www.africanbush.co.za/horseonline1/

It's the menu in the middle : "Business Directory" - if you hover over
Breeders in Firefox it renders correctly, but of course IE doesn't! In
IE it allows the menu behind it to show through.

The CSS is in three separate files: The normal CSS is in ho.css, this
menu is in flyout1.css, and the IE additional CSS is in flyout_ie.css.

I've googled, and tried dozens of remedies, but what is up now is the
closest to what I want it to do.

Shows correctly and the same in IE8 and Chrome

But not in IE7 where I see the problem as described.

However, there's a more serious problem that the page layout is borked
if you enlarge your text size or, as I do, have a minimum font size
specified. The the middle menu overlaps the section below it and the
Calendar fly-out on the left runs off the page at the bottom. The
latter problem exists with no text-size increase if the window is not
maximized. Probably also does that at resolutions less than 1280 x 1024
(my screen res).

--
Ed Mullen
http://edmullen.net
Very funny Scotty - now beam down my clothes.

Ed Mullen wrote:

Evertjan. wrote:
pecan wrote on 14 jul 2009 in comp.infosystems.www.authoring.stylesheets:

Hi everyone,

I have a problem with a flyout menu which I'm doing using CSS.
url: http://www.africanbush.co.za/horseonline1/

It's the menu in the middle : "Business Directory" - if you hover
over Breeders in Firefox it renders correctly, but of course IE
doesn't! In IE it allows the menu behind it to show through.

The CSS is in three separate files: The normal CSS is in ho.css, this
menu is in flyout1.css, and the IE additional CSS is in flyout_ie.css.

I've googled, and tried dozens of remedies, but what is up now is the
closest to what I want it to do.

Shows correctly and the same in IE8 and Chrome



But not in IE7 where I see the problem as described.

However, there's a more serious problem that the page layout is borked
if you enlarge your text size or, as I do, have a minimum font size
specified. The the middle menu overlaps the section below it and the
Calendar fly-out on the left runs off the page at the bottom. The
latter problem exists with no text-size increase if the window is not
maximized. Probably also does that at resolutions less than 1280 x 1024
(my screen res).

I tested it with the zoom, but not text only . I'll have to fix that.
Meantime... any help with the menu? I'm glad to hear it works in the
OTHER IEs, though.

--
== Not nuts, just a little eccentric ==

pecan wrote:

Ed Mullen wrote:
Evertjan. wrote:
pecan wrote on 14 jul 2009 in
comp.infosystems.www.authoring.stylesheets:

Hi everyone,

I have a problem with a flyout menu which I'm doing using CSS.
url: http://www.africanbush.co.za/horseonline1/

It's the menu in the middle : "Business Directory" - if you hover
over Breeders in Firefox it renders correctly, but of course IE
doesn't! In IE it allows the menu behind it to show through.

The CSS is in three separate files: The normal CSS is in ho.css,
this menu is in flyout1.css, and the IE additional CSS is in
flyout_ie.css.

I've googled, and tried dozens of remedies, but what is up now is
the closest to what I want it to do.

Shows correctly and the same in IE8 and Chrome



But not in IE7 where I see the problem as described.

However, there's a more serious problem that the page layout is borked
if you enlarge your text size or, as I do, have a minimum font size
specified. The the middle menu overlaps the section below it and the
Calendar fly-out on the left runs off the page at the bottom. The
latter problem exists with no text-size increase if the window is not
maximized. Probably also does that at resolutions less than 1280 x
1024 (my screen res).


I tested it with the zoom, but not text only . I'll have to fix that.
Meantime... any help with the menu? I'm glad to hear it works in the
OTHER IEs, though.

I wish I could help with that but debugging drop-down/fly-out menus
gives me a migraine. I've managed to get mine to the point where I
/almost/ understand it. At least I've got it to a point where I can
manage it and prevent it from being an issue.

--
Ed Mullen
http://edmullen.net
A penny saved is ridiculous.

In article <h3ig1m$la5$1 (AT) news (DOT) eternal-september.org>,
pecan <pecan (AT) NOSPAMrouxville (DOT) info> wrote:

Hi everyone,

I have a problem with a flyout menu which I'm doing using CSS.
url: http://www.africanbush.co.za/horseonline1/

It's the menu in the middle : "Business Directory" - if you hover over
Breeders in Firefox it renders correctly, but of course IE doesn't! In
IE it allows the menu behind it to show through.

The CSS is in three separate files: The normal CSS is in ho.css, this
menu is in flyout1.css, and the IE additional CSS is in flyout_ie.css.

I've googled, and tried dozens of remedies, but what is up now is the
closest to what I want it to do.

On my IE6 and 7 there are similar background problems on the left main
nav menu (the text behind shows through the orange) plus other problems,
the 2nd level disappears after one goes past the first link in the
second level.

Don't take this badly, but consider that it might not be worth all the
troubleshooting because you will end up with something that will
irritate *many* and be useful to *few*. These drop-down menus are
sometimes useful for folk really familiar with your site and it saves
them clicking through things to get to where they *know* they want to
get to.

You will be well pleased if you get rid of the whole lot and organise
your site so that if someone wants breeders or a calendar, they go to a
page with breeders or calander details. You can have simple local menus
on those pages. I expect you won't believe me and I can hardly blame
you, I have not the time to refer you to all the reasons why I am
confident of this.

--
dorayme

dorayme wrote:

In article <h3ig1m$la5$1 (AT) news (DOT) eternal-september.org>,
pecan <pecan (AT) NOSPAMrouxville (DOT) info> wrote:

Hi everyone,

I have a problem with a flyout menu which I'm doing using CSS.
url: http://www.africanbush.co.za/horseonline1/

It's the menu in the middle : "Business Directory" - if you hover over
Breeders in Firefox it renders correctly, but of course IE doesn't! In
IE it allows the menu behind it to show through.

The CSS is in three separate files: The normal CSS is in ho.css, this
menu is in flyout1.css, and the IE additional CSS is in flyout_ie.css.

I've googled, and tried dozens of remedies, but what is up now is the
closest to what I want it to do.


On my IE6 and 7 there are similar background problems on the left main
nav menu (the text behind shows through the orange) plus other problems,
the 2nd level disappears after one goes past the first link in the
second level.

Don't take this badly, but consider that it might not be worth all the
troubleshooting because you will end up with something that will
irritate *many* and be useful to *few*. These drop-down menus are
sometimes useful for folk really familiar with your site and it saves
them clicking through things to get to where they *know* they want to
get to.

You will be well pleased if you get rid of the whole lot and organise
your site so that if someone wants breeders or a calendar, they go to a
page with breeders or calander details. You can have simple local menus
on those pages. I expect you won't believe me and I can hardly blame
you, I have not the time to refer you to all the reasons why I am
confident of this.

I'll have a look at the proper site in those browsers. For this
exercise I loaded the relevent files into my practice directory, prior
to going live, so the files pertaining to the other bits might be different.

The menu is what the client wants. I confess I've spent way too much
time on flyout/drop-down menus over the last year! Hell, who knows, I
might become an expert!!! Eventually.

It suddenly occurred to me - the meu on the left uses javascript...
maybe that makes a difference in your rendering?

--
== Not nuts, just a little eccentric ==

In article <h3kb9r$e0m$1 (AT) news (DOT) eternal-september.org>,
pecan <pecan (AT) NOSPAMrouxville (DOT) info> wrote:

It suddenly occurred to me - the meu on the left uses javascript...
maybe that makes a difference in your rendering?

I think it might be to patch an IE failing in respect to hovering. But I
confess, I have not studied your show closely. It might take some time
with all the complications.

--
dorayme

pecan wrote:

dorayme wrote:
In article <h3ig1m$la5$1 (AT) news (DOT) eternal-september.org>,
pecan <pecan (AT) NOSPAMrouxville (DOT) info> wrote:

Hi everyone,

I have a problem with a flyout menu which I'm doing using CSS.
url: http://www.africanbush.co.za/horseonline1/

It's the menu in the middle : "Business Directory" - if you hover
over Breeders in Firefox it renders correctly, but of course IE
doesn't! In IE it allows the menu behind it to show through.

The CSS is in three separate files: The normal CSS is in ho.css, this
menu is in flyout1.css, and the IE additional CSS is in flyout_ie.css.

I've googled, and tried dozens of remedies, but what is up now is the
closest to what I want it to do.


On my IE6 and 7 there are similar background problems on the left main
nav menu (the text behind shows through the orange) plus other
problems, the 2nd level disappears after one goes past the first link
in the second level.

Don't take this badly, but consider that it might not be worth all the
troubleshooting because you will end up with something that will
irritate *many* and be useful to *few*. These drop-down menus are
sometimes useful for folk really familiar with your site and it saves
them clicking through things to get to where they *know* they want to
get to.

You will be well pleased if you get rid of the whole lot and organise
your site so that if someone wants breeders or a calendar, they go to
a page with breeders or calander details. You can have simple local
menus on those pages. I expect you won't believe me and I can hardly
blame you, I have not the time to refer you to all the reasons why I
am confident of this.


I'll have a look at the proper site in those browsers. For this
exercise I loaded the relevent files into my practice directory, prior
to going live, so the files pertaining to the other bits might be
different.

The menu is what the client wants. I confess I've spent way too much
time on flyout/drop-down menus over the last year! Hell, who knows, I
might become an expert!!! Eventually.

It suddenly occurred to me - the meu on the left uses javascript...
maybe that makes a difference in your rendering?

Okay, I have found the solution, in case anyone's interested. A very
concise explanation can be found here:
http://archivist.incutio.com/viewlist/css-discuss/86670

--
== Not nuts, just a little eccentric ==

In article <h3plrt$ar2$1 (AT) news (DOT) eternal-september.org>,
pecan <pecan (AT) NOSPAMrouxville (DOT) info> wrote:

pecan wrote:
....
I have a problem with a flyout menu which I'm doing using CSS.
url: http://www.africanbush.co.za/horseonline1/

It's the menu in the middle : "Business Directory" - if you hover
over Breeders in Firefox it renders correctly, but of course IE
doesn't! In IE it allows the menu behind it to show through.
....

Okay, I have found the solution, in case anyone's interested. A very
concise explanation can be found here:
http://archivist.incutio.com/viewlist/css-discuss/86670

Well done. Thanks for coming back and providing info.

(Now you can concentrate on fixing problems with user text size
enlargement on your page which are quite severe for those who like big
text).

--
dorayme