7 replies [Last post]
gn0rt0n
Offline
newbie
Last seen: 16 years 27 weeks ago
Joined: 2004-11-04
Posts: 7
Points: 0

I need some help here before I break something. I have implemented a 2 column layout based of the CSSGenerator on this site. I have also tried to implement various CSS Hover menus from different sites.

I tried the hover menu from this site, as well as 2 different variations from A List Apart.

The current site has a version from ALA.

The problem is the same, regardless. When I set the z-index property, Mozilla will hover the menu above the middle (content) column.

However, I am not able to get IE to hover above the content column and have tried everything I can think of.

You can view the site here:

http://dev.highlandcity.org

CSS is here:

http://dev.highlandcity.org/css/hc.css

I would be deeply appreciative of any help you can give me.

Thanks,
Gary

DCElliott
DCElliott's picture
Offline
Leader
Halifax, Canada
Last seen: 4 years 1 week ago
Halifax, Canada
Timezone: GMT-3
Joined: 2004-03-22
Posts: 828
Points: 0

CSSGenerator Layout and Hover CSS Menu

My IE5.5 won't display the the left column at all.

I worry that there is too much div nesting going on - more than necessary from what I see. You do have a z-index of -1 on your .content - that may be inherited in an unusual manner when you have something as position absolute and with a high z-index. I haven't experimented with it but I would suggest taking the -1 off content would be a start.

DE

David Elliott

Before you ask
LearnXHTML|CSS
ValidateHTML|CSS

gn0rt0n
Offline
newbie
Last seen: 16 years 27 weeks ago
Joined: 2004-11-04
Posts: 7
Points: 0

CSSGenerator Layout and Hover CSS Menu

Thanks for the feedback.

The -1 z-index was some desparation I tried :oops:

I have simplified the content even a bit more, but am still at a loss. I tried it in 5.5 and did verify what you saw regarding the left col. I am not sure what is causing that, so I will keep looking.

I am just baffled at this point.

-Gary

gn0rt0n
Offline
newbie
Last seen: 16 years 27 weeks ago
Joined: 2004-11-04
Posts: 7
Points: 0

CSSGenerator Layout and Hover CSS Menu

It seems the IE 5.5 was caused by the following code:

/*printer styles*/
@media print{
/*hide the left column when printing*/
#leftcol{display:none;}
#outer{border-left:0;}
}

I got this directly from the CSSGenerator. Perhaps I have missed something. For the time being, I have removed it.

-Gary

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 week 4 days ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5343
Points: 2964

CSSGenerator Layout and Hover CSS Menu

Hi gn0rt0n,
Sounds like your on the right track using z-index, but use positive values.
http://www.csscreator.com/attributes/properties/z-index

Position the menu relative or absolute and give it a z-index of 100;

Hope that helps

gn0rt0n
Offline
newbie
Last seen: 16 years 27 weeks ago
Joined: 2004-11-04
Posts: 7
Points: 0

CSSGenerator Layout and Hover CSS Menu

Tony,

Thanks for the reply. I have removed the negative value, but the problem still exists.

Is there any known problem in IE when trying to display an Absolute positioned element over a floated element (content col in this case)?

I have had this code working before but not used inside a full CSS layout like the Generator produces.

TIA,
Gary

gn0rt0n
Offline
newbie
Last seen: 16 years 27 weeks ago
Joined: 2004-11-04
Posts: 7
Points: 0

CSSGenerator Layout and Hover CSS Menu

Ok. I need some help with an explanation here.

When I remove:

position: relative;

from
#maincol

Then the menu starts working in IE. Can someone please help me understand the cause/effect of this and perhaps point out any future problem I would have by leaving the position:relative out of the css?

I assume the generator code has it there for a reason.

TIA,
Gary

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 week 4 days ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5343
Points: 2964

CSSGenerator Layout and Hover CSS Menu

Hi gn0rt0n,
When using floats adding position relative removes a lot of potential IE bugs.

If you have removed it and tested the page in as many browsers as possible without any problems then of course you are safe to remove it Cool

Hope that helps