Solved

Hover only works with mouse over text in IE7?

Posted on 2008-06-19
2
434 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

Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

Question has a verified solution.

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

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 …
This article discusses four methods for overlaying images in a container on a web page
Google currently has a new report that is in beta and coming soon to Webmaster Tool accounts. This Micro Tutorial will highlight new features for Google Webmaster Tools.
This Micro Tutorial will demonstrate how nuggets on the Web are formatted by using Chrome Developer Tools. These tools would not only view the site's CSS but it can also modify it and save the CSS to use on your own site.

829 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