CSS kérdésem van

[h.arpad]

Sziasztok! Ki tudná megmondani, hogy ez a css miért jelenik meg másképpen Firefox alatt mint IE-ben?

Röviden: azért, mert az Firefox és nem IE7. Ilyenkor a megoldás (ha a CSS valid!) egy másik stíluslap IE6-re, ahol mondjuk külön állítod a padding-et.

[payskin]

Ööö... kipróbáltam, ha kijavítod a színt (és ahogy látom, ki is javította), akkor azonos módon jelenik meg IE6-ban és FF 2-ben. A 6-os elõtti IE böngészõk rontják el a box modellben például a padding méreteket.

[Giraffe1]

Elakadtam, és hátha valaki innen tud segíteni. Ezen az oldalon van egy darab mailto link, amire ha ráviszem az egérkurzort, akkor a tõle levõ kép alját az IE letörli. (A Firefox nem csinál ilyen disznóságot.) Túl azon, hogy Vacak az IE tud valaki abban segíteni, hogy õ se piszkáljon bele a képbe?

(Az, hogy az emailcímet JS írja be - ne innen gyûjtsenek címet a spammerek - semmit nem befolyásol, akkor is töröl, ha direktbe írom be a címet és a linket.)

[payskin]

Szépen mondom magyarul: cleareld a floatot a #text div bezárása előtt.

 

Sőt, jobbat mondok: guillotine bug!

[Giraffe1]

Szépen mondom magyarul: cleareld a floatot a #text div bezárása előtt.

Ön nyert! Kellett egy <div style="clear: both"></div> a #text bezárása elé, és ettől meggyógyult. Már javítottam isz oldalt. Csak ettől - finoman szólva sem - lett népszerűbb az IE.

Például hosszú tábláknál olyan jó, ha egyszerűen ki lehetne emelni az aktuális sort. Ez Firefoxban egy sima tr:hover-rel megoldható CSS-ben, de a lökött IE miatt soronként kellene JS-tel változtatni a háttésort (l. Aliencomputers árlistáját). De akkor is kiszúrok vele, és amint lesz egy kis időm megoldom kulturált formában.

[payskin]

Érdemes elolvasni a Guillotine bugot, mert nem piskóta mit hoz össze az IE!

 

 

Ugye helyből elront minden konténerben levő floatot azzal, hogy a konténer méretét automatikusan a float aljához igazítja. (Ezért szoktak csodálkozni azok, akik először csinálnak életükben floatot, hogy dehát milyen szépen működött az IE-ben, és a Firefoxban meg teljesen rossz. Hát nem, épp fordítva: az IE-ben működik teljesen rosszul, és a Firefox mutatja jól.) Ezek után ha a egy olyan link van a nem floatolt részben, aminek van hover szabálya, és az a szabály tartalmaz háttérre, paddingre, szövegstílusra vagy keretre vonatkozó formázásokat, akkor az IE "megijed", és visszahúzza a konténer méretét a helyes méretre, csak éppen a floatét is.

[Giraffe1]

És például ezt a hibát javították már az IE7-ben? Vagy ne legyek naiv? Bár egyelõre úgyis mindegy, hiszen még egy jó darabig úgyis együtt kell élnünk az IE6 bugjaival.

 

Viszont nemrég valaki lesajnálta az SVG-t, hogy az Adobe teljesen "kifarol" mögüle. Az lehet, de úgy tûnik, a Firefox 3 igen nagyot fog lépni ezen a téren, és akkor majd sok szép és érdekes vektoros grafikákkal lehet feldobni az oldalakat.

[payskin]

Állítólag az összes position-is-everything hibát kijavították, és ez az egyik.

[h.arpad]

Mit jelent a !important egy tulajdonság után? Jó, tudok angolul, de úgy értem, mi a hatása?

[ladislas]

Megoldást keresek:

készítettem a div-et, melynek szöveg és esetenként egy kép a tartalma. Ha kevés benne a szöveg, a kép kívülre csúszik (alul), ha min-height tulajdonságot adok neki, akkor pedig túl magasak maradnak azon div-ek, ahol csak szöveg van. Nem mutat szépen. Tud valaki olyan megoldást, hogy a div tartalma a képhez és ne a szöveges tartalomhoz igazodjon?

[h.arpad]

Hogy érted azt, hogy "kívülre csúszik" a kép? Be tudnád linkelni a HTML-t CSS-sel?

[ladislas]

Itt van egy példa a problémára:

http://www.portnet.hu/css.htm

[h.arpad]

"box-szoveg" nevû class nincs, és az egyik div-ben használod. Miért nem jó az alábbi megoldás?

 

.box-szoveg {
    height: 117px;
}

 

Vagy esetleg csökkentsd a div-ek számát, úgy, hogy keretet a border-... és border-...-color tulajdonsággal adod meg.

[ladislas]

Nekem arra van szükségem, hogy a tartalomhoz (kép+szöveg) automatikusan méretezze a keretet. A te megoldásodnál a fix magasság után a tartalom túlcsordul, rosszul mutat. Egyéb ötlet?

/A 'ox-szoveg'rész valóban felesleg volt, azt benne feledtem a kiollózásnál./

[Atys]

Nem kell megadni magasságértéket és akkor nem lesz gond. Nálam ez mûködik!

[h.arpad]

Nem tudom, milyen böngszõvel nézed, de én azt már próbáltam, eredménytelenül. Elvileg logikus lenne.

 

@ladislas:

Ha nem akararod, hogy a tartalom túlcsorduljon:

overflow: hidden;

[ladislas]

Végül megoldottam a problémát. A 'class' és 'id' dolgokkal még csak most ismerkedem és ez kavart be a dologba. Mûködõképes tanácsot nem kaptam, de azért köszönöm a hozzászólásokat!

[h.arpad]

Bár nem tudom, mi lett volna az elképzelésed, szívesen.

[Atys]

Hmmm.....

[macimeister]

Üdv

 

-Link-

 

Ehez az oldalhoz hasonló ingyenes CMS rendszert keresek.

Szóval külön klánoknak kifejlesztettet. :/

cms laphu n nem találtam eddig, de lehet csak vak vagyok.

Gondoltam bekérdezek ide is.

 

[Atys]

Hello!

 

A következő kialakítást akarom megcsinálni CSS-el, de nem nagyon tetszik a saját megoldásom. (van ahol a pozicionálásnál negatív számot kellet megadnom, hogy jó legyen)

A különböző divekben különböző tartalmak lennének. Volt olyan próbálkozásom, hogy minden absolute módon pozicionáltam, de az nem volt szép, meg különböző felbontásoknál nem mindig középen voltak a divek. Azt szeretném, hogy mindig középre rakjon ki mindent. (mármint ezt a szerkezetet.)

Tudna valaki segíteni?

[Giraffe1]

Nem a legszebb megoldás, de Firefox és IE alatt legalább mûködik. (Szebb lenne, ha az IE is megértené a margin: 0 auto;-t, de sajnos szexuálja közepre helyezni az így pozícionált divet.)

<html>
<head>
    <title>Untitled</title>
    <style type="text/css">
    .center { position: relative; left: 50%; margin-left: -155px; width: 310px; }
    .clear { clear: both; }
    #div1 { float: left; width: 120px; height: 90px; background: #54BEE4; }
    #div2 { float: left; width:  50px; height: 30px; margin: 60px 5px 0 5px; background: #FCCA04; }
    #div3 {    float: left; width: 125px; height: 75px; margin-top: 15px; background: #5C56A4; }
    #div4 { position: relative; left: 50%; width: 230px; height: 115px; margin: 10px 0 0 -115px; background: #09DE2C; }
    </style>
</head>

<body>
<div class="center">
<div id="div1">Div 1</div>
<div id="div2">Div 2</div>
<div id="div3">Div 3</div>
<div class="clear"></div>
<div id="div4">Div 4</div>
</div>
</body>
</html>

[Atys]

Nagyon köszönöm!

 

.center { position: relative; left: 50%; margin-left: -155px; width: 310px; }

 

Miért kell -155px a margin-left-hez?

Én is hasonlóan tudtam megoldani, vagyis minuszokat is használtam a pozicionálásnál. Akkor nem nagyon tévedtem el.

Edited February 16, 2007 by Atys

[Giraffe1]

Azért, mert a left: 50%-kal beküldöd középre, majd mínuszba megadod a szélesség felét, így a div pont középre kerül.

Sokkal elegánsabb lenne - és Firefoxon mûködik is -, a "margin: 0 auto;" megadása, de sajnos IE-n ez nem mûködik.

[Aerius]

Üdv!

 

Nagyjából átfutottam a hozzászólásokat, de nem találtam választ a problémámra.

(Ha esetleg elkerülte volna mégis a figyelmem, akkor elnézést)

 

Szóval az Nvu-ban szeretném azt megcsinálni, hogy ha az egérmutatót ráviszem egy képre, akkor a kép helyén egy másik kép jelenjen meg. Az Nvu-s topicban azt írta valaki, hogy ezt CSS-sel lehet megcsinálni. Le tudná írni valaki, hogy hogyan?! Elõre is köszönöm!