Solved

Hover only works with mouse over text in IE7?

Posted on 2008-06-19
2
433 Views
Last Modified: 2013-12-08
The web page in question is http://www.gmpcpas.com/  -  Safari, FireFox, etc. all look/work fine but IE7 does something I can't figure out how to fix.  In FireFox, when the mouse cursor is placed anywhere over a button on the navigation menu (vertical, left-hand side), the button changes color.  In IE7, the cursor must be over the text portion of the button in order to create this effect.

I didn't create this page, but have been charged with maintaining it.

Here is the CSS for the page:
body { 
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	background-color:#000000
}
 
 
 
 
 
.titleTxt {  font-family: Arial, Helvetica, sans-serif; font-size: 14px; font-weight: bold; color: #1F6E99}
.paragraphTxt {  font-family: Arial, Helvetica, sans-serif; font-size: 12px; line-height: 18px}
.smallTxt {  font-family: Arial, Helvetica, sans-serif; font-size: 11px}
.defaultTxt {  font-family: Arial, Helvetica, sans-serif; font-size: 12px}
 
 
/*a:active {  color: #1F6E99}*/
/*a:hover {  color: #1F6E99}*/
/*a:link {  color: #1F6E99}*/
/*a:visited {  color: #990099}*/
 
.menuTxt1 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight: bold;
	color: #FFFFFF;
	text-decoration: none;
	text-align: right;
	}
	
.menuTxt2 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight: normal;
	color: #FFFFFF;
	text-decoration: none;
	text-align: left;
	}
 
.menuOver {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #000000;
	text-decoration: none;
	display: block;
	padding: 3px;
	border: 1px solid #cccccc;
	border-bottom: 0;
	background: #e6e6e6
	}
 
 
 
 
 
#menu {
	position:absolute;
	left:67px;
	top:116px;
	width:173px;
	height:250px;
	z-index:100
	}
 
#breadcrumbs {
	position:absolute; 
	left:260px; 
	top:130px; 
	width:432px; 
	height:18px; 
	z-index:8
	}
 
 
 
 
 
 
ul {
	margin: 0;
	padding: 0;
	list-style: none;
	width: 173px; /* Width of Menu Items */
	border-bottom: 1px solid #FFFFFF;
	}
 
ul li {
	position: relative;
	}
	
li ul {
	position: absolute;
	left: 172px;
	top: 0;
	display: none;
	}
 
/* Styles for Menu Items */
ul li a {
	display: block;
	text-decoration: none;
	color: #FFFFFF;
	background: #1F6E99; /* IE6 Bug */
	padding: 3px;
	border: 1px solid #FFFFFF;
	border-bottom: 0;
	}
 
/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
/* End */
 
ul li a:hover { 
	color: #FFFFFF; 
	background: #6A98B3
	} /* Hover Styles */
		
li ul li a { 
	padding: 3px; 
	} /* Sub Menu Styles */
		
li:hover ul, li.over ul { 
	display: block;
	} /* The magic */

Open in new window

0
Comment
Question by:moodipaper
2 Comments
 
LVL 30

Accepted Solution

by:
Steggs earned 500 total points
ID: 21824414
Hi,

try adding a width to:

ul li a {
        display: block;
        text-decoration: none;
        color: #FFFFFF;
        background: #1F6E99; /* IE6 Bug */
        padding: 3px;
        border: 1px solid #FFFFFF;
        border-bottom: 0;
        }


Steggs
0
 

Author Closing Comment

by:moodipaper
ID: 31468867
My hero!
0

Featured Post

3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

I've been asked to discuss some of the UX activities that I'm using with my team. Here I will share some details about how we approach UX projects.
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
Shows how to create a shortcut to site-search Experts Exchange using Google in the Chrome browser. This eliminates the need to type out site:experts-exchange.com whenever you want to search the site. Launch the Search Engine Menu: In chrome, via you…

831 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question