Árnyék float probléma IE bug miatt
Sziasztok!
Van egy nemrég elindított webhelyem.
http://hirek.csillagaszat.hu/nr_exobolygok.html
A képek árnyékkal történő körülfuttatásához 'float' tulajdonsággal rendelkező div-et használok. A probléma, hogy míg Firefoxban jól, IE-ben néhány esetben rosszul jelenik meg a kép melletti szöveg: "aláfolyik" a képnek (ld. az alábbi cikkcímeket: "Állatövi fény a Naprendszeren kívül", "Újabb exobolygó fotó?").
Képernyőmentés itt:
Biztos vagyok benne, hogy az IE bugja miatt valamilyen CSS-trükköt kellene bevetni, de nem tudom, pontosan mit tehetnék?
A kapcsolódó CSS:
Van ötletetek a megoldásra?
Köszönettel: Laci
■ Van egy nemrég elindított webhelyem.
http://hirek.csillagaszat.hu/nr_exobolygok.html
A képek árnyékkal történő körülfuttatásához 'float' tulajdonsággal rendelkező div-et használok. A probléma, hogy míg Firefoxban jól, IE-ben néhány esetben rosszul jelenik meg a kép melletti szöveg: "aláfolyik" a képnek (ld. az alábbi cikkcímeket: "Állatövi fény a Naprendszeren kívül", "Újabb exobolygó fotó?").
Képernyőmentés itt:
Biztos vagyok benne, hogy az IE bugja miatt valamilyen CSS-trükköt kellene bevetni, de nem tudom, pontosan mit tehetnék?
A kapcsolódó CSS:
div.rowtext {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}
.introtext {
width: 100%;
border: 0px;
vertical-align: top !important;
}
.img-shadow {
float:left;
background: url(/templates/hirek_common/images/shadowAlpha.png) no-repeat bottom right !important;
background: url(/templates/hirek_common/images/shadow.gif) no-repeat bottom right;
margin: 10px 0 0 10px !important;
margin: 10px 0 0 5px;
}
.img-shadow img {
display: block;
position: relative;
background-color: #ffffff;
border: 1px solid #666666 !important;
margin: -6px 6px 6px -6px;
padding: 0px 0px 0px 0px;
}
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}
.introtext {
width: 100%;
border: 0px;
vertical-align: top !important;
}
.img-shadow {
float:left;
background: url(/templates/hirek_common/images/shadowAlpha.png) no-repeat bottom right !important;
background: url(/templates/hirek_common/images/shadow.gif) no-repeat bottom right;
margin: 10px 0 0 10px !important;
margin: 10px 0 0 5px;
}
.img-shadow img {
display: block;
position: relative;
background-color: #ffffff;
border: 1px solid #666666 !important;
margin: -6px 6px 6px -6px;
padding: 0px 0px 0px 0px;
}
Van ötletetek a megoldásra?
Köszönettel: Laci
Div > Táblázat
Belenéztem a forrásba, és táblázatok tömkelegét találtam. 3 táblázat van ami az egész középső részt összefogja, ezen belül még divek táblázat sorokban, továbba táblázat csak a cimnek, táblázat csak a szövegnek.
Ez igy rengeteg. Tervezd ujra sztem divekkel.
1 div ami az egész középső részt tartja, benne minden sor lehetne 1 div, és igy tovább. kicsit több pepetyelést jelent css-el, de nem jönnek ilyen problémák elő mint az esetedben később..
A kép árnyékhoz az a javaslatom, tedd bele divbe a képet, div háttere valamilyen szin (vagy kép), és ebben lévő divet told el fel és jobbra 5px-et. ugyanazt a hatást éred el :)
(position: relative; right: 5px; bottom: 5px)
xxxxxxx
Durucz Gábor
Köszönöm
Validsag, stb
http://validator.w3.org/check?uri=http%3A%2F%2Fhirek.csillagaszat.hu%2Fnr_exobolygok.html
Azon kivul elfejetetted a megfelelo HTML reszt beilleszteni. Most potolom helyetted.
Udv
ProClub
Az árnyék miatt
Szerintem, nezd meg, a float mire valo.
Az árnyék egy div-ben van a kép mögött. Ezt így lehet csak megoldani.
"Csak így lehet megoldani?"