CSS és a böngészők
2010-12-27T22:14:52+01:00
2011-02-01T16:47:29+01:00
2022-07-24T19:06:21+02:00
  • Sziasztok!

    Lenne egy kérésem, ha valaki unatkozna.
    Kérlek benneteket teszteljétek már le mindenféle böngészőben az oldalam css-editor -ját, és osszátok meg velem a tapasztalatokat!
    IE8, Firefox, Chrome-ban teszteltem, de másban nem.

    (IE7-ben nem 100-as)
    css-editor.org

    Nagyon nagyon köszönöm!
    Mutasd a teljes hozzászólást!
  • Asszem, ma új csúcsot döntöttem: sikerült egy olyan lapot készíteni, ami minden böngészőmön másképp jelenik meg.



    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta name="author" content="Csak én" /> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <style type="text/css"> body { background-color: #8888FF; } #loginAblak { font: 11px arial,lucid,sans-serif; position: absolute; background-color: lightgray; right: 30px; top: 100px; padding: 0.2em; text-align: center; } #loginAblak label { text-align: right; float: left; width: 200px; } #loginAblak #logEmail,#logJelszo { text-align: left; float: right; width: 200px; } </style> <title>Címsor</title> </head> <body> <div id="loginAblak"> <form id="loginForm" name="loginForm" method="post" action="index.php" accept-charset="uft-8"> <fieldset> <legend>Login</legend> <label>e-mail címed:&nbsp;</label> <input type="text" id="logEmail" name="logEmail" maxlength="128"/><br /> <label>jelszó:&nbsp;</label> <input type="password" id="logJelszo" name="logJelszo" maxlength="64" /><br /> <br /> <input class="button" type="submit" id="logSubmit" value="Belépés" /> <input class="button" type="button" id="logCancel" value="Mégsem" /> </fieldset> </form> </div> </body> </html>

    Ami a dolog szépségét adja, hogy azonos verziószámú firefox-okból a linuxos és a windows-os is mást produkál. No nem a fontokban, hanem a két gomb elhelyezésében. A linuxos középre igazítja őket, a windows-os balra...


    szerk: már van némi sejtésem, hogy miért
    Mutasd a teljes hozzászólást!
  • Írd át az outline: white-ot outline: red-re, majd meglátod!

    Ha nem megy IE-ből, annak valószínűleg az az oka, hogy hiányzik a megfelelő !DOCTYPE.
    Mutasd a teljes hozzászólást!
  • No ezt megnézem...
    Mondjuk ők eleve beállítanak néhány alapértéket, amit én nem.
    Mutasd a teljes hozzászólást!
  • Nem tudom, hogy miről beszélsz, kipróbáltam a W3Schools TryIt Editor-jában és nem tudom, hogy mit akartál kihozni belőle, de szerintem FF alatt is jó. Sőt, IE alatt nem sárgul be az, aminek bekellene, és nem jelenik meg a kék "izé" (ez nagyon szakmai megfogalmazás volt )
    Mutasd a teljes hozzászólást!
  • Újabb agyrém: már nem tudom, sírjak vagy röhögjek...
    .menu1 { position: relative; min-height: 3em; max-height: 3em; height: 3em; min-width:100%; max-width: 100%; width: 100%; border: 2px solid yellow; outline: white solid 10px; text-align: center; background-color: green; color: yellow; } .menu1 table,tr { margin: auto; text-align: center; position: relative; height:100%; } .menu1 td { border: 1px solid white; padding-left: 30px; padding-right: 30px; width: 100px; } .menu1 td:hover { background-color: yellow; color: green; } .menu1 #mp1:hover .menu2 { display: block; } .menu2 { position: absolute; top: 30; left: 40; width: 280px; height: 180px; background-color: blue; color: yellow; border: 1px solid black; z-index: 10; display: none; } .................... <div class="menu1"> <table><tr> <td id="mp1">mp1<div class="menu2">---</div></td> <td>mp2</td> <td>mp3</td> </tr></table> </div>

    Nem tudom, van-e még olyan elvetemült, aki egy menü konténereként működő div köré outline-t tesz, én most kipróbáltam. (nem esztétikai célból, csak látni akartam, hogy mi, hol van )
    IE+Chrome normálisan működik. FF alatt az outline csíkja leugrik a popup menüt helyettesítő kék téglalap aljára, amikor az megnyílik...
    Mutasd a teljes hozzászólást!
  • Szerintem igen:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

    Ahogy elnézem, ez ugyanaz.
    Mutasd a teljes hozzászólást!
  • <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

    Erre gondolsz?
    Mutasd a teljes hozzászólást!
  • Köszi szépen neked is.

    (mondjuk én a DOCTYPE-nál jobban szeretem a strict-et, amíg tartható)
    Mutasd a teljes hozzászólást!
  • Szia!
    Sajnos ahogy már mások is mondták, ahány böngésző annyi módon értelmezi és még a böngésző beállításai, vagy a rendszer témája nem is került szóba!
    Nos, először is...
    határozd el magad miket használsz, táblákat/diveket (HTML/xHTML), majd ez alapján dönts a doctype-ról
    Tábláknál: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    Diveknél: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
    Ez nagyon is fontos, hogy rengeteg szenvedéstől megkíméld magad!
    Fontos tudni ezeknek a felépítési rendszerét.
    Hogy milyen méretett, honnan és hogyan számolnak a böngészők, a padding, margin, és méretek viszonyairól. (mellékelt képen kis szemléltetés)
    Aztán fontos hogy egységesítsük, tehát a rendszer témájától, a böngésző típusától, és alapbeállításaitól függetleníteni, ez csak is úgy lehetséges, ha minden értéket megadunk...
    pl.: soha ne vedd 100% -ra hogy egy input mező háttér színe fehér, mert rendszertémától függően lehet fekete, vagy sötét szürke is!
    (pl. a prog.hu elég érdekesen néz ki Ubuntun fekete témával, ahol a gombok sötétszürkék és fehér az alap betűszín, de mivel alapnak a világos színt gondolták, így csak a betű szint módosították feketére, tehát sötétszürke alapon, fekete betűk. XD )

    Nos, amire ki akartam lyukadni, doctype, madj annak a struktúrájának követésével mindig minden böngészőnek a megfelelő CSS kódal kell ellátni, az alap értékeket pedig minden esetben rögzíteni, padding, margin, háttér, betűszín...

    De ne add fel, nekem is sikerült egy egységes CSS -t kialakítanom, aminek az osztályait használom. majd utána veszem alapúl az adot weboldal külsejét

    Szerk.: A melékelt képet ITT tudod megnézni!
    Mutasd a teljes hozzászólást!
  • Az em kapcsán ...

    Igen, az úgy működik, ilyen értelemben igazad van.
    Én viszont úgy értettem, hogy ha nem határozol meg alapértelmezett fontot, a böngésző alapbeállítása dönt helyetted.

    Kevés logikátlanabb dolgot tudok elképzelni, mint azt, ami a webes megjelenítés kapcsán folyik...


    Igen, merthogy nincs
    "szabvány"
    , csak ajánlás.


    A kódodból vedd ki a
    max-height: 3em; height: 3em;
    cuccot, és máris jó lesz még Operában is. (azért egy jól választott doctype is sokat tud segíteni néha)

    [szerk.]
    Ha valaki Opera böngészővel téved ide, kérem, magára vessen! Nálam az opera unsupported státuszba került.


    Megnézted Operával az enyémet?


    Mutasd a teljes hozzászólást!
  • Persze, értem, felfogtam mindezt korábban is, csak dühít és muszáj valahol hangot adni neki.
    Persze, meg tudom csinálni (többnyire) amit akarok, de most csak játszok vele, próbálgatom, hogy mi _nem_működik benne.
    Kevés logikátlanabb dolgot tudok elképzelni, mint azt, ami a webes megjelenítés kapcsán folyik...

    Az em kapcsán (szerintem) nincs teljesen igazad: a content méretezéséhez mindenütt %-ot v. em-t használtam. Ebből egy logikusan, kulturáltan működő rendszeren az jönne ki, hogy egyes böngészők eltérő méretben mutatják az így méretezett elemeket, de az elemek egymáshoz viszonyított aránya azonos lenne.
    Hangsúlyozottan hülye példa: ha azt mondom, hogy padding:3em; ez jelenthet a FF-ban 30, IE-ben 300pixelt, de ha ugyanott 1em-re hivatkozom, akkor lesz szíves a FF 10, az IE 100pixelt használni.
    Ennél többet nem várok el az ilyen méretezésektől.

    Padding, border, outline működése kapcsán meg már lentebb is volt egy rövid elmélkedés: miszerint ezek a "szabvány" szerint nem számítanak a méretezésbe, miközben a gyakorlat néha cáfolja az elméletet...
    Mutasd a teljes hozzászólást!
  • Lehet nem fogok mindenre kitérni, az is lehet, hogy nem egészen 'szakszerűen' ...

    Az align="center" azért került oda, mert a divedben alkalmazott text-align:center sem volt minden böngészőben hatással a <table>-ra.

    Opera van ugyan telepítve a gépemen, de nem néztem meg benne sem a Tiédet, sem az enyémet ( illetve most már igen ).

    Próbáltál csinálni egy 'doboz'-t, mindent elkövetve, hogy pontosan meghatározd a méretét:
    min-height: 3em; max-height: 3em; height: 3em;


    Alkalmaztál egy olyan méretezést ( em ), ami szintén sok mindentől függ, csak éppen nem Tőled.

    Aztán tettél bele egy nagyobb tartalmat ( ráadásul <table>-be, ami szintén saját `törvényei` szerint dolgozik ) paddinggal, borderrel, amiről tudni kell, hogyan értelmeződik.
    Némelyik böngésző komolyan veszi a beállított magasságot, engedve, hogy 'kilógjon' belőle a tartalom, némelyik inkább megnöveli a 'dobozt'. ( Az opera ezek szerint képes ki is 'lyukasztani', ha úgy látja jónak )

    Mindez azért, mert szó sincs semmilyen szabványról. Sehol, senki nem alkotta/határozta meg, sehol, senki nem tette kötelezővé. Pl. a gépészetben (ahol igenis szabványok uralkodnak), az M6-os menet a világon mindenhol ugyanolyan.

    A W3C irkál mindenféléket, ajánlásokat tesz, amit senki nem tesz kötelezővé.

    Ezen lehet mérgelődni, anyázni, ... aztán lehiggadni, és úgy írni meg a kódot, hogy a lehető legegyformább képet mutasson.

    UI.: Amennyiben
    kissé dinamikusabban
    szeretnéd a belsőt, ne határozd túl a külsőt.
    Mutasd a teljes hozzászólást!
  • Javíts ki, ha tévednék, de te pusztán annyit tettél, hogy
    1. Betettél a HTML-be egy - elméletileg(*) - oda nem illő formázó elemet (align="center")
    2. Beállítottál olyan font méretet, amivel biztosan belefér az adott keretbe minden.
    Holott én még mindig azon "anyázok", hogy az ilyen apróságok, mint a kissé dinamikusabban méretezett belső elemek, komoly gondokat okoznak a böngészőknek. Megnézted Operával az enyémet? Ha az nincs, egy szót sem szólok, de az ő módszere, ahogy kicakkozta a tábla outline-ját... OMG...

    Mondjuk amit nem tudok megérteni, hogy bizonyos esetekben miért képes a külső tag mérete igazodni a belsőjéhez, más esetekben meg miért nem... Pl. konkrétan az Operában miért igazodik a td méretéhez a div outline-ja, ugyanakkor a content és a border miért nem? (emlékezetből írom, nem 100%, hogy így van)

    * = elmélet ugye az lenne, hogy a html leírja az adatokat, a css pedig a formázást.
    Mutasd a teljes hozzászólást!
  • Ravasz kódot hoztál össze.

    De ha tudod, hogy mi, hogyan...
    Máris sokkal jobb lesz az eredmény (legalábbis nálam).
    Mutasd a teljes hozzászólást!
  • Én meg azon, hogy 2010-ben még van min kiakadni.
    Azt hittem, az elmúlt tíz év elég volt ahhoz, hogy valami relative szabványos dolgot kitaláljanak és megvalósítsanak a kedves fejlesztők.
    Mutasd a teljes hozzászólást!
  • Csodalkoztam, hogy 2010-ben meg kiakadnak ezen...
    Mutasd a teljes hozzászólást!
  • Ilyen nincs...
    Lásd mellékelt kód! Négyféle böngésző, háromféleképpen jeleníti meg.
    A sárga keretes, zöld téglalap és a vastagabb, fehér keret mindegyikben megvan, de...
    A FF-ban az mp1,mp2,mp3 dobozkái kilógnak a sárga keretből néhány pixellel, amennyivel kilógnak, olyan magasságú szürke csík (a body background színe) látható a sárga (border) és a fehér(outline) keret között.
    IE-ben és chrome-ban is kilógnak az mp-s dobozkák, de az outline elfedi őket.
    Az opera a legpoénosabb: ő az outline alsó csíkjával követi a dobozokat. A három mp-s dobozka szélességében úgy viselkedik, mint a FF (ott a szürke háttér), az mp3 jobb szélénél meg visszaugrik a sárga vonal mellé (ahogy IE/Chrome).

    <html> <head> <meta name="author" content="Csak én"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Címsor</title> <style> body { background: lightgray; } .menu1 { top:0; left:0; min-height: 3em; max-height: 3em; height: 3em; min-width:100%; max-width: 100%; width: 100%; border: 2px solid yellow; outline: white solid 10px; text-align: center; background-color: green; color: yellow; } .menu1 table { height: 100%; } .menu1 td { border: 1px solid white; padding: 1em; outline black solid 1px; } </style> </head> <body> <div class="menu1"> <table><tr><td>mp1</td><td>mp2</td><td>mp3</td></tr></table> </div> </body> </html>
    Mutasd a teljes hozzászólást!
  • Persze tudom, de itt a függőleges középre igazításról volt szól divben. Tehát a vertikal-align különböző nagyságú inline elemek illeszkedését határozza meg. pl.: van egy divben egy 20px -s szöveg és egy 12 pc -s szöveg ekkor alapból a kissebb szöveg a nagyobbnak az aljához igazodik. Na most ha a vertikal-align-ot middle-re állítjuk akkor már a két eltérő méretű inline elem közül a kissebb a nagyobbnak a középmagasságában van.(sajnos nem tudom jobban leírni nézd meg azt a linket amit egy korábbi hozzászólásomban küldtem) Na most ha egymás mellé rakunk egy olyan span elemet aminek a magassága egyenlő a szülő elemével(height:100%;) de 0 szélességű(widht:0px;) és emeelé egy spanban valamit elhelyezünk és a szülő elemre alkalmazzuk a vertical-align:middle-t akkor az inline elemek középen illeszkednek egymáshoz, és mivel az egyik inline elem mérete gyakorlatilag megegyezik a szülő elemével és hozzá igazodik függőlegesen egy másik cucc (a spanban lévő img) így gyakorlatilag a szülő elemben is középre igazodik(függőlegesen.)
    Mutasd a teljes hozzászólást!
  • talán ha működik képnél is ha a képet span ba rakod és az azt körülölelő divben beleraksz egy 100% magas 0% széles span elemet és a divben megadsz vertical alignos igazodást akkor igazodni fog de ott a linken linken van írva


    #image { margin: 0 auto 0 auto; } <img src="image.jpg" id="image" />


    Tetszőlegesen id vagy class, akár az img tagnak is adhadsz auto margót.
    Mutasd a teljes hozzászólást!
  • Szerintem inkább csak be kellene tartania mindenkinek a szabványokat és akkor valószínűleg egyszerűbb lenne mindez. Amugy meg mit használnál a html helyett? xhtml-t? vagy mit? Vagy az egészet átírnád valami másra pl.: a kód ne jusson el hanem csak a bináris? vagy mi? Ez van ezt kell szeretni.
    Mutasd a teljes hozzászólást!
  • Nem kellene kidobni, csak pont, mintt amit manapság csinálnak a szoftvergyártók: A régi alapokat egy suhintással kidobják, és újjá csinálják az egészet. Aztán meg hadd szidják őket a programozók, hogy miért kellet felborítani az egészet? Miért nem lehetett megtartani a régi parancsokat? Most tanulhatom az egészet előröl
    Mutasd a teljes hozzászólást!
  • talán ha működik képnél is ha a képet span ba rakod és az azt körülölelő divben beleraksz egy 100% magas 0% széles span elemet és a divben megadsz vertical alignos igazodást


    No ezekért kellene az egész html + css technológiát úgy ahogy van kidobni a büdös francba és nem pedig csinálni belőle 5-ös verziót.
    Mutasd a teljes hozzászólást!
  • a linken ott a megoldás is azt láttad?

    (
    talán ha működik képnél is ha a képet span ba rakod és az azt körülölelő divben beleraksz egy 100% magas 0% széles span elemet és a divben megadsz vertical alignos igazodást akkor igazodni fog de ott a linken linken van írva
    )
    Mutasd a teljes hozzászólást!
  • Bennem valamiért az volt, hogy a konténer közepére igazítja az elemeket. De rá kellett jönnöm, hogy ilyen attribútum nem létezik.

    Végülis gyakorlati haszna - abban a formában, ahogy én próbáltam - egyébként is ritkán lenne. Ha meg tudom, hogy az egyes elemek mekkorák lehetnek, akkor viszonylag egyszerű dolgom van.
    Mutasd a teljes hozzászólást!
  • Valami rémlik, hogy igen... hosszú előzményei voltak ennek a topic-nak, csak a tizedét sem tudtam megjegyezni.
    Mutasd a teljes hozzászólást!
  • Középre igazítással kapcsolatban a vertical-align: middle; tud legjobban kiakasztani. Az előbb fogtam fel, hogy ott is működik, ahol nem látszik, mert mást csinál, mint amire számítottam.


    mégis mire gondolsz mit csinál? Az eltérő méretű elemeket amik egy sorban vannak atzok egymáshoz való igazodását állítja

    pl.:


    <table style='width:600px; height:600px;'> <tr verical-align='middle' style='width:600px; height:600px;'> <td verical-align='middle' style='width:600px; height:600px;'> <font size='12'>kicsi betűméret</font><font size='30'>nagy betű</font> </td> </tr> </table>

    (ITTENKE(a vertikal align rejtéje))
    Mutasd a teljes hozzászólást!

  • Ez jó akkor ezek szerint csak az internet explorer valósítja meg ezt jól
    Mutasd a teljes hozzászólást!
  • Amásik hülyeség az hogy akkor most a margin padding az az elem szélességébe beleszámít vagy nem?


    Erről a w3schools.com ezt írja:
    Important: When you specify the width and height properties of an element with CSS, you are just setting the width and height of the content area. To know the full size of the element, you must also add the padding, border and margin.


    Középre igazítással kapcsolatban a vertical-align: middle; tud legjobban kiakasztani. Az előbb fogtam fel, hogy ott is működik, ahol nem látszik, mert mást csinál, mint amire számítottam.
    Mutasd a teljes hozzászólást!
Ez a téma lezárásra került a moderátor által. A lezárás oka: minden probl�m�t k�l�n t�m�ban �s a tud�st�rban kell felvetni
Tetszett amit olvastál? Szeretnél a jövőben is értesülni a hasonló érdekességekről?
abcd