Problema nella resa dei bordi immagini

[Karnak81]

Salve a tutti!!

Ho una serie di immaginette disposte orizzontalmente in un div, a cui è applicato 1 javascript, e alcuni effetti sul bordo utilizzando gli stati.
Ho un problema proprio nella resa dei bordi.
In Firefox infatti il bordo non circonda l'immagine, ma forma un rettangolino alla sua base, non aderendo quindi all'immagine stessa (praticamente non la circonda).
Ecco il codice:

<div id="imgl">
<h2> Titolo </h2>

<a href="javascript:littlepage1('gallery/1.htm');" onmouseover="window.status='Ingrandisci...'; return true" class="brd">
[img]gallery/1_mini.jpg[/img]</a>

<a href="javascript:littlepage1('gallery/2.htm');" onmouseover="window.status='Ingrandisci...'; return true" class="brd">
[img]gallery/2_mini.jpg[/img]</a>


</div>

e il css:

#imgl{ 
margin: 0 5px 0 5px;
background: #fff;
padding: 80px;
font-size: 13px;
line-height: 19px;
} 

.a1
{ 
margin-left: 3px;
border: 0;
}

#imgl a:link, #imgl a:visited
{ 
text-decoration: none; border: 2px solid #c7c7c7;
}


#imgl a:hover
{ 
text-decoration: none; border: 2px solid #000;
}

Serve il float per caso? Oppure ho semplicemente omesso o dimenticato qualcosa? (come immagino)

Grazie..



Mk

[seed_squall_it]

Hai provato impostando gli elementi <a> e <img /> nel CSS come block-level e assegnando delle dimensioni? Se vuoi affiancare le immagini, potresti impostare gli elementi <a> come flottanti, in modo che diventino implicitamente elementi block-level e si affianchino. Anche se in questo caso, la struttura di markup più corretta sarebbe usare un elenco non ordinato (<ul>) in cui ogni elemento[*] (che sarà flottante) racchiuderà un link.

[Karnak81]

Grazie x le indicazioni!
Ho provato, e semanticamente va bene così..
Ma resta il problema legato ai bordi, e un problema ulteriore legato al float (quando lo applico).
Non riesco a rendere correttamente l'effetto del bordo che cambia colore al passaggio del mouse... Con il sistema usato in precedenza funzionava solo in explorer, provando a cambiare 1 pò le carte come indicato da te.. si incasina ulteriormente.
L'altro problema è legato ai float.
Preciso che le immagini piccole sono una decina, disposte su 2 righe, all'interno di un div con larghezza fissa e margini e padding a 0.
Rendendo le immagini display:block e applicando il float, la distanza tra la prima e la seconda riga è resa diversamente da firefox ed explorer.
Conosci qualche post o tutorial che affronta per bene la questione (o le questioni)?

Mk

[seed_squall_it]

Prova questo codice:

CODICE CSS:

img {
border: none; /* Elimina il bordo delle immagini */
}

#img1 {
width: 100%; /* Puoi impostarlo come vuoi. Determina la larghezza massima al'interno della quale gli elementi[*] si affiancheranno, prima di disporsi su una nuova riga */
}

#img1 ul {
padding: 0;
margin: 0;
}

#menu ul li {
list-style: none;
width: 56px; /* Questo valore è la somma della larghezza + il padding orizzontale + il border orizzontale + il margin orizzontale della regola seguente. Serve per evitare gli errori di IE coi box flottanti non dimensionati */
padding: 0;
margin: 0;
float: left; /* Affianca e rende implicitamente block-level gli elementi[*] */
}

#img1 ul li a {
text-decoration: none;
width: 40px;
height: 40px;
padding: 4px; /* Questo valore è la somma del valore di padding e border della regola seguente */
border: none;
margin: 4px;
display: inline; /* Risolve il problema dei margini raddoppiati sullo stesso lato del float di IE */
float: left; /* Risolve un problema di IE per Mac con gli elementi <a> impostati come block-level contenuti in elementi di lista */
cursor: pointer; /* Risolve un problema di IE che altrimenti non visualizza la "manina" */
}

#img1 ul li a:hover {
padding: 2px; /* Questo sommato a border deve dare il valore di padding della regola precedente */
border: 2px solid #00f; /* Questo sommato a padding deve dare il valore di padding della regola precedente */
}

#img1 ul li a img {
width: 40px;
height: 40px;
display: block; /* Fa in modo che l'immagine influenzi la larghezza dell'elemento <a> in cui è contenuta, evitando gli errori di box model di IE 5 */
}

CODICE XHTML:

<div id="img1">
<h2>Titolo</h2>
<ul>[*][img]gallery/1_mini.jpg[/img][*][img]gallery/2_mini.jpg[/img][/list]
</div>

E' commentato dove serve e usa misure che ho deciso io per padding, border e margin...quindi poi sta a te modificarle come meglio credi. Gli elementi[*] che contengono i link alle immagini si dispongono uno di fianco all'altro finché non raggiungono la larghezza dell'elemento "img1", quindi vanno a capo e si dispongono affiancati su una nuova riga. Provato su IE 5 e Firefox 1.5.0.4 con DTD XHTML 1.0 Strict...fammi sapere se su IE 6 dà qualche problema.

[Karnak81]

Ciao!!
Il tuo css ha funzionato... solo che, non riuscendo a gestire bene i padding, ho applicato poche regolette apprese da un tutorial, che mi consentono di rendere cmq crossbrowser l'effetto. E infatti ho risolto in pochi secondi!! Fammi sapere se ha problemi.. (l'ho provato su explorer7, 6, firefox 1.0.4 e opera 8.02)
Resta solo un problema. Come mai explorer mi raddoppia i margini (o viceversa)?
Mettiamo che le immagini nel div imgl2 si dispongano su 2 righe. Ebbene explorer raddoppierà tutti i margini inferiori!!!
Ho usato un <hr /> invisibile per evitare che il secondo div si sovrapponesse al primo (ma anche qui mi sa che fosse possibile evitarlo..sebbene io non abbia capito la natura del problema)
Anche la gestione di quel paragrafo alla fine diventa problematica..(devo ancora occuparmene..ma è sempre 1 questione di margini)

ecco il codice:

     <div id="cont">
			
	<div id="imglg">
		
		<div id="imgl2">

		<h1> Galleria di Immagini </h1>
		

 commento </p>

		<h2 Titolo 1 </h2>
			<ul>
			[*][img]gallery/1_mini.jpg[/img]
			[*][img]gallery/2_mini.jpg[/img]
 
			

			[/list]
		</div>
		
		<hr />
		
		<div id="imgl3">
					<h2> Titolo 2 </h2>
			<ul>
			[*][img]gallery/10_mini.jpg[/img]
			[*][img]gallery/20_mini.jpg[/img]
			
			[/list]
			
		</div>
					
			<p class="xx"> torna su &gt;</p>
	</div>	
      </div>

e il css:

#imgl2 h1 { 
margin-top: 20px;
margin-bottom: 10px;
font-size: 30px;
}

#imgl2 p { 
margin-bottom: 40px;
}

#imglg h2 { 
margin-top: 40px;
font-size: 18px;
}

#imglg { 
margin: 0 8px 0 8px;
background: #fff;
padding: 80px;
font-size: 13px;
line-height: 19px;   
} 

#imglg hr
{ 
clear: both;
visibility: hidden;
margin: 0;
padding: 0;
} 

#imgl2, #imgl3
{ 
width: 400px;
} 


#imglg ul{ 
padding: 0;
margin: 0;
} 

#imglg ul li { 
padding: 0;
margin: 0;
float: left;
list-style-type: none;
width: 56px;
} 

#imgl2 ul li a { 
text-decoration: none;
width: 40px;
height: 40px;
padding: 0px;
border: 0 !important; /* siccome gli altri browser nn hanno bisogno del border, uso questo */
border: 2px solid #515151; /* ie */
margin: 8px;
display: inline;
float: left;
cursor: pointer;
} 

#imglg ul li a:hover { 
padding: 0;
border: 2px solid #c7c7c7;
} 

#imglg ul li a img { 
width: 40px;
height: 40px;
display: block;
border: 2px solid #515151 !important; /*opera e mozilla*/
border: 0;  /* ie */
} 

#imgl ul li a img:hover { 
border: 2px solid #c7c7c7 !important;  /*opera e mozilla*/
} 


#imglg p{ 
clear: both;
}

Ti ho inserito tutto così capisci meglio anche come ho pensato di annidare i div..
Grazie per l'aiuto!!

[seed_squall_it]

Se Explorer ti raddoppia i margini è il classico bug dei margini raddoppiati in presenza del float. Se guardi il CSS che ti ho postato nel msg precedente, vedrai una dichiarazione display: inline affiancata dal commento "Risolve il problema dei margini raddoppiati sullo stesso lato del float di IE". Se hai un elemento flottante a sinistra e gli imposti un margine sinistro, IE ti raddoppia quel margine. Lo stesso avviene se flotti un elemento a destra e gli imposti un margin-right. Usando display: inline nella regola di stile dell'elemento flottato risolvi il problema.

[Karnak81]

Il problema purtroppo non è questo, o perlomeno non sembra.
Infatti explorer raddoppia (o quasi..non è questione proprio di raddoppiare.. alcuni margini firefox non li legge, altri sono + o - il doppio) tutti i margini degli elementi all'interno del div!!
Dell'img, dell' h2, del p...
Ancora..se non metto i margini all' h1, in explorer rientra addirittura dietro il box, così che la parte superiore del titolo è nascosta. Questi margini qui firefox non li calcola proprio.
L'xhtml e il css sono quelli che vedi. Ma nella resa ho questo problema.
Può dipendere dal fatto che il div principale "cont" è dentro un div flottato a destra?
Sto cercando di venirne a capo..

Cmq...qualcuno conosce un buon sito dove sono raccolti tutti i bugs legati alla proprietà float con relativi hack e soluzioni???

Thanks

Mk

[Mich_]

Questo lo hai visto? Altrimenti vai sul sito di Gabriele: lui ne sa una piu` del diavolo
http://forum.html.it/forum/showthrea...94#post9419894

[thomas_anderson]

Grazie mich!
due sono i siti che mi permetto di consigliare:

http://www.positioniseverything.net/
http://www.brunildo.org/test/

in particolare l'opzione di usare i commenti condizionali è la più indicata.

un'altra soluzione è quella di impostare i margini solo per[*] e margin: 0 padding: 0 per <a>. se il tuo documento è in XHTML 1.0 strict, IE si comporta bene.

li {
  float: left;
  display: inline;
  margin: 0 0.5em;
  padding: 0;
}