IE7 Ghost Text bug!

**hasankaz** · 08-20-2009, 03:31 PM

Hi everyone,
Sorry I am a slow starter of CSS & came across with this bug recently, I am trying to acheive simple block hover links but some reason If I dont use Float command Firefox is not picking height which is 30px...... & if I use float IE7 start repeating character after last button.

Code:

<style>
a.NavLinks {
	color:#333333;
	margin-top: 1px;
	text-transform:uppercase;
	line-height:30px;
    width:222px;
    padding-left:7px;
    text-decoration:none;
    height:30px;
	font-size:.7em;
background-color:#999999;
    background-image:url("/images/Left_Nav_image.gif");
    background-repeat:repeat-y;

}
a.NavLinks:hover{
	margin-top: 1px;
  	/*float:left;*/
  	width:222px;
  	height:30px;
	color:#999999;
	text-decoration:none;
	text-transform:uppercase;
background-color:#CCCCCC;
	background-image:url("/images/Left_Nav__hoover-image.gif");
  	background-repeat:repeat-y;
}
</style>

<a href="/about/clinical-excellence" class="NavLinks">CLINICAL EXCELLENCE</a>

<a href="/about/performance" class="NavLinks">PERFORMANCE</a>

<a href="/about/management-team" class="NavLinks">MANAGEMENT TEAM</a>

<a href="/about/investors" class="NavLinks">INVESTORS</a>

<a href="/about/strategy" class="NavLinks">STRATEGY & VALUES</a>

<a href="/about/history" class="NavLinks">HISTORY</a>

<a href="/about/corporate" class="NavLinks">CORPORATE SOCIAL RESPONSIBILITY</a>

<a href="/about/news" class="NavLinks">PRESS CENTRE</a>

<a href="/about/contact-us" class="NavLinks" >CONTACT US</a>

Many thanks in advance

**coothead** · 08-21-2009, 06:46 AM

Hi there hasankaz,

this...

Code:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english"> 
<meta http-equiv="Content-Style-Type" content="text/css">

<title></title>

<style type="text/css">
a.NavLinks {
    display:block;
    width:222px;
    line-height:30px;
    padding-left:7px;
    margin-top: 1px;
    font-size:.7em;
    color:#333;
    text-transform:uppercase;
    text-decoration:none;
    background-color:#999;
    background-image:url(/images/Left_Nav_image.gif);
    background-repeat:repeat-y;
 }
a.NavLinks:hover{
    color:#999;
    background-color:#ccc;
    background-image:url(/images/Left_Nav__hoover-image.gif);
    background-repeat:repeat-y;
 }
</style>

</head>
<body>

<div>
<a href="/about/clinical-excellence" class="NavLinks">CLINICAL EXCELLENCE</a>
</div>

</body>
</html>

... looks identical in IE7 and Firefox, using a full DOCTYPE, of course.

coothead

**hasankaz** · 08-21-2009, 08:28 AM

Thanks alot it resolved this

thats shows my novice skills, there is another problem arise with background colour in our Oracle base CMS.

But not to worry, thanks again.

You can close this thread.
regards
Hasan

**coothead** · 08-21-2009, 11:53 AM

No problem, you're very welcome.

Thread: IE7 Ghost Text bug!

Thread Tools

Search Thread

IE7 Ghost Text bug!

The Following User Says Thank You to coothead For This Useful Post:

Thanks

Bookmarks

Bookmarks

Posting Permissions