DIV-uri cu border efect blur

Salutare,

Am facut un site, pe care l-am pus pentru moment aici: http://www.adrian-tu...;page=obiective

In Firefox, Chrome si IE8 arata exact asa cum ar trebui. In IE6 si IE7, bordurile sunt total nealiniate. Am atasat si 2 screenshot-uri. Cum as putea sa rezolv aceasta problema?. Ideea e ca eu am testat site-ul doar cu Firefox, Chrome si IE8 (ceea ce aveam instalat pe PC). Iar acum, cand trebuie pus online, mi-am dat seama ca se vede total aiurea pe versiuni de IE mai vechi.

Va multumesc!

Din cate am vazut din codul sursa , ai lucrat cu div-uri pe care le-ai pozitionat prin float . Incearca sa pui cate un padding:0px; sau margin:0px; , acolo unde apar unele probleme de vizualizare , de pozitionare , a div-urilor.
Ai fi putut realiza pozitionarea div-urilor si prin display:inline-block;
Apoi le ofereai ce atribute doreai tu , in principal width si height .

Peste tot padding si margin sunt 0px. Doar pe tag-ul <p> am padding-left:10px, dar nu cred ca are legatura. Imaginile nu sunt aliniate cum trebuie pe verticala (oricum, am incercat sa scot si acel padding-left dar fara niciun rezultat).

Nu stiu daca ai observat, dar imaginea de sus si de jos care formeaza border-ul, sunt "asezate" cu style="position:relative; top:980px;". Sa fie acesta motivul? Versiunile mai vechi de IE sa interpreteze gresit distanta de sus pana la elementul respectiv? Alta idee nu mi-a venit.

Si inca ceva... pentru coloana de la meniul 2, cele 2 imagini sunt inserate una imediat dupa cealalta:

<img src="../images/meniu2_bottom.png" alt="bg" title="bg" />
<img src="../images/meniu2_top.png" alt="bg" title="bg" />

Cu toate acestea, pe versiunile mai vechi de IE apare un spatiu intre ele (asa cum se vede si in imaginea atasata in primul post)...

Offf... nu reusesc sa inteleg ceva... Am urmatorul cod sursa:

<div style="width:185px; border:1px solid black;">
	<img src="meniu2_bottom.png" alt="bg" style="padding:0px; margin:0px;"/>
	<img src="meniu2_top.png" alt="bg" style="padding:0px; margin:0px;" />
</div>

Doar atat. Nimic altceva. Si in acest caz, imaginile sunt afisate cu un spatiu intre ele pe IE6 (a se vedea in imaginea atasata). Cum as putea rezolva problema? Poate ca aceasta ar fi si rezolvarea pentru site-ul meu...
Va multumesc.

Internet explorer 6 e cel mai prost browser ever made
Problema asta apare din cauza ca el considera faptul ca ai apasat enter dupa fiecare rand de cod ca un <br />
Un workarround nasphet ar fi sa scrii tot codul pe o singura line fara sa apesi pe enter ceva de genul:

<div style="width:185px; border:1px solid black;"><img src="meniu2_bottom.png" alt="bg" style="padding:0px; margin:0px;"/><img src="meniu2_top.png" alt="bg" style="padding:0px; margin:0px;" /></div>

spatiul ala dispare si daca adaugi la  * { font-size: 0px;} lasand codul formatat normal

Edited by onlyone, 17 August 2010 - 09:38.

Offf... nu pot sa cred... Ar trebui sa se interzica folosirea IE6...  

Solutia propusa de tine functioneaza, dar nu prea as vrea sa imi scriu tot site-ul intr-o singura linie... Oricum, probabil ca aceasta este cauza pentru care toate acele imagini sunt decalate.

Dar cred ca am gasit o metoda putin mai "eleganta":

<style type="text/css">
br.fara_spatii {padding:0px; margin:0px;}
</style>

<div style="width:185px; border:1px solid black;">
	<img src="meniu2_bottom.png" alt="bg" style="padding:0px; margin:0px;"/><br class="fara_spatii" />
	<img src="meniu2_top.png" alt="bg" style="padding:0px; margin:0px;" /><br class="fara_spatii" />
</div>

O sa ma apuc de modificat si va anunt daca este chiar o solutie buna.

incearca sa pui pe o linie doar acolo unde se invecineaza divurile sau imaginile si vezi ce iese, nu si codul din interiorul divurilor

Edited by onlyone, 17 August 2010 - 10:15.