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:
  1. <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:
  1. div#content div.main a#me {  
  2.     display:block;  
  3.     float:left;  
  4.     margin:10px;  
  5.     background: transparent url('../images/en.jpg') no-repeat left top;  
  6.     border:1px solid #020300;  
  7.     height:64px;  
  8.     width:64px;  
  9. }  
  10. div#content div.main a#me:hover {  
  11.     background: transparent url('../images/me.jpg') no-repeat left top;  
  12. }  
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:
  1. div#content div.main p#mep {  
  2.     padding-left:74px;  
  3. }  
  4.   
  5. div#content div.main a#me {  
  6.     display:block;  
  7.     height:64px;  
  8.     width:64px;  
  9.     position:absolute;  
  10.     margin:10px 10px 10px -74px;  
  11.     background: transparent url('../images/en.jpg') no-repeat left top;  
  12.     border:1px solid #020300;  
  13.     top:0;  
  14.     left:0;  
  15. }  
Ie7 alatt már nem kell a negatív margin:
  1. div#content div.main a#me {  
  2.     display:block;  
  3.     height:64px;  
  4.     width:64px;  
  5.     position:absolute;  
  6.     margin:0;  
  7.     background: transparent url('../images/en.jpg') no-repeat left top;  
  8.     border:1px solid #020300;  
  9.     top:10px;  
  10.     left:0;  
  11. }  
Ie8 alatt meg megnézem holnap (itthon még nincs olyan :-))
Üdv:
Gábor