Validering av CSS Mouseover

[phun-ky 0]

Jeg har en mouseover i mitt arkiv, og denne mousoveren bruker CSS istedenfor javascript/dhtml. Eneste problemet jeg står med er valideringen.

 

http://www.phun-ky.net/2006/ <-- arkivet

 

http://validator.w3.org/check?uri=http%3A%...&doctype=Inline <-- vailderingen, ikke godkjent.

 

Aaken er jo at mouseoveren er lagt inni en still-løs <span></span>, og inne i den er det en del tagger som ikke egentlig hører hjemme i en <span> tag.. Noen som vet hvordan jeg kan få den validert?

 

CSS koden er vel ikke så viktig, men selve xhtml'en er:

 

<ul><li>2006-08-04T13:56:06+01:00 - <a href="/2006/08/castro_for_cuba" class="info">castro for cuba?<span>
<div class="entryImage">

   <img src="/images/blog/thumbe7dc9ba36a726bc1161d86692f6271f5.jpg" alt="castro for cuba?" />
 </div>
<div class="entry">Lately the news had a brief(!?) moment from news from the Middle East. The news came from the only communist state in the Western Hemisphere, Cuba. We have not neglected that Fidel Castro is getting o...</p></div>
</span></a></li> </ul>

Edited August 4, 2006 by phun-ky

[haugsand 14]

Problemet ligger primært i a-elementet, som ikke kan inneholde blokk-elementer.

 

Mitt forslag er at du bytter ut div med span for å løse den floken. Du har uansett lov til å legge til display: block; på span-elementene.

[phun-ky 0]

Nå ja, den blir validert hvis jeg bytter, men da virker de ikke helt som de skal fungere :/

[haugsand 14]

Nå ja, den blir validert hvis jeg bytter, men da virker de ikke helt som de skal  fungere :/

6616488[/snapback]

Hm, merkelig. Den eneste forskjellen på span og div er jo at de henholdsvis er inline- og blokkelement. Denne visuelle forskjellen skal det være mulig å fjerne ved hjelp av CSS, ved å legge til display: block;

 

Sikker på at du ikke har glemt å bestemme noe vha CSS?

[phun-ky 0]

bruker denne css'en

]a.info{
   position:relative; /*this is the key*/
   z-index:24; 
color:#990000;
   text-decoration:none}

a.info:hover{z-index:25; color:#FFFFFF;
background-color: #990000;
border-bottom:1px solid #000000;

}

a.info span{display: none}

a.info:hover span{ /*the span will display just on :hover state*/
   display:block;
   position:absolute;
   top:2em; left:2em; width:15em;
   border:1px solid #990000;
   background-color:#FFFFFF; color:#990000;
padding: 8px;
width:450px;
   text-align: center}

.entryImage{
float: left;
width:108px;
max-height:83px;
border:1px solid #990000;
margin:5px auto;
}
.entry{

width:410px;
padding:0px 10px;
margin:0px;
/*height:208px;*/
float: left;
text-align:left;
line-height:1.7em;
word-spacing:0.2em;

}

bruker jeg display: block; med span så endres ingenting.

Edited August 5, 2006 by phun-ky