Fixes #3770 CSS only site menu that works in IE7

4 files changed, 73 insertions, 98 deletions

diff --git a/js/lib/ui.js b/js/lib/ui.js
index 46e418e8b..7abf7626f 100644
--- a/js/lib/ui.js
+++ b/js/lib/ui.js
@@ -22,13 +22,6 @@ elgg.ui.init = function () {
 	if ($('.elgg-input-date').length) {
 		elgg.ui.initDatePicker();
 	}
-
-	// fix for ie7 CSS issue on menu dropdown
-	// open the menu when you hover over it, close when you click off of it.
-	// @todo This should be possible with CSS. Anyone want to tame the beast, go for it.
-	if ($.browser.msie && $.browser.version <= 7) {
-		$('.elgg-menu-site > .elgg-more').live('mouseenter', elgg.ui.ie7MenuFixMouseEnter)
-	}
 }
 
 /**
@@ -282,32 +275,6 @@ elgg.ui.initDatePicker = function() {
 	});
 }
 
-/**
- * IE 7 doesn't like our site menu system CSS, so open it with JS.
- */
-elgg.ui.ie7MenuFixMouseEnter = function() {
-	$('.elgg-menu-site .elgg-menu-site-more').css('display', 'block');
-	$('.elgg-menu-site .elgg-more > a')
-		.css('background-color', 'white')
-		.css('color', '#555')
-
-	$body = $('body');
-	if (!$body.data('hasIe7Clear')) {
-		$body.live('click', elgg.ui.ie7MenuClear);
-		$body.data('hasIe7Clear', true);
-	}
-	
-}
-
-/**
- * Close the menu when clicking on the body
- */
-elgg.ui.ie7MenuClear = function() {
-	$('.elgg-menu-site .elgg-menu-site-more').css('display', 'none');
-	$('.elgg-menu-site .elgg-more > a')
-		.css('background-color', 'transparent')
-		.css('color', 'white')
-}
 
 elgg.register_hook_handler('init', 'system', elgg.ui.init);
 elgg.register_hook_handler('getOptions', 'ui.popup', elgg.ui.LoginHandler);
\ No newline at end of file
diff --git a/views/default/css/elements/navigation.php b/views/default/css/elements/navigation.php
index b5388715e..9eef96eb9 100644
--- a/views/default/css/elements/navigation.php
+++ b/views/default/css/elements/navigation.php
@@ -169,95 +169,100 @@
 }
 
 .elgg-menu-site > li > a {
-	font-weight: bold;
-	padding: 3px 13px 0px 13px;
-	height: 20px;
+    font-weight: bold;
+    padding: 3px 13px 0px 13px;
+    height: 20px;
 }
 
 .elgg-menu-site > li > a:hover {
-	text-decoration: none;
+    text-decoration: none;
 }
 
-
 .elgg-menu-site-default {
-	position: absolute;
-	bottom: 0;
-	left: 0;
-	height: 23px;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    height: 23px;
 }
 
 .elgg-menu-site-default > li {
-	float: left;
-	margin-right: 1px;
+    float: left;
+    margin-right: 1px;
 }
 
-.elgg-menu-site-default > li > a {color: white}
+.elgg-menu-site-default > li > a {
+    color: white;
+}
 
+.elgg-menu-site > li > ul {
+    display: none;
+    background-color: white;
+}
+
+.elgg-menu-site > li:hover > ul {
+    display: block;
+}
 
 .elgg-menu-site-default > .elgg-state-selected > a,
 .elgg-menu-site-default > li:hover > a {
-	background: white;
-	color: #555;
-	
-	-webkit-box-shadow: 2px -1px 1px rgba(0, 0, 0, 0.25);
-	-moz-box-shadow: 2px -1px 1px rgba(0, 0, 0, 0.25);
-	box-shadow: 2px -1px 1px rgba(0, 0, 0, 0.25);
-	
-	-webkit-border-radius: 4px 4px 0 0;
-	-moz-border-radius: 4px 4px 0 0;
-	border-radius: 4px 4px 0 0;
+    background: white;
+    color: #555;
+
+    -webkit-box-shadow: 2px -1px 1px rgba(0, 0, 0, 0.25);
+    -moz-box-shadow: 2px -1px 1px rgba(0, 0, 0, 0.25);
+    box-shadow: 2px -1px 1px rgba(0, 0, 0, 0.25);
+
+    -webkit-border-radius: 4px 4px 0 0;
+    -moz-border-radius: 4px 4px 0 0;
+    border-radius: 4px 4px 0 0;
 }
 
 .elgg-menu-site-more {
-	display: none;
-	position: relative;
-	left: -1px;
-	width: 100%;
-	z-index: 1;
-	min-width: 150px;
-	border: 1px solid #999;
-	border-top: 0;
-	
-	-webkit-border-radius: 0 0 4px 4px;
-	-moz-border-radius: 0 0 4px 4px;
-	border-radius: 0 0 4px 4px;
-	
-	-webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.25);
-	-moz-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.25);
-	box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.25);
-}
+    position: relative;
+    left: -1px;
+    width: 100%;
+    min-width: 150px;
+    border: 1px solid #999;
+    border-top: 0;
 
-li:hover > .elgg-menu-site-more {
-	display: block;
+    -webkit-border-radius: 0 0 4px 4px;
+    -moz-border-radius: 0 0 4px 4px;
+    border-radius: 0 0 4px 4px;
+
+    -webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.25);
+    -moz-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.25);
+    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.25);
 }
 
 .elgg-menu-site-more > li > a {
-	background: white;
-	color: #555;
-	
-	-webkit-border-radius: 0;
-	-moz-border-radius: 0;
-	border-radius: 0;
-	
-	-webkit-box-shadow: none;
-	-moz-box-shadow: none;
-	box-shadow: none;
+    background-color: white;
+    color: #555;
+
+    -webkit-border-radius: 0;
+    -moz-border-radius: 0;
+    border-radius: 0;
+
+    -webkit-box-shadow: none;
+    -moz-box-shadow: none;
+    box-shadow: none;
 }
+
 .elgg-menu-site-more > li > a:hover {
-	background: #4690D6;
-	color: white;
+    background: #4690D6;
+    color: white;
 }
+
 .elgg-menu-site-more > li:last-child > a,
 .elgg-menu-site-more > li:last-child > a:hover {
-	-webkit-border-radius: 0 0 4px 4px;
-	-moz-border-radius: 0 0 4px 4px;
-	border-radius: 0 0 4px 4px;
+    -webkit-border-radius: 0 0 4px 4px;
+    -moz-border-radius: 0 0 4px 4px;
+    border-radius: 0 0 4px 4px;
 }
 
 .elgg-more > a:before {
-	content: "\25BC";
-	font-size: smaller;
-	margin-right: 4px;
+    content: "\25BC";
+    font-size: smaller;
+    margin-right: 4px;
 }
 
 /* ***************************************
diff --git a/views/default/css/ie.php b/views/default/css/ie.php
index cb4ede0ae..c5edefd4c 100644
--- a/views/default/css/ie.php
+++ b/views/default/css/ie.php
@@ -1,11 +1,14 @@
 /**
- * elgg_layout css for Internet Explorer > ie6
- * @uses $vars['wwwroot'] The site URL
-*/
+ * CSS for Internet Explorer for versions > ie6
+ */
+
 * {zoom: 1;} /* trigger hasLayout in IE */
 
-/* tools drop-down menu */
-#elgg-header {z-index:1;}
+/* site menu drop-down for IE7 */
+.elgg-page-header {
+    z-index: 1;
+}
+
 .navigation li a:hover ul {display:block; position:absolute; top:21px; left:0;}
 .navigation li a:hover ul li a {display:block;}
 .navigation li.navigation-more ul li a {width:150px;background-color: #dedede;}
diff --git a/views/default/navigation/menu/site.php b/views/default/navigation/menu/site.php
index 1409f54af..e2d3aa8fa 100644
--- a/views/default/navigation/menu/site.php
+++ b/views/default/navigation/menu/site.php
@@ -15,7 +15,7 @@ if (isset($vars['menu']['more'])) {
 	echo '<li class="elgg-more">';
 
 	$more = elgg_echo('more');
-	echo "<a title=\"$more\">$more</a>";
+	echo "<a href=\"#\">$more</a>";
 	
 	echo elgg_view('navigation/menu/elements/section', array(
 		'class' => 'elgg-menu elgg-menu-site elgg-menu-site-more',