ugrás a tartalomhoz

Floated link nem mutat háttérképet és bordert IE-ben

Ustak · 2009. Jún. 10. (Sze), 13.13
Sziasztok!

itt egy kezdődő weboldal. A magam pici képét szeretném hoverrel láthatóvá tenni, mely működik is ff alatt, de ie6 és ie7 alatt valamiért nem mutatja a bordert sem, valamint a háttérképet sem, ám maga a 64px X 64px -es link kattintható maradt, és működik.
Persze meg tudnám oldani mondjuk egy absolute positioningal, a contentet meg balra tolnám marginnal, de akkor is bosszant.
Köszönöm ha van ötletetek!
A kód:

<a id="me" href="http://webars.hu/home/bemutatkozas"> </a>
(próbáltam üresen, szóközzel, &nbsp; vel stb. Volt zoom, padding, stb de csak vaktában lövöldözök úgy érzem...
css:

div#content div.main a#me {
    display:block;
    float:left;
    margin:10px;
    background: transparent url('../images/en.jpg') no-repeat left top;
    border:1px solid #020300;
    height:64px;
    width:64px;
}
div#content div.main a#me:hover {
    background: transparent url('../images/me.jpg') no-repeat left top;
}
Köszönöm a segítséget!
Gábor.
‹ Ezres tördelés adatbevitelkor Több weboldal tartalma egy oldalon ›
 ■
1

Gyorsan írtam

Ustak · 2009. Jún. 10. (Sze), 13.17
tehát a contentet jobbra tolnám bal margin-nal, így gondoltam pontosan, és a címben a border mellől lemaradta a t, bordert akartam írni.
Tehát előre is köszi :-)
2

Próbálkozások...

Ustak · 2009. Jún. 10. (Sze), 17.19
Könnyen elszóltam magam, mert az absolute positioning esetén ff ben ismét tökéletesen működne, (ie-7 ben nem néztem) de ie 6 ban tudtátok, hogy a padding-left -et beleszámítja az ie a positioningba? Tehát el kelle húznom a képet balra annyival, amennyi a padding, viszont így mozillában nem jó.
Valószínűleg ha estig nem találtok ki semmit, kiszolgálok egy külön css-t ie -nek és kész.
Most állítottam be neki line-height -tet 64px -re , ie6 alatt semmi, ha ie7 alatt ránéznétek jó lenne, hátha ott jó...
Üdv: Gábor.
3

Megoldás (?)

Ustak · 2009. Jún. 11. (Cs), 21.34
Tehát a megoldás az lett hogy külön css-t szolgálok ki.
ie6 alatt:

div#content div.main p#mep {
    padding-left:74px;
}

div#content div.main a#me {
    display:block;
    height:64px;
    width:64px;
    position:absolute;
    margin:10px 10px 10px -74px;
    background: transparent url('../images/en.jpg') no-repeat left top;
    border:1px solid #020300;
    top:0;
    left:0;
}
Ie7 alatt már nem kell a negatív margin:

div#content div.main a#me {
    display:block;
    height:64px;
    width:64px;
    position:absolute;
    margin:0;
    background: transparent url('../images/en.jpg') no-repeat left top;
    border:1px solid #020300;
    top:10px;
    left:0;
}
Ie8 alatt meg megnézem holnap (itthon még nincs olyan :-))
Üdv:
Gábor