IE7 és a táblázatcella szélessége

Internet: PHP, CGI, stb.

A mai nap szántam egy kis időt arra, hogy az Internet Explorer egyik érdekes viselkedésmódját tanulmányozzam. A végére viszont elakadtam, elkelne egy kis segítség...

Adott két nagyon egyszerű HTML kódocska, melyek egyetlen karakterben különböznek egymástól.
Megjelenítésük mégis kicsit "furcsán" történik IE7 alatt. (A többi verziót nem próbáltam, valójában nem is érdekel, inkább csak a probléma izgat.)

Lássuk:Első oldal 


<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="hu" lang="hu">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<table cellpadding="0" cellspacing="0" border="0" align="center" width="100%">
  <tr>
    <td colspan="3" bgcolor="pink">12345678901234567</td>  
    <td bgcolor="blue"></td>
  </tr>
  <tr>
    <td width="100" bgcolor="yellow">100</td>  
    <td bgcolor="magenta">auto</td>  
    <td width="12" bgcolor="green">12</td>  
    <td width="100" bgcolor="red">100</td>  
  </tr>
</table>
</body>
</html>

Saját böngésződben megtekintheted, ha ide kattintasz: 1.html.
Az oldal az általam ismert összes böngészőben helyesen jelenik meg, valahogyan így:

Második oldal 


<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="hu" lang="hu">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<table cellpadding="0" cellspacing="0" border="0" align="center" width="100%">
  <tr>
    <td colspan="3" bgcolor="pink">123456789012345678</td>  
    <td bgcolor="blue"></td>
  </tr>
  <tr>
    <td width="100" bgcolor="yellow">100</td>  
    <td bgcolor="magenta">auto</td>  
    <td width="12" bgcolor="green">12</td>  
    <td width="100" bgcolor="red">100</td>  
  </tr>
</table>
</body>
</html>

Az egyetlen karakter különbséget piros színnel jelöltem.
Saját böngésződben megtekintheted, ha ide kattintasz: 2.html.
IE7 alatt az oldal megjelenítése kissé érdekes: a pixelben megadott táblázatcella-szélességek kalkulálása nem sikerül tökéletesen.

A második sor harmadik cellája szemmel láthatóan nem 12 pixel széles.
Mint látható, az egyes cellákban feltüntettem azt a hosszt, amit szélességben meg (kellene) határoznia a HTML kódnak.

És mindezt az okozza, hogy a táblázat első sorának első cellájának tartalmát, vagyis a megjelenítendő szövegrészt 17 karakterről 18 karakter hosszúra bővítettem.

Van erre magyarázat?

*** UPDATE ***

Többek javaslatára módosítottam a kódot, a 'with' attribútum helyett CSS-ben határozom meg a cellák szélességét:

1css.html
2css.html

De az IE7 megjelenítésén ez mit sem változtat...

*** UPDATE2 ***

Valid XHTML változat:

http://cpu.hu/2css.html

  • 2799 megtekintés

Hát ha így van, akkor alkalmazd a táblázatos design alapszabályát: ne félj táblázat cellába táblázatot szúrni (éljen a tag-soup! :) 


<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="hu" lang="hu">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<table cellpadding="0" cellspacing="0" border="0" align="center" width="100%">
  <tr>
    <td  bgcolor="pink">123456789012345678</td>  
    <td bgcolor="blue" style="width: 100px"></td>
  </tr>
  <tr>
  <td colspan="2">
  <table cellpadding="0" cellspacing="0" border="0" style="width: 100%; margin: 0">
  <tr>
    <td style="width: 100px;" bgcolor="yellow">100</td>  
    <td bgcolor="magenta">auto</td>  
    <td style="width: 12px !important;" bgcolor="green">12</td>  
    <td style="width: 100px;" bgcolor="red">100</td>  
  </tr>
  </table>
  </td>
  </tr>
</table>
</body>
</html>

Egyébként szerintem megérne egy misét, mert valami kövület bugról van szó, ami már létezett IE6 alatt is, most teszteltem :) (Vagy valami köze van az MS beépített mókáihoz, mint az autóverseny az Excel 2000-ben, mert ha jól emlékszem, annak elindításhoz is szükséges volt a böngésző)

( MBence | 2009. 01. 02., p – 12:42 )

[off]
Linkek rosszul :).
Első link 2.html néven a 2.html-re mutat, a második pedig szintén 2.html néven az 1.html-re.
[/off]
[on]
Szar az IE :p. Chrome alatt jó.

"terjed a linux, mint a bunozes" by selli

( bri | 2009. 01. 02., p – 13:30 )

mértékegység? könnyen lehet, hogy amiatt [is] van.
[td width="100px" bgcolor="yellow"]100[/td]

amúgy igen, szar az IE, de erről speciel nem 100%-ban ők tehetnek, hanem mi [a hipertextelő társadalom], akik szétgányoltuk a html-t, létrehoztuk az xml-t, xhtml-t stb., és elértük, hogy az emberek célja honlapkészítéskor ne a "legyen a kód valid" legyen, hanem a "jelenítse meg az IE valahogy, a többi böngésző meg le van kakilva". aztán a fejünkhöz kapunk, hogy az IE a valid kódot sem jeleníti meg normálisan, a krosszbrózer megoldások meg fogynak. kellett nekünk piszkálni a sablonokat...

:: by BRI.
:: config :: Acer TravelMate // Ubuntu Intrepid
:: tothab [a] gmail [pötty] kom
:: black rose immortal's weblog

( tothnandi | 2009. 01. 02., p – 13:31 )

Ha jól tudom XHTML 1.0 Strict már nem lehet width attribútumot használni. Az más dolog hogy persze a böngészők (már amelyik) helyesen jelenítik meg. Próbáld meg a CSS használatát.

( Frantique v | 2009. 01. 02., p – 14:05 )

Töltsük le az IE7 forrását, és nézzük meg hol hasal el... Ja, hogy nem férhetünk hozzá? :D Ciki van. (Amúgy miért nem FF-en próbálod? Az van minden rendszeren.)
--
Coding for fun. ;)

( skynetpro | 2009. 01. 02., p – 14:16 )

internet explorer 4 president ;)

én mindig emiatt utálok webfejleszteni. újabban olyan dolgokon dolgozom csak ami saját felhasználásra szánt és megtehetem hogy kiírom azt hogy "use web browser, man!" és megnyugszom azzal hogyha valid az xhtml+css. (ff-szal meg chrome-mal megnézem és nem szokott gond lenni :) )
ezt nyilván nem tehetném meg ha másnak fejlesztenék valamit...

bugos/szar/fos az ie, ez van. leszarja a szabványt. (én meg leszarom az ie-t)

workaround: próbáld meg div-ekkel meg css-class-ekkel

"divekkel most nincs kedvem játszani"

pedig sajnos már ez az elvárás (főleg a keresés optimalizálás végett is). én épp a napokban csináltam egy oldalt és úgy fejlesztettem, hogy nyitva volt: ff3, safari, chrome, opera, ie7. Sikerült olyan kompromisszumos megoldásokat találnom, hogy minden böngészőben ugyanúgy néz ki és ugyanúgy működik :-) valid xhtml 1.0 és css 2.1. de nem volt egyszerű az eltérő js kezelés miatt sem. reklám nélkül: http://skodacxx.extra.hu

Szépek az elvek, de amíg itt: http://www.google.hu/ táblázatot látok az oldal elrendezése miatt, addig bizony a hatékonyabb utat fogom választani még akkor is, ha a táblázatommal nem vagyok kellően "trendi"...

De jelen topic valóban arra próbál választ adni, hogy mi a manóért törik bele az IE7 bicskája a legegyszerűbb feladatokba is...

ez tény :-) csak sajnos engem ezért utasítottak el anno egy munkától, mert a referenciaoldalam táblázatos volt. azóta tanultam az esetből. sajnos vagy nem sajnos de követni kell a "trendet". :-( egyetértek, hogy a táblázatokat táblázatban kell. de ha esetleg nem ugyanúgy néz ki minden böngészőben, akkor már ferdén néznek rá a ("hitetlen") ie felhasználók. pedig még, ha jól tudom a hivatalos statisztikák szerint 30% az IE-vel böngésző. nem tudom milyen meglepetéseket tartogat nekünk a 8-as verzió. miért érzem úgy, hogy fel kell vennem a listára még egy külön böngészőt fejlesztéskor. . .

Figyelj, attol, mert a google designerei nem tudnak kodolni, attol nem feltetlen a szabaly a hibas, lehetnek peldaul az oldal keszitoi is azok. A google.hu nagyjabol felepitheto div-ekkel is, persze a kepet azt egyszerre kell megjeleniteni, nem lehet darabolgatni, de ez van.
-- 


()=() Ki oda vagyik,
('Y') hol szall a galamb
C . C elszalasztja a
()_() kincset itt alant.

Szerintem a megjelenésnél sokkal lényegesebb a tartalom kérdése. Mert hát tartalom nem nagyon van. Vagy ez csak valami teszt-oldal?

Engem zavarnak az ilyen információk az oldalakon: "Az oldal megtekintése minimum 1152x864-es felbontással, Firefox 3 vagy Opera 9 használatával ajánlott!" Az ilyesmi három dolgot jelenthet:

  1. Az oldal készítője nem tud jó (szubjektív; jó = amit én jónak tartok) oldalt készíteni, vagy azt hiszi, ez így jó (szubjektív; jó = amit ő jónak tart, és azt hiszi, ez a jó objektív módon is jó)
  2. Az oldal készítője szereti a Firefox 3 és az Opera 9 böngészőt (de ezzel nem lehet magyarázni az ajánlott felbontást)
  3. Az előző kettő együtt

:)

tartalom nem az én dolgom már, amúgy 2. (mint írtam mindegyik böngészőben működik, de a felhasználóknak jó lenne megmutatni, hogy más is van az IE-n kívül). felbontást már leírtam.

js-re: ennyi erővel akkor szerinted a weboldalak hányadrésze működik (használhatóan)? web2 kilőve.

OFF vége. többi jöhet PV-ben :P

( nyekhere | 2009. 01. 03., szo – 10:02 )

Nem értek a html-hez nagyon (sőt :), a colspan-nak is utána kellett olvasnom, hogy mit csinál :) ), de ahogy próbálkozgattam vele, nekem úgy tűnik, hogy a colspan megvalósítása van kissé elrontva. A második sor első oszlopának szélessége és a kérdéses karakterlánc hosszának valami közük van egymáshoz. (Pld. ha hozzáraktam még vagy 10 karaktert, akkor már a 100 pixeles első mező is rossz, de van workaround is :) : ha a második sor első mezője pld. 120 pixeles, akkor már jó a táblázat a 18 karakteres stringgel. (Bár írtad, hogy tanulmányoztad a viselkedésmódját, ami sok mindent jelenthet, így lehet, hogy ezen már túljutottál)