Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Hover only works with mouse over text in IE7?

Posted on 2008-06-19
2
Medium Priority
?
451 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:
Mark Steggles earned 2000 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

Simplify Your Workload with One Tool

How do you combat today’s intelligent hacker while managing multiple domains and platforms? By simplifying your workload with one tool. With Lunarpages hosting through Plesk Onyx, you can:

Automate SSL generation and installation with two clicks
Experience total server control

Question has a verified solution.

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

When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
Q&A with Course Creator, Mark Lassoff, on the importance of HTML5 in the career of a modern-day developer.
Any person in technology especially those working for big companies should at least know about the basics of web accessibility. Believe it or not there are even laws in place that require businesses to provide such means for the disabled and aging p…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

704 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