SitePoint Sponsor |
|
User Tag List
Results 1 to 6 of 6
Thread: IE7 CSS Menu Problems
-
Sep 15, 2006, 00:22 #1
- Join Date
- Jun 2003
- Location
- Manchester, UK
- Posts
- 300
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
IE7 CSS Menu Problems
I've re-coded my CSS files a little to make the site work with IE7 - I've managed to do this OK so far, apart from the CSS dropdown menu.
Site in question : http://www.pcreview.co.uk/
The menu works fine in IE6/FF, however in IE7 it only works if I haven't clicked anywhere on the page already. If I have, the menu sticks and won't hide away once my mouse is moved away.
Is this something wrong with my code, or a bug in IE7?
-
Sep 15, 2006, 00:31 #2
- Join Date
- May 2006
- Location
- Aurora, Illinois
- Posts
- 15,476
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Despite having 116 XHTML validation errors, it's working fine for me on Internet Explorer 7 RC1 (Windows XP Pro, Service Pack 2).
Save the Internet - Use Opera | May my mother rest in peace: 1943-2009
Dan Schulz - Design Team Advisor | Follow me on Twitter
SitePoint References: HTML CSS JavaScript | Become A Guru
WordPress SEO Checklist | What WordPress Plugins Do You Use?
Web Standards Curriculum | Image Free Equal Height Columns
-
Sep 15, 2006, 01:05 #3
- Join Date
- Jun 2003
- Location
- Manchester, UK
- Posts
- 300
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Thanks Dan, I think I've just put a fix in place for the suckerfish CSS menu by adding:
LI:hover UL {
DISPLAY: block
}
LI.over UL {
DISPLAY: block
}
-
Sep 15, 2006, 02:11 #4
- Join Date
- May 2006
- Location
- Aurora, Illinois
- Posts
- 15,476
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Using display: none; and display: block; can cause accessibility issues with some screen readers. Absolute positioning would be better.
Here's an example of an accessible horizontal dropdown menu:
HTML Code:<ul id="menu"> <li><a href="">Main Menu Item</a></li> <li><a href="">Main Menu Item</a></li> <li><a href="">Main Menu Item</a> <ul> <li><a href="">First Sub-Menu Item</a> <ul> <li><a href="">Second Sub-Menu Item</a></li> <li><a href="">Second Sub-Menu Item</a></li> <li><a href="">Second Sub-Menu Item</a></li> </ul> </li> <li><a href="">First Sub-Menu Item</a></li> <li><a href="">First Sub-Menu Item</a></li> <li><a href="">First Sub-Menu Item</a></li> </ul> </li> <li><a href="">Main Menu Item</a> <ul> <li><a href="">First Sub-Menu Item</a></li> <li><a href="">First Sub-Menu Item</a></li> <li><a href="">First Sub-Menu Item</a></li> <li><a href="">First Sub-Menu Item</a></li> </ul> </li> <li><a href="">Main Menu Item</a> <ul> <li><a href="">First Sub-Menu Item</a></li> <li><a href="">First Sub-Menu Item</a></li> <li><a href="">First Sub-Menu Item</a></li> <li><a href="">First Sub-Menu Item</a></li> </ul> </li> <li><a href="">Main Menu Item</a></li> </ul>
Code:* { margin: 0; padding: 0; } #menu, #menu ul { list-style: none; } #menu li { background-color: #909090; color: inherit; display: inline; float: left; position: relative; width: 8em; } #menu li:hover { background-color: #666; color: inherit; } #menu li:hover ul, #menu li.menuHover ul { left: auto; } #menu ul { min-height: 1%; /* this is a fix for IE7's "hasLayout issue" which will allow the dropdowns to work. This declaration is not affected by any other modern browser. */ position: absolute; left: -999em; } #menu ul li { clear: left; margin-top: -1px; width: 9em; } #menu li:hover ul ul, #menu li.menuHover ul ul { min-height: 1%; position: absolute; top: 1px; left: -999em; } #menu ul li:hover ul, #menu ul li.menuHover ul { left: 9em; } #menu ul ul li { width: 10em; } #menu a { background-color: transparent; border: 1px solid #F00; color: #FFF; display: block; line-height: 1.5em; margin-left: -1px; text-align: center; text-decoration: none; } #menu a:hover { background-color: transparent; color: #FFF; }
Save the Internet - Use Opera | May my mother rest in peace: 1943-2009
Dan Schulz - Design Team Advisor | Follow me on Twitter
SitePoint References: HTML CSS JavaScript | Become A Guru
WordPress SEO Checklist | What WordPress Plugins Do You Use?
Web Standards Curriculum | Image Free Equal Height Columns
-
Sep 15, 2006, 02:42 #5
- Join Date
- Jun 2003
- Location
- Manchester, UK
- Posts
- 300
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Thanks once again
I'll take a look at doing this now
-
Sep 15, 2006, 02:59 #6
- Join Date
- May 2006
- Location
- Aurora, Illinois
- Posts
- 15,476
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Don't forget to fix those 116 XHTML validation errors, ok?
Save the Internet - Use Opera | May my mother rest in peace: 1943-2009
Dan Schulz - Design Team Advisor | Follow me on Twitter
SitePoint References: HTML CSS JavaScript | Become A Guru
WordPress SEO Checklist | What WordPress Plugins Do You Use?
Web Standards Curriculum | Image Free Equal Height Columns
Bookmarks