28172 sujets

CSS et mise en forme, CSS3

[Résolu]Comportement moz sur un a:hover after

J'ai un comportement étrange avec mozilla que je n'ai pas sur les autres navigateurs (webkit, ms)

Le code :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns ="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
    <head>
        <title>-_-</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <link rel="stylesheet" type="text/css" href="./css.css" media="screen" />

    </head>
    <body>
        <div id="content_background">
			<ul>
				<li>
					<a href="#" title="opif">
						<h3>opif</h3>
						<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
							<em>En savoir</em>
						</p>

					</a>
				</li>
				<li>
					<a href="#" title="opif2">
						<h3>opif2</h3>
						<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
							<em>En savoir</em>
						</p>
					</a>
				</li>
			</ul> 
		</div>
    </body>
</html>



html, body, div, img, li, form, fieldset, input, textarea, h1, h2, h3, h4, h5, h6, p, ul, ol, dl, pre, table, blockquote {
    margin: 0;
    padding: 0;
}

a:link, a:visited, a:hover, a:active, a:focus {
    text-decoration: none;
}

html {

}

body {
    font-family: 'Trebuchet MS',Arial,Helvetica,Sans-serif;
    line-height: 20px;
    word-spacing: 1px;
    font-size: 12px;
    color: gray;
}


/*****CONTENU*****/
p {
    font-size: 14px;
    text-align: justify;
    line-height: 20px;
    word-spacing: 1px;
    margin-bottom: 20px;
    padding-bottom: 20px;
}

a:link, a:visited, a:hover, a:active, a:focus {
    text-decoration: none;
}

a {
    color: gray;
}

#content {
    width: 884px;
    padding: 20px 0;
}

#content_background ul {
    list-style: none;
}

#content_background li {
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
    -o-border-radius: 15px;
    border-radius: 15px 15px 15px 15px;
    float: left;
    margin: 0 20px 10px;
    padding: 20px 5px 25px;
    width: 171px;
    cursor: pointer;
}

#content_background li:hover {
    background-color: #d8eaff;
}

#content_background li p {
    text-align: inherit;
    margin-bottom: 0;
    padding-bottom: 0;
}

#content_background li em {
    display: block;
    color: #56616A;
    margin-top: 15px;
    font-weight: bold;
    margin-right: 5px;
    text-align: right;
}

#content_background li em:after {
    content: ' +';
}

#content_background li a:hover em:after {    
    margin-left: 10px;
    content: ' >>';
}


Si vous avez une solution, je suis preneur Smiley cligne
Modifié par Pyroxn (16 Nov 2011 - 00:06)
C'est pas explicite mais tu peux tester le code pour t'en rendre compte. Smiley sweatdrop

Le comportement étrange se trouve sur le hover after comme écris dans le titre (oui il fallait bien une boule de cristal pour trouver ça).
Salut, et bienvenue Smiley smile
Pyroxn a écrit :
Le comportement étrange se trouve sur le hover after comme écris dans le titre (oui il fallait bien une boule de cristal pour trouver ça).

Ben oui mais relis-toi : tu ne décrit absolument pas le comportement étrange en question… Les forumeurs n'ont donc aucun bug à reproduire, juste une indication sur le fait que quelque chose n'est pas mis en forme comme il devrait apparemment l'être… Smiley sweatdrop

Par contre, il y a déjà un problème, c'est que ton code n'est pas valide : un élément de type en ligne (ici <a>) ne peut pas, en XHTML, contenir un élément de type bloc (ici, par exemple <h3> ou <p>). Ça peut clairement amener des différences d'appréciations suivant les navigateurs.
Modifié par audrasjb (15 Nov 2011 - 23:24)
Merci, effectivement ce n'était pas correct! Cela n'a pas résolu le problème, mais m'a permis de voir l'erreur.
En mettant le hover sur <li> plutôt que sur le <a> l'effet indésirable sur moz disparait.

#content_background li:hover em:after {    
    margin-left: 10px;
    content: ' >>';
}
Sujet clos
Aller à