Solved

Hover only works with mouse over text in IE7?

Posted on 2008-06-19
2
427 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
Comment Utility
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
Comment Utility
My hero!
0

Featured Post

6 Surprising Benefits of Threat Intelligence

All sorts of threat intelligence is available on the web. Intelligence you can learn from, and use to anticipate and prepare for future attacks.

Join & Write a Comment

Password hashing is better than message digests or encryption, and you should be using it instead of message digests or encryption.  Find out why and how in this article, which supplements the original article on PHP Client Registration, Login, Logo…
Although it can be difficult to imagine, someday your child will have a career of his or her own. He or she will likely start a family, buy a home and start having their own children. So, while being a kid is still extremely important, it’s also …
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
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…

743 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

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now