Background-image e x-pos confusa da IE

**madai** · 05-11-2007, 16:46

Salve a tutti,

ho un problema con IE6 e 7 (i due browser con i quali ho testato la pagina a parte firefox con cui funziona perfettamente), riguarda la background-image che voglio dare ad una serie link all'interno di un div con larghezza fissa. Se il testo di un link è costretto a mettersi su due righe (va a capo ovviamente quando non ci sta dentro al div a larghezza fissa) succede che la background-image non viene visualizzata correttamente.

Ecco un esempio: http://www.ischiablog.it/test.htm

Incollate questo link in Internet Explorer, noterete che l'immagine di sfondo del LINK2 va a posizionarsi non subito prima del reale inizio del link ma prende come inizio la parte di link che va a capo. È molto più semplice andare a vedere che spiegarlo.

Ad ogni modo riposto qui anche il codice html della pagina di test linkata sopra:

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
<title>Untitled Document</title>
<style>
body {
font-family:arial,helvetica,verdana,sans-serif;
font-size:14px;
}

.links {
width:200px;
}

.links a {
background-image:url(/NewBlog/images/favourite_yell.gif);
background-repeat:no-repeat;
background-position:0px 3px;
color:#000000;
padding:4px 0pt 4px 16px;
text-decoration:none;
}
</style>
</head>

<body>
<div class="links">
	LINK 1: per questo link l'immagine viene visualizzata correttamente
	LINK 2: per quest'altro iniziano i problemi in quanto IE sembra prendere come x-pos non l'inizio del link reale ma quello della parte di link che va a capo
</div>
</body>
</html>

Spero possiate aiutarmi.

**H5N1_Aviaria** · 05-11-2007, 17:41

IE ha sempre problemi con gli elementi inline.
Prova ad aggiungere all'elemento "A" display : block
Il problema è proprio nel BOX model utilizzato d IE.
Se non vuoi che l'elemento A sia BLOCK ma INLINE puoi usare lo STRONG(opportunamente settato con display : inline-block) dentro l'elemento A:

Codice PHP:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />

<title>Untitled Document</title>

<style>

body {

font-family:arial,helvetica,verdana,sans-serif;

font-size:14px;

}



.links {

width:200px;

}



.links a {

padding: 4px 0 4px 0;

text-decoration:none;

color:#000000;

}

.links strong{

padding:0 0 0 16px;

background : url(favourite_yell.gif) 0 0 no-repeat;

display : inline-block;

width : auto;

}

</style>

</head>



<body>

<div class="links">

    <a href="#link1">[b]LINK 1[/b]: per questo link l'immagine viene 

    visualizzata correttamente</a>

    <a href="#link2">[b]LINK 2[/b]: per quest'altro iniziano i 

    problemi in quanto IE sembra prendere come x-pos non l'inizio del link reale 

    ma quello della parte di link che va a capo</a>

</div>

</body>

</html>

**madai** · 06-11-2007, 12:41

Grazie, ho optato per una diversa visualizzazione dei link così da potergli dare il "block".

Del resto IE oltre al problema descritto sopra me ne dava anche un altro... meglio dargli il block ed avere un buon compromesso.

Discussione: Background-image e x-pos confusa da IE

Strumenti discussione

Ricerca discussione

Visualizza

Background-image e x-pos confusa da IE

Permessi di invio