Solved

Hover only works with mouse over text in IE7?

Posted on 2008-06-19
2
444 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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

SharePoint Admin?

Enable Your Employees To Focus On The Core With Intuitive Onscreen Guidance That is With You At The Moment of Need.

Question has a verified solution.

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

This article will inform Clients about common and important expectations from the freelancers (Experts) who are looking at your Gig.
CTAs encourage people to do something specific to show interest in your company, product or service. Keep reading to learn why CTAs should always be thought of as extremely important, albeit small, sections of websites.
This video teaches users how to migrate an existing Wordpress website to a new domain.
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

628 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