ugrás a tartalomhoz

1px hiba IE-ben az képeknél az oldal alján

Deckard · 2006. Jan. 7. (Szo), 01.42
hi,

bár elég új számomra a css világa, már elég sok problémát sikerült megoldanom az új weblapom készítése során kezdve az IE-ben is áttetsző png-től a mindig 100% nagyságú oldalakig :), azonban ez most kifogott rajtam és eddig még a neten sem találtam rá megoldást. :(

a probléma a következő:
az oldal - helyesebben mondva a látható ablak - aljához igazítva szeretnék egy képet elhelyezni, azonban az IE érthetetlen módon kihagy alul egy 1px szélességű sávot.
Operával és Firefox-szal is hibátlan, sőt még Frontpage-dzsel nézve is!

a képeknél a display:block és a border:none is be van kapcsolva.

nem tudom, hogy ez így mennyire érthető - ha nem az, akkor feltölthetek egy példát.

remélem, hogy van rá vmi megoldás!

thx & bye, Deck
‹ XHTML, CSS, DIV kérdéscsokor CSS fájl tiltása/választása böngésző fügvényében ›
 ■
1

pl

connor · 2006. Jan. 7. (Szo), 11.18
A példa az lehet hogy sokat segítene.

--
connor
2

példa

Deckard · 2006. Jan. 7. (Szo), 12.15
hi,

feltöltöttem ide: próba oldal

bekapcsoltam a keretet is, így jobban látszik az alsó három-pöttyös képnél, illetve mellette a fade_out-os rész alatt van még 1 px pluszban.

itt egy kép: 1px bug

(a license-figyelmeztetés ne zavarjon)

a lényeg, hogy csak IE alatt jön elő, Operával, Firefox-szal és Frontpage-dzsel nézve is tökéletes!
3

Nem látom...

janoszen · 2006. Jan. 7. (Szo), 12.28
Nem látom az 1px hibát. IE 6.1 van. Neked?

Igaz, nem is néztem sokáig, mert a rikító színektől majd' kifolyt a szemem. Nagyon rossz színválasztás szerintem.

Egyébként az a JS-es scrollozós cucc tényleg baromi jól néz ki, de ha ki van kapcsolva a JS (kedvenc vesszőparipám) akkor a felhasználó max mérgelődik, hogy béna volt az oldal csinálója. Meg nem mindenki szereti, ha véletlenül valahol otthagyja az egerét és az oldal meg elkezd lefele mászni.
5

proclub

Deckard · 2006. Jan. 7. (Szo), 13.09
bocs, direkt azért állítottam be ilyen színeket, hogy pontosan lássam a határokat :)
(a véglegesben fehér lesz minden)

de itt van kevésbé rikító színekkel: fehér változat
mondjuk itt jobban is látni az alsó piros fade-sáv alatt a plusz 1px fehér sort.
(az a baj, hogy a szöveg is látszik ott)



az IE verzióm 6.0.2900
6

WebDeveloper toolbar...

janoszen · 2006. Jan. 7. (Szo), 13.21
A WebDeveloper toolbar azt hiszem a barátod. A következőt dobta ki:

Style Information - http://www.gorbeforever.hu/proba/index2.html
http://www.gorbeforever.hu/proba/main2.css

img    (line 99)
{
    border-top-width: 1px;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 1px;
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: none;
    border-top-color: -moz-use-text-color;
    border-right-color: -moz-use-text-color;
    border-bottom-color: -moz-use-text-color;
    border-left-color: -moz-use-text-color;
    display: block;
}
Mit szűrünk le ebből? A border típusát ugyan none-ra állítottad, de a szélessége 1 px. Lehet, hogy ez a hiba?

A megfelelő CSS rész:

img {
 border: 1px;
 display:block;
}
4

Esőtánc

Jano · 2006. Jan. 7. (Szo), 12.41
Háát IE-ben mindig vannak érdekes dolgok, néhány tipp amiket én ilyen esetekben ki szoktam probálni:

- add meg a border="0" attributumot a HTML-ben
- ha lehet töröld ki a white-space karaktereket az img tag és a befoglaló DIV közül, tehát a kacsacsörök érjenek össze
- adj a befoglaló DIV-nek ugyanakkora line-height-t mint a kép magassága
- igazitsad a képet a vertical-align segítségével lefelé img { vertical-align:bottom;}
- ami bizonyos esetekben segít: relativ pozicionálásúva tenni az elemet
7

egy kis csalás

Deckard · 2006. Jan. 7. (Szo), 13.27
hát, sajnos egyik sem jött be :(

viszont egyelőre egy kis csalással meg tudtam oldani: a fade_out-os div-et 1%-kal lejjebb pozícionálom és így elfedi az 1px-es sávot.
(mivel ez a fade majd fehér lesz, így nem vesszük majd észre, hogy lejjebb van)

egy kis csalással megy

azért örülnék, ha ki tudnánk deríteni a hiba pontos okát - túl azon, hogy az IE szar ;)
8

IE kép alatti 1 pixel

Delawer · 2006. Jan. 7. (Szo), 16.30
Hali.
Próbáld meg az aktuális css-ben ezt módosítani:
 
div#fade_out {
	position:absolute;
	left:0;
	bottom:0;
	z-index:100;
	font-size: 1px;        
	}
A probléma ott van észrevételem szerint, hogy az IE egyes karakterek (pl. g) miatt a box alját lejjebb tolja, de ha 1 pixelben adod meg az adott div-be foglalt fontméretet, akkor megszűnik ez a zavaró tényező.
Természetesen ha ebben a div-ben szöveg is van, azt be kell foglalni valamibe, amire rá tudsz húzni egy stílusszabályt.


--- Legyen egy jó napod! ---
9

bottom: -1px :)

Deckard · 2006. Jan. 8. (V), 01.27
no, köszönöm az ötleteket, bár egyik sem vált be - viszont rájöttem, hogy magát a div-et nem teszi alulra, ebből meg jött az ötlet: mi van, ha a bottom:0 helyett bottom:-1px-et adok meg a div-nél?

div#fade_out {
	position:absolute;
	left:0;
	bottom:-1px;
	z-index:100;
	}
és úgy tűnik, hogy így működik! :)

még egyszer nagyon köszönöm mindenkinek a segítséget!
10

Mégjobb megoldás...

gLes · 2006. Feb. 19. (V), 03.58
Tudom rég lejárt, de én is úgy leltem erre a topicra google-ban mert orrba szájba kerestem egy korrekt megoldást, de nem találtam...namármost arra én is rájöttem, amire te is, viszont ez nem volt egészen jó megoldás, most kicsit hosszú lenne elmagyaráznom miért, de a lényeg, hogy találtam egy jobb megoldást:

az alábbi css kifejezés csak IE-ben működik, ezért érdemes pl. conditional comment-be rakni, vagy hasonló módon elrejteni más böngészők elöl, ahol a bottom: 0 tökéletesen működik:
.footer {
  top: expression(this.parentElement.clientHeight-this.clientHeight+'px');
}
Szóval lehet hogy még hasznos lesz valakinek!

Üdv:
gLes