/    Sign up×
Community /Pin to ProfileBookmark

csshover.htc menu IE problem

Copy linkTweet thisAlerts:
May 09.2008

I’m using csshover.htc to create a pop-out menu – in Firefox it looks great, and it appears ok in IE7, however in IE6 and below the menu is rendering horribly – see [url]http://www.athenecreations.co.uk/cf/[/url]

There are big gaps between each top level item, and then a gap when the sub-menus pop out, which means by the time you’ve moused across to the sub-menu, it disappears as it assumes the mouse has gone ‘off’ the menu!

Its v frustrating… any ideas??

Thanks
LP

JUST NOTICED: In Firefox, Safari and IE6< the sub-menu also cuts off after 10th item, which could be due to a ‘min-height’ setting in the stylesheet #content DIV:

#content {
width:100%;
margin-top:10px;
min-height: 380px;
padding-left: 2px;
clear: both;
overflow: hidden;
}
* html #content {
height: 380px;
overflow: hidden;
}

HELP!?!?!?!?!

to post a comment
CSS

5 Comments(s) ↴

Copy linkTweet thisAlerts:
@CentauriMay 09.2008 — This is a common IE problem when the <a>s are set to block display with no width. The cure is to float the <li>s, which means their width will need to be set to 100% :[CODE]#popout li {
position: relative;
[COLOR="Red"]float: left;
width: 100%;[/COLOR]
}[/CODE]
Copy linkTweet thisAlerts:
@LouPhiauthorMay 09.2008 — Brilliant - thats fixed the problem with the gaps! Thanks for that.

Any ideas on why the sub-menus are cutting off, or more specifically what I need to do with the #content min-height to stop the #popout menu from displaying the full sub-menus if they run further than the min-height?

If you hover over the top level menu item for 'Audit' this should have 14 items in, IE displays them all, but Firefox/Safari both cut off....

In fact... IE6< cuts EVERYTHING off (ie, other pages too) so seems to be ignoring the min-height. In fact, I'll raise this as a new thread ?)

Thanks again

LouPhi
Copy linkTweet thisAlerts:
@CentauriMay 09.2008 — It is the overflow:hidden that is the problem - removing that should fix it.
[CODE]#content {
width:100%;
margin-top:10px;
min-height: 380px;
padding-left: 2px;
clear: both;
[COLOR="Red"]overflow: hidden;[/COLOR]
}
* html #content {
height: 380px;
[COLOR="Red"]overflow: hidden;[/COLOR]
}[/CODE]
Copy linkTweet thisAlerts:
@LouPhiauthorMay 09.2008 — So simple.... I should have been able to work that out for myself - sometimes you're so close to something to you can't see what it is!

Thanks for your help!

Lou
Copy linkTweet thisAlerts:
@LouPhiauthorMay 09.2008 — I've noticed another problem in IE6<...

When a sub-menu is displayed, after mousing across to the sub-menu it only stays visible while the mouse is on the top item, any further down and the sub-menu disappears!!!

Any ideas how to keep the sub-menus visible so that all the options can be selected??

LP
×

Success!

Help @LouPhi spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.17,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...