ugrás a tartalomhoz

Böngészőoptimalizálás

fledgling42 · 2010. Jún. 16. (Sze), 23.54
Sziasztok,

adott egy honlap (http://fledgling.hostoi.com/karate/index.html) és jelenleg azon ügyködök, hogy minden böngészőben ugyanúgy nézzen ki. A fő probléma, mondanom sem kell, IE 6 esetén van - sajnos még mindig 10% körül áll az én oldalaimon, szóval ignorálnom nem lehet, illetve egy apróságot az Opera (10.53) is másként jelenít meg, mint az IE 7, Firefox, Chrome-Safari együttes.

Az IE 6 esetében az egyik kissebb problémát a felső menü okozza: teljesen máshova rakja, mint az összes többi böngésző - nem tudom, talán hibás box-modelt alkalmaz, vagy mások az auto-marginok? Próbálkoztam az ilyesmik állítgatásával, de sok eredményre nem vezetett. Itt van az Opera hibája is, ő azonban csak vagy 10 px-lel magasabbra helyezi ezt a menüt.

Aztán a IE 6-ban a header kép teljesen szét van csúszva, nem tudom, azzal mi lehet - ez a legsúlyosabb hiba.

Aztán a baloldali menü (ul lista) behúzása sem stimmel (csak IE 6) alatt.

Az oldal szabványos XHTML (transitional) és CSS 2.1 - minden segítségért rendkívül hálás lennék!
 
1

UL

Poetro · 2010. Jún. 17. (Cs), 00.33
A margin és padding értékek nem egyeznek a böngészőkben, ezért állítsd be őket olyanra, amilyenre szeretnéd. Érdemes használni Firefox alatt a Firebugot, IE alatt Developer Tools-t és a DebugBar-t, Opera alatt a Dragonfly-t, valamint Chrome és Safari alatt a Developer Tools-t.
2

Köszönöm

fledgling42 · 2010. Jún. 17. (Cs), 09.40
Szia,

köszönöm a választ, de sajnos csak részben segített. Használok Dragonfly-t és most már Firebugot is, de nem sikerült kideríteni, hogy miért van az a pár pixel különbség Opera és Firefox között - továbbra is ott van, pedig definiáltam az ul-re általánosan egy: margin, padding: 0-t.

Az IE6 most már a menüket jól jeleníti meg (valószínűleg), de az egész felső rész szét van esve és fogalmam nincs, hogy miért.
6

Az Opera (helyesen) azért

Baldric · 2010. Jún. 18. (P), 11.16
Az Opera (helyesen) azért teszi fentebb a menüt, mert a linkeknek megadtad a display:inline tulajdonságot, ilyenkor nem "doboz" formában foglalja le a helyet, és nem is a várt módon működik a padding, próbáld a display: inline-block tulajdonságot
3

Tippek IE6-ra

Kevlar · 2010. Jún. 17. (Cs), 09.59
Én két dolgot látok:
1. A fejléc kép a menütől lentebb van. Ennek oka lehet, hogy a #header-ben lévő elemek float-olva vannak, de maga a #header nincs. Sőt állíts be a #header-nek fix méreteket is, és overflow:hidden sem árt.

2. A fejléc kép alatti vonal sztem a háttérkép ismétlődése, ezen a background-nak egy no-repeat is segíthet.
4

IE6

zzrek · 2010. Jún. 17. (Cs), 12.22
...és ne felejts el kirakni az IE6-ost használóknak egy nagy piros figyelmeztetést, hogy már a Microsoft szerint is régen elavult a böngészőjük, ezért az oldal nem biztos, hogy tökéletesen fog megjelenni.

(Valójában egyéb optimalizálásra nem is lenne szükség IE6-hoz)

;-)
5

Aki IE6-ot használ még, az

Tanul0 · 2010. Jún. 17. (Cs), 13.24
Aki IE6-ot használ még, az elég gáz. Már rég nem optimalizálok arra, hanem beteszem, hogy az oldal megtekintéségez újabb böngészőre van szükség.