Böngésző megjelenítési hiba: Az elcsúszott CHECHBOX

Böngésző megjelenítési hiba: Az elcsúszott CHECHBOX
2014-08-28T22:10:14+02:00
2014-08-29T16:02:33+02:00
2022-12-01T12:55:37+01:00
reginorbii
Kellemes estét kívánok mindenkinek!

Az a problémám merült fel, hogy van két darab nem jól megjelölő chechboxom (a képen tökéletesen látszik). És amíg Google Chrome-ban hibátlanul megjelenik, addig a Firefox-ban megadja magát és külön sorba csúszik.

Hogyan tudnám ezt a kavarodást kiküszöbölni? 
Talán egy kis kódrészlettel, ami csak a Firefoxnak szól?

Várom a válaszokat és köszönöm, ha elolvastad!
Mutasd a teljes hozzászólást!
Csatolt állomány
Az inline-box sem garancia arra, hogy egymás mellett maradnak, ez csak egy újabb lehetőség a float után, hogy "lehetőleg" egymás mellé kerüljenek elemek, csak itt már megadható nekik szélesség és magasság is. Lásd itt.
A fő problémádat az okozza, hogy a befoglaló dobozod nem elég széles és a beállításai miatt a firefox nem a tartalomhoz igazítja, hanem a tartalmat wrappeli.
Szóval nyomd meg az F12-t és nézd meg, hogy ha a befoglaló elem szélességét 1-2-3 pixellel megnöveled, akkor a helyükre kerülnek-e. 
Lehet, hogy valamelyik elemnek az egyes böngészőkben más az alap beállítása és ebből jön össze 1-1 pixel szélességbeli eltérés, vagy a szöveg renderelése miatt jön össze az eltérés. Erre a célra érdemes keresni egy jobb reset.css-t. Ha szerencséd van, akkor ez meg is oldja. Ha nem, akkor adjál nekik egy kicsit több helyet, illetve egy white-space: nowrap; még segíthet egymás mellett tartani a dobozokat.
Mutasd a teljes hozzászólást!

  • A forráskód ami előállítja ezt? Mert a képen csak az okozat látszik már.
    Mutasd a teljes hozzászólást!
  • csinálj neki egy listát és adj az <li> elemeknek display: inline-block tulajdonságot. Azzal tuti jó lesz. De használhatsz 3 div-et is. Nem tudom, hogy reszponzív-e az oldal vagy sem, szerintem linkeld a kódot.
    Mutasd a teljes hozzászólást!
  • Mivel ez gyakorlatilag egy táblázatos forma nyugodtan lehet egy szép kis egyszerű táblázat, és még ha el is méreteznéd, a böngésző akkor is megoldja, hogy stabil elhelyezés maradjon és kompatibilis minden böngészőben
    <table> <tr> <td> Egyik pötty </td> <td> Másik pötty </td> <td> Ikon </td> </tr>
    A második sor kialakítását rád bízom.
    Mutasd a teljes hozzászólást!
  • Így kód nélkül:
    Vagy sortörés van a "rövid Ö betűs" radiobox után, vagy egy plusz elem, amely nem látszik és a második már nem fér el..
    Vagy ha mindegyik elem önálló cellában van, akkor az elsőt nem zártad le
    Mutasd a teljes hozzászólást!
  • Tedd be fix divekbe!

    <table>
        <tr>
           <td>
                <div style = "width: 50px; height:10px; minwidth:50px; minheight:10px;maxwidth:50px; maxheight:10px;">O Fügyis</div>
           </td>
           <td>
              <div style = "width: 50px; height:10px; minwidth:50px; minheight:10px;maxwidth:50px; maxheight:10px;">O Puncis</div>
           </td>
           <td>
              Ikon
           </td>
        </tr>
    </table>
    így semerre nem fog mozdulni semmi! :D a lényeg, hogy jó méreteket adj, ezt csak hasra csapva írtam!
    Mutasd a teljes hozzászólást!
  • Hali, így sem csúszik sehová,

    <ul> <li style="display:inline-block;"><input type="radio" name="sex" value="male">Férfi</li> <li style="display:inline-block;"> <input type="radio" name="sex" value="female">Nő</li> </ul>
    Mutasd a teljes hozzászólást!
  • Nem oldódott meg sajnos.

    CSS:

    input[type=radio].css-checkbox { display:none; } input[type=radio].css-checkbox + label.css-label { padding-left:20px; height:19px; display:inline-block; line-height:19px; background-repeat:no-repeat; background-position: 0 0; font-size:19px; vertical-align:middle; cursor:pointer; } input[type=radio].css-checkbox:checked + label.css-label { background-position: 0 -19px; } label.css-label { background-image:url(csscheckbox.png); -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
    HTML:

    <input type="radio" name="nem" id="no" value="no" class="css-checkbox" checked="checked" /> <label for="no" name="nem" class="css-label lrg klaus">NŐ</label> <input type="radio" name="nem" id="ferfi" value="ferfi" class="css-checkbox" /> <label for="ferfi" name="nem" class="css-label lrg klaus">FÉRFI</label>
    Mutasd a teljes hozzászólást!
  • És a táblázat miért nem jó?
    <table> <tr> <td> <input type="radio" name="nem" id="no" value="no" class="css-checkbox" checked="checked" /> <label for="no" name="nem" class="css-label lrg klaus">NŐ</label> </td> <td> <input type="radio" name="nem" id="ferfi" value="ferfi" class="css-checkbox" /> <label for="ferfi" name="nem" class="css-label lrg klaus">FÉRFI</label> </td> <td> Ikon </td> </tr> <tr> <td> <input type="radio" name="nem" id="no" value="no" class="css-checkbox" checked="checked" /> <label for="no" name="nem" class="css-label lrg klaus">NŐ</label> </td> <td> <input type="radio" name="nem" id="ferfi" value="ferfi" class="css-checkbox" /> <label for="ferfi" name="nem" class="css-label lrg klaus">FÉRFI</label> </td> <td> Ikon </td> </tr> </table>
    A td-k szélességét meg beállíthatod
    Mutasd a teljes hozzászólást!
  • Az inline-box sem garancia arra, hogy egymás mellett maradnak, ez csak egy újabb lehetőség a float után, hogy "lehetőleg" egymás mellé kerüljenek elemek, csak itt már megadható nekik szélesség és magasság is. Lásd itt.
    A fő problémádat az okozza, hogy a befoglaló dobozod nem elég széles és a beállításai miatt a firefox nem a tartalomhoz igazítja, hanem a tartalmat wrappeli.
    Szóval nyomd meg az F12-t és nézd meg, hogy ha a befoglaló elem szélességét 1-2-3 pixellel megnöveled, akkor a helyükre kerülnek-e. 
    Lehet, hogy valamelyik elemnek az egyes böngészőkben más az alap beállítása és ebből jön össze 1-1 pixel szélességbeli eltérés, vagy a szöveg renderelése miatt jön össze az eltérés. Erre a célra érdemes keresni egy jobb reset.css-t. Ha szerencséd van, akkor ez meg is oldja. Ha nem, akkor adjál nekik egy kicsit több helyet, illetve egy white-space: nowrap; még segíthet egymás mellett tartani a dobozokat.
    Mutasd a teljes hozzászólást!
  • Mindenkinek nagyon köszönöm a válaszát! 

    Balage73, köszönöm a megoldást.
    Marad a több hely opció (mindössze 1px kellett :) ).
    Mutasd a teljes hozzászólást!
  • Csak az a furcsa az egész kérdéseddel és elfogadással és indoklásával, hogy a linkeld képen mind a két esetben (alsó/felső) ugyan az szerepel (leszámítva a nagy Ö/Ő-t, eltérő képeket, és gondolom a képek másik cellában vannak és egyforma szélesek)...
    Akkor viszont, ha mind a két esetben ua. CSS-t kapja, akkor ez egyiknek miért kellene 1 px-el nagyobb hely?...
    Nem lehet, hogy egy plusz szóköz lehet a különbség a kettő között, esetleg az FF-es kép szélesebb?...
    ******************
    Megj: A közölt kódodban csak az input/label szerepel (az is csak egyszer), az img elem és az ezeket befogadó szülő elem nem, tehát azt mondhatsz nekünk amit csak akarsz, ellenőrizni nem tudjuk, mivel még egy árva linket sem adtál, pedig kértük...
    Ha meg csak ugyan arról van szó, eltérő böngészőkben, akkor viszont a linkelt kép félrevezetés...
    Mutasd a teljes hozzászólást!
Tetszett amit olvastál? Szeretnél a jövőben is értesülni a hasonló érdekességekről?
abcd