IE7 Ghost Text bug! [Archive] - Dynamic Drive Forums

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.

<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...

<!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. ;)