link-aláhúzás rejtélyes eltűnése <span> miatt?
sziasztok,
bocs, ha hosszú leszek, de valami nagyon furcsa dologgal találkoztam - talán valaki meg tudja magyarázni, hogy mi miért történik...
csináltam egy oldalt, ahol a footer-be beraktam egy linket. ha fölé megyek az egérrel, akkor aláhúzva jelenik meg. ( a:hover { text-decoration: underline; } ) szépen működik is. aztán a további al-oldalak számára lemásoltam az első oldalt és csak a tartalmat cseréltem ki, viszont meglepve tapasztaltam, hogy ez a link-aláhúzás eltűnt!
hosszú keresés után rájöttem, hogy az első oldalon volt egy <h1><span>-os rész, amit ha bemásoltam a többi oldalra, akkor újra láthatóvá vált az aláhúzás-effekt.
viszont elvileg ennek a kettőnek az ég világon semmi köze egymáshoz!
a kód részletek:a lényeg az, hogy ha nincs az oldalon egy ilyen <h1><span>-os rész, akkor nem látszik az aláhúzás-effekt!
ja, és CSAK Firefox alatt van ez a hiba, Operával és IE-vel jó.
ötletek?
Deck
■ bocs, ha hosszú leszek, de valami nagyon furcsa dologgal találkoztam - talán valaki meg tudja magyarázni, hogy mi miért történik...
csináltam egy oldalt, ahol a footer-be beraktam egy linket. ha fölé megyek az egérrel, akkor aláhúzva jelenik meg. ( a:hover { text-decoration: underline; } ) szépen működik is. aztán a további al-oldalak számára lemásoltam az első oldalt és csak a tartalmat cseréltem ki, viszont meglepve tapasztaltam, hogy ez a link-aláhúzás eltűnt!
hosszú keresés után rájöttem, hogy az első oldalon volt egy <h1><span>-os rész, amit ha bemásoltam a többi oldalra, akkor újra láthatóvá vált az aláhúzás-effekt.
viszont elvileg ennek a kettőnek az ég világon semmi köze egymáshoz!
a kód részletek:
h1 { line-height: 150%; padding: 10px 0 0 0; font-weight: bold; font-size: 18px; color: red; }
h1 span { font-weight: normal; }
#footer_contact { position: relative; width: 600px; margin: 0 auto; padding: 5px; border-top: 1px solid silver; background: transparent; }
#footer_contact p { margin: 0; padding: 0; font-size: 11px; text-align: center; }
#footer_contact a { text-decoration: none; color: #808080; outline: none; }
#footer_contact a:hover { text-decoration: underline; }
ja, és CSAK Firefox alatt van ez a hiba, Operával és IE-vel jó.
ötletek?
Deck
Próba cseresznye
h1 span { font-weight: normal; }
, ezért próbáld meg szerintem azt, hogy először kiveszed, aztán meg beteszed e mögé:
#footer_contact a:hover { text-decoration: underline; }
Valid?
valid html 4.01 strict
a validátor szerint a html valid 4.01 strict-es, a css-re meg a background-colorokra adott csak figyelmeztetést.
viszont tovább kísérleteztem és a következő derült ki:
a line-height-tel van a gond!
ugyanis megadtam a line-height: 150%-ot a "sima" p-nek és vmiért ez kavar be.
de hogy bonyolultabb legyen a dolog, csináltam egy próba-oldalt, íme:
line-height próbák
persze továbbra is csak Firefox alatt hibázik, Opera és IE alatt rendben van.
szóval ez akkor vmi FF feature? ;)
Deck
padding
Nem ennyire misztikus azért
kerekítés
de nem a kerekítéssel lehet a baj, mert a 12px-es betűnél ugye a 150% pontosan 18px, mégsem tudja megjeleníteni az aláhúzást!
érdekesség: ha a linknél adom meg az aláhúzást és a hover-nél a text-decoration: none-t, akkor meg kirakja a vonalat, de nem veszi el!
bosszantó dolog!
A 12px-nél elözőt nézi
Azért számol felváltva 16 és 17px-et mert a DOM Inspector szerint 16,46 körüli érték jön neki ki sormagasságra (pedig 16*1,5 az 16,5) és ezt először lefelé kerekíti, a második sornál már 16,47*2 azt pedig felfelé. Legalábbis így tűnik.
tényleg így van
ez mondjuk még nagyobb gáz, mert így mindig attól függ a viselkedése, hogy éppen hány darab line-height-es sor volt már előtte az oldalon!!!
érthetetlen számomra, hogy ezt még nem javították ki eddig...
bugzilla: 1 pixel rounding error with percent line-heights
1 pixel rounding error with percent line-heights