[megoldva] tört méretű cella?

Internet: PHP, CGI, stb.

Adott ez a kis html:


<html>
<head><style>
* { padding: 0px; margin: 0px; border: 0px; }
table { border-collapse: collapse; }
</style></head>
<body>
<table style="width: 200px"><tr>
<td style="width: 100px; padding: 10px"><img width="10" height="10" src="x.y"></td>
<td style="width: 100px; padding: 10px"><div>x</div></td>
</tr></table>
</body>
</html>

Ha nincs benne az img, akkor mindkét cella 80 pixel széles. Ha benne van az img, akkor az első cella 80.3333 pixel széles lesz, a másik meg 79.6667 pixel. Firefox 4, Firebug-gal nézem, a layoutban egész értéket ír, de a computed résznél pontosan ezt. Ez mitől van? Egy weblapot dizájnolok programozóként, nem vagyok túlzottan képben az ilyen érdekességeket illetően, és ott sajnos 2-3 pixellel is széttolódik a layout képek, silverlightok, google maps, stb. miatt.

Megoldás: én néztem be, köszi zoner. A padding miatt a táblázatnak 240 szélesnek kellett volna lennie, 200 pixel mellett a tartalom függvényében méretez a böngésző. Kis különbségeknél csak tört méretben tér el a jótól, egyébként meg az én konkrét esetemben ez magyarázza a sok pixeles eltérést is.

  • 1443 megtekintés

( Erendis42 | 2011. 06. 07., k – 23:33 )

lehet h hülye kérdés, de ha
padding: 10px
után a kiteszed a pontosvesszőket, akkor is?

így első blikkre más 'furcsaságot' nem látok.

ha csak azt nem, hogy pl. "{ padding" meg "; }" közé érdemesebb nem rakni szóközt (mint kiderült). most sajna nem találom hogy hol olvastam, de ha jobb 5leted nincs, veszíteni nem sokat fogsz vele, ha kipróbálod.

Hát, legalább megpróbálta...

Amúgy én azzal kezdeném még mielőtt komolyabban beleásnám magam a kérdésbe, hogy megnézzem, hogy a többi böngésző mit szól a dologhoz. Ha azok is így viselkednek, akkor a te kódoddal van a probléma, de ha azok nem, akkor firefox megjelenítési probléma lehet, és akkor úgy már könnyebb találni egy workaround-ot rá, ha tudod, hogy azt kell keresni...

Mindenesetre én nagyon furcsállnám, ha a cellák nem egész méretűek is lehetnének...

Na megnéztem közelebbről chrome-ban. Szóval arra jutottam, hogy ha a második cellában van div, és az elsőben nincs(az img-t is kivettem), akkor chrome-ban az első 79 pixeles lesz, a második pedig 81. Firebug nincs fent nekem, és most nem akartam leszedni sem, de szerintem megpróbálhatod vagy bedobni egy div-et a az első cellába is az img köré, vagy kivenni a div-et a másodikból... Hátha...

én legalább megpróbálok lekászálódni az óriások válláról, amíg beszélek.

szerk.:

"A világon az emberi ész van a legjobban szétosztva. Mindenki meg van győződve róla, hogy neki egy kicsivel több jutott."

/ Hofi Géza /

ezt most hogy értsem? inkább sehogy?

hogy ne érezd magad sértve igy a reggeli kávé előtt: az au az arany vegyjele. arra próbáltam utalni, hogy a hozzászólásod aranyat ér. ez a modern +1.

alias killall='echo "Wenn ist das Nunstück git und Slotermeyer? Ja. Beiherhund das Oder die Flipperwaldt gersput." | espeak -vde' #That's not funny.

ne haragudj, kedves dri, hogy sárba tiprom az önbecsülésed. legközelebb jobban odafigyelek rá, hogy ne tegyem. komolyan. csak én ilyen velőig romlott, gonosz ember vagyok.

alias killall='echo "Wenn ist das Nunstück git und Slotermeyer? Ja. Beiherhund das Oder die Flipperwaldt gersput." | espeak -vde' #That's not funny.

( aCidicE | 2011. 06. 08., sze – 00:09 )

próbáltad már az egyszerűbb megoldást? (csak egy tipp) 

< td width="100" > a többit meg ugyanúgy css alapon?

de ha már style-t használod sztem érdemes a legutolsó paramétert is ;-l zárni... 

if(you == understand.this){
          get.a.girlfriend;
}

A paddinget az Internet Explorer box modell¹ számolja befelé, egyébként kifelé. (Amúgy fel sem tűnt, hogy nem 200-ra adódik össze, hanem 240-re.)

¹Nem tudom, mikor változtatták meg.

int getRandomNumber() { return 4; }  // ← aláírás
//szabályos kockadobással választva. garantáltan véletlenszerű.  xkcd

( numen v | 2011. 06. 08., sze – 00:34 )

Gazdagítom a buta kérdések sorát: JavaScripttel helyre tudod hozni? Nyilván nem kerülhet be így a végleges változatba, csak érdeklődök…
Más: mind a 80.3̇ pixel, mind pedig a 79.6̇ 80-ra kerekítődik – biztosan ez okozza az eltolódást?

int getRandomNumber() { return 4; }  // ← aláírás
//szabályos kockadobással választva. garantáltan véletlenszerű.  xkcd

+1 a másra. legalábbis könnyű a végére járni az előtte emlitett javascriptes trükkel. állitsd át 80-ra mindkettőt, hátha úgy is ugyanazt látod. gyanitom, hogy igy lesz.

alias killall='echo "Wenn ist das Nunstück git und Slotermeyer? Ja. Beiherhund das Oder die Flipperwaldt gersput." | espeak -vde' #That's not funny.

( bri | 2011. 06. 08., sze – 05:20 )

fordulnak elő ennél furcsább dolgok is táblázatok méretezésekor. workaround: a td-be rakj egy divet, és abba rakd azt, amit amúgy a td-be raknál (jelen esetben a képet), a divet méretezd. csúnya, de működőképes, és az inline style-okból itélve az elegancia nem szempont. :)

alias killall='echo "Wenn ist das Nunstück git und Slotermeyer? Ja. Beiherhund das Oder die Flipperwaldt gersput." | espeak -vde' #That's not funny.

( asci v | 2011. 06. 08., sze – 06:36 )

<td style="width: 100px; padding: 10px; background:#0F0;"><div style="width:80px; overflow:hidden;"><img width="10" height="10" src="x.y"></div></td>

<td style="width: 100px; padding: 10px; background:#00F;"><div style="width:80px; overflow:hidden;">x</div></td>