Solved

Hover only works with mouse over text in IE7?

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

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

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

"In order to have an organized way for empathy mapping, we rely on a psychological model and trying to model it in a simple way, so we will split the board to three section for each persona and a scenario and try to see what those personas would Do,…
Developer portfolios can be a bit of an enigma—how do you present yourself to employers without burying them in lines of code?  A modern portfolio is more than just work samples, it’s also a statement of how you work.
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

863 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

27 Experts available now in Live!

Get 1:1 Help Now