Home/ Questions/Q 6847525
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-27T00:45:19+00:00

I am currently struggling with a problem, that I can’t find the reason. Currently

  • 0

I am currently struggling with a problem, that I can’t find the reason.
Currently my anchor hover states are not displaying properly in Firefox and IE. The interesting this is that when I explore with firebug to see if the style is applied, it is there but the browser is not showing it. This is really driving me nuts!

The link is contained in a H1 tag. The same style is applied to the span username, but it is displayed perfectly.

Here is the code, I hope you can solve the mystery!

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
    <tile> test</title>
</head>
<body>

    <div id="content1" class="boxContainer">
    <ul id="leggi-tab-content">
        <li class="anteprimaG">
           <div class="ombraCopertinaG ">
               <img  src="images/copertina-grande.gif" width="118" height="168" alt="Lorem ipsum dolor sit amet...">
               <div class="fantascienzaG">
               /div>
           </div>
           <div class="metadata">
               <span class="star-rating05"> </span> 
               <span>1234567 letture</span> 
           </div>
           <h1 class="truncationL">
               <a class="link_primario" href="http://www.xyz.zz">Lorem ipsum 
               dolor sit amet, consectetur dipiscing elit. Maecenas facilisis 
               porttitor interdum. Phasellusnec arcu quam.</a>
           </h1>
           <span class="username  truncationL">di <a class="link_secondario" href="#">username username username username username username username username username username username username username username username username </a></span>
           <p class="truncationB">“Lorem ipsum dolor sit amet, consectetur 
           adipiscing elit. Maecenas facilisis porttitor interdum. Phasellus 
           nec arcu quam. Donec id leo nibh. Sed vehicula dignissim libero, 
           a vehicula sapien sodales non. Nunc vel metus ante. Fusce pretium 
           convallis cursus. Lorem ipsum dolor sit amet, consectetur adipiscing 
           elit. Maecenas facilisis porttitor interdum. Phasellus nec arcu 
           quam. Donec id leo nibh. Sed vehicula dignissim libero, a vehicula 
           sapien sodales non. Nunc vel metus ante. Fusce pretium convallis 
           cursusLorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas 
           facilisis porttitor interdum. Phasellus nec arcu quam. Donec id leo 
           nibh. Sed vehicula dignissim libero, a vehicula sapien sodales non. 
           Nunc vel metus ante. Fusce pretium convallis cursusLorem ipsum dolor 
           sit amet, consectetur adipiscing elit. Maecenas facilisis porttitor 
           interdum. Phasellus nec arcu quam. Donec id leo nibh. Sed vehicula 
           dignissim libero, a vehicula sapien sodales non. Nunc vel metus ante. 
           Fusce pretium convallis cursus”</p>
    </li>
</ul>
</div>
</body>
</html>

CSS

a.link_primario:link { color: #0d6083; text-decoration:none;}
a.link_primario:visited { color: #0d6083; text-decoration: none;}
a.link_primario:hover { color: #cf1d3c; text-decoration: underline; }
a.link_primario:active { color: #0d6083; text-decoration: none;}

.ombraCopertinaG { 
      background: url(../images/ombra-copertina-grande.png) left bottom no-repeat; 
      position: relative;
      float: left;
      display: inline-block;
  margin-right: 10px;
}

.ombraCopertinaG img{ padding: 0 9px 5px 6px;}

.anteprimaG {margin-bottom: 20px;}

.anteprimaG h1 {
    width: 53.684210526315789473684210526316%; /*510px/950px*/
    margin-bottom: 0;
}

.anteprimaG p {
    height: 111px;
    width: 83.36842105263158%/*807px/950px*/
}

.username { 
    display: inline-block;
    width: 53.684210526315789473684210526316%;/*510px/950px*/
    margin: 9px 0 15px 0;
}

.metadata { float:right;}

.metadata span {
    display:inline-block;
    font-size: 0.75em ;/*12px/16px*/
    vertical-align: middle;
    margin-left:20px;
}

.metadata span:first-child{ 
    margin-left: 50px;
}
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The second link has a class="link_secondario" attribute, yet you only defined:

    a.link_primario:link { color: #0d6083; text-decoration:none;}

    Either change the second’s links attribute to class="link_primario" (if it has the same properties, you do not need two classes) or define:

    a.link_primario:link,a.link_secondario:link
    { color: #0d6083; text-decoration:none; }
    • 0