Autor Zpráva
lukigod
Profil
#1 · Zasláno: 22. 10. 2009, 11:04:45
Odpovědět Citovat
Dobrý den, tak nevím zda popis tématu přesně vystihuje co mám za problém. Mám DIV který má nějakou pohyblivou šířku a v něm dalších 10, které by měly být všechny stejně široké. Pokud ale zadám všem vnitřním divům šířku 10% tak u exploreru se mi ty divy seřadí od kraje do kraje (což předpokládám) ale u Chrome (počítám to samé bude firefox atd..) mi na konci vzniká mezera. Udělal jsem ještě to, že dám všem divům 9% šířku a po půl procentu oba krajní marginy. V IE výsledek očekávaný, ovšem Chrome bohužel ne. Přikládám dvě foto, jelikož to nemám nikde pověšené na netu a kód css.
Díky za rady

IE: takto předpokládám


CHROME: takto nechci 

1#kalendar div {
2  width:9%;
3  margin-left: 0.5%;
4  margin-right:0.5%;
5  float:left;
6  position:relative;
7  top:-60px;
8  text-align:center;
9  background-color: white;
10  font-size: 85%;
11  }
#kalendar div {
  width:9%;
  margin-left: 0.5%;
  margin-right:0.5%;
  float:left;
  position:relative;
  top:-60px;
  text-align:center;
  background-color: white;
  font-size: 85%;
  }


Díky Lukáš
Bubák
Profil
#2 · Zasláno: 22. 10. 2009, 12:45:11
Odpovědět Citovat
Sjednoť box modely.
lukigod
Profil
#3 · Zasláno: 22. 10. 2009, 13:40:41
Odpovědět Citovat
Bubák:
Díky, v tom bude zakopaný pes, ale jakým způsobem to použít nevím. Zkouším různě, ale stále je to stejné. Nastavil jsem divum 
-webkit-box-sizing: border-box;
-webkit-box-sizing: border-box;
a nic :(. Jinak doctype mam nastavené: 
<!DOCTYPE HTML>
<!DOCTYPE HTML>
nebude problém v tomto?? vše ostatní mi v tomhle modu funguje optimálně, proto jej takto mám.
Trejpa
Profil
#4 · Zasláno: 22. 10. 2009, 18:01:47
Odpovědět Citovat
lukigod:
„<!DOCTYPE HTML>“
Tohle přepne všechny prohlížeče do standardního režimu, kde je výchozím box modelem content-box. Tak ho neměň. Pokud už jsi ho něčemu nadřazenému změnil, tak ho u těch prvků zase vrať zpět: 
-moz-box-sizing : content-box;
-webkit-box-sizing: content-box;
box-sizing: content-box;
-moz-box-sizing : content-box;
-webkit-box-sizing: content-box;
box-sizing: content-box;
lukigod
Profil
#5 · Zasláno: 22. 10. 2009, 23:15:28
Odpovědět Citovat
Trejpa:
no to ja tam mam tenhle doctype od zacatku, nic neměním. to já jsem dle rady bubáka chtěl nastavit Chromovi aby pocital sirku stejne jako IE, ale nedari se. mám pocit, že je problém hlavně v těch procentech, protože std šířky mi jdou jako normálně. Už jsem tady četl nějaký komentáře, ale jsem z toho tumpach :(
ja to asi někam pověsím, aby byl videt kod.. jestli to pomůže..
Trejpa
Profil
#6 · Zasláno: 22. 10. 2009, 23:22:45
Odpovědět Citovat
lukigod:
„ja to asi někam pověsím, aby byl videt kod.. jestli to pomůže..“
Obvykle to pomáhá.

„je problém hlavně v těch procentech“
Různé prohlížeče zaokrouhlují procenta různě, ale to by se na deseti prvcích vedle sebe projevilo maximálně o deset pixelů. Spíš bude problém v tom, z čeho se ty procenta počítají - a tady bych se opět zajímal o box model nadřazeného prvku.
lukigod
Profil
#7 · Zasláno: 23. 10. 2009, 00:19:20
Odpovědět Citovat
Trejpa:
no ja si ted tady různě čtu o box-modelech a všude se tak nějak píše, že explorer to vykresluje špatně. Ale mně to vykresluje tak jak já chci, ale ostatní prohlížeče ne. Zkouším tedy v IE8 ve standardním modu.
Ale jestli to dobre chapu, tak: explorer chybně počítá šířky prvků při použití width(height) zároveň s padding(resp.border). Což já tady nepoužívám. Zkusil jsem i nastavit natvrdo border na nulu a padding taky, ale Chrome zatvrzele nechává mezeru - nedopočítá se.
... o par minut pozdeji: tak jsem testoval když nebudu mit 9% a marginy po půl procentech ale stejnych deset divu po deseti procentech a zrovna budu mít okno otevřené tak, že div ve kterém leží těhle 10, bude mít šířku dělitelnou deseti tak je vše v pořádku.

Proste: mam div který má šířku dejmetomu 600px; a v něm je deset malých šířkou 10%. - Vše OK.
jakmile ten div je například 605px tak se u Chrome vytvoří vpravo mezera 5px;
..ach jo je to nějaký zamotaný
Trejpa
Profil
#8 · Zasláno: 23. 10. 2009, 00:51:02 · Upravil/a: Trejpa
Odpovědět Citovat
lukigod:
„všude se tak nějak píše, že explorer to vykresluje špatně“
Ale ne. Ve standardním režimu Internet Explorer od verze 6 vykresluje box model obsahový, tedy content box. Starší IE a nové ve zpětně kompatibilním režimu vykreslují box model okrajový, tedy border box. Do osmé verze IE to však nelze v CSS přepnout, takže se to řídí jen režimy podle použitého zápisu !DOCTYPE (nejjednodušší: neuvedu nic - zpětně kompatibilní; uvedu jen <!DOCTYPE HTML> - standardní).

„Ale jestli to dobre chapu, tak: explorer chybně počítá šířky prvků při použití width(height) zároveň s padding(resp.border).“
Pouze ve zpětně kompatibilním režimu (popis). Při použití <!DOCTYPE HTML> na úplném začátku stránky máš však jistotu standardního režimu.

„mam div který má šířku dejmetomu 600px“
Znáš-li přesnou velikost, tak se tím netrap - dopočítej si to a zadej přímo v pixelech. Potřebuješ-li to v procentech, tak sem dej živou ukázku, ať se na to můžeme podívat a třeba zjistit, zda je chyba ve stránce nebo jde o vlastnost konkrétního prohlížeče.

EDIT: Překlep.

<mimo téma>
„explorer chybně počítá šířky prvků“
Tady bych s autory těch textů polemizoval nad slovem „chybně“, spíš by problém vystihovalo slovo „jinak“. Box model má totiž dost pohnutou historii a ten „standardní“ obsahový nemusí být nutně lepší.
</mimo téma>
Bubák
Profil
#9 · Zasláno: 23. 10. 2009, 01:28:22
Odpovědět Citovat
Trejpa:
„Různé prohlížeče zaokrouhlují procenta různě, ale to by se na deseti prvcích vedle sebe projevilo maximálně o deset pixelů.“
Může to dělat i více, zaokrouhlit se musí šířka, levý margin, pravý margin, takže to může udělat až 3×10-1, tedy 29 pixelů.

lukigod:
Je to tím zaokrouhlováním.
IE8 ve standardním režimu a Firefox vyplní celý DIV, tyto prohlížeče to dělají tak, že některý z DIVů o 10% šířce je o 1px širší, nebo užší.
Takže DIV o šířce 10% z 605px bude někdy široký 60px, jindy 61px, aby se jich 10 akorát vešlo do 605px. Je zajímavé, že IE rozšířil jiné DIVy, než Firefox.

Opera a Chrome (přesněji WebKit) zaokrouhlují dolů, takže DIV o šířce 10% z 605px bude široký 60px.
Starší IE zaokrouhluje matematicky, takže DIV o šířce 10% z 605px bude široký 61px.

V případě 9% a 0.5% to bude ještě složitější.

Pokud požaduješ, aby tohle řešení vypadalo napříč prohlížeči stejně, asi nezbude nic jiného, než použít tabulku.
lukigod
Profil
#10 · Zasláno: 23. 10. 2009, 07:35:45
Odpovědět Citovat
Bubák & Trejpa
Děkuji všem (oběma :), už jsem v obraze.
A už jsem se smířil, že budu muset použít tabulku. Ono se to stejně bude vyplňovat daty z databáze, takže se to bude i sémanticky hodit :) Díky
PS: Budou někdy v budoucnu prohlížeče používat stejné režimy jakéhokoli vykreslování, nebo se s takovýmito věcmi budeme potkávat stále? (to jen tak mimo téma)..
Časová prodleva: 15 let
Toto vlákno je staré, již dlouho do něj nikdo nepřispíval.

Informace a odkazy zde uváděné už nemusejí být aktuální. Nechcete-li řešit zde uvedenou konkrétní otázku, založte si vlastní vlákno, nepište do tohoto. Vložíte-li sem nyní příspěvek, upoutáte pozornost mnoha lidí a někteří z nich si jen kvůli vám přečtou i všechny předcházející příspěvky. Předpokládáte-li, že váš text skutečně bude hodnotný, stiskněte následující tlačítko:


Běda vám, jestli to bude blábol.

0