| Autor | Zpráva | ||
|---|---|---|---|
| Suta Profil |
#1 · Zasláno: 3. 10. 2007, 10:36:46 · Upravil/a: Suta
Ahoj, prosím o vysvětlení a radu pro vyřešení následujícího příkladu:
Kód 1.
Zobrazení kódu 1. 
Otázka 1. Proč je (v IE) dole ta škaredá bílá mezera? :) Zkoušel jsem vše... (asi tedy téměř vše...) Kód 2. (pozn.: oproti kódu jedna pouze přidáno do stylu pro pro tag img float: left)
Zobrazení kódu 2. 
Otázka 2. Proč je (v IE) ta škaredá bílá mezera vlevo a taky vpravo? :) Opět veškeré mé pokusy se jí zbavil selhaly... PS: kód je opravdu pouze jako ilustrace, o jaký problém se mi jedná, a právě vyřešení tohoto příkladu mi postačí. Připomínám, že obrázek mřížky žádnou bílou mezeru neobsahuje a taky rozměry 301px uvedené v kódu jsou totožné s rozměry obrázku :) Předem díky všem. |
||
| Railbot Profil |
#2 · Zasláno: 3. 10. 2007, 10:47:44
img {display:block}
|
||
| Suta Profil |
#3 · Zasláno: 3. 10. 2007, 11:01:22
Railbot
Máš pravdu, díky, vyřešeno. Jen nerozumím tomu, proč float: left dělá (dělal) vlevo tu mezeru... |
||
| Petroff Profil |
#4 · Zasláno: 3. 10. 2007, 14:41:30
Kod 1: zkus přijít sám na to, co dělá tu mezeru a proč je velká tak jak je velká
nápovědy: 1. přidej do divu nastavení velikosti písma a nastav na 10px 20px 40px 4px 1px a pozoruj <div style="float: left; border: 5px solid red; FONT-SIZE: 20px;"> 2.přidej před obr. text a znovu měň velikost pisma <div style="float: left; border: 5px solid red;FONT-SIZE: 28px;">ABC<img src="img/mrizka.gif" style="margin: 0px; padding: 0px;" width="301px" height="301px"></div> 3.Pak tam nech jen písmo(pryč s obrázkem) a do třetice..... 4.zkus zjistit css vlastnost display obrázku => na to která to je můžeš přijít i tak že je obě zkusíš a zkontroluješ vzhled: <div style="float: left; border: 5px solid red;"><img src="img/mrizka.gif" style="margin: 0px; padding: 0px;display:inline" width="301px" height="301px"></div> <div style="float: left; border: 5px solid red;"><img src="img/mrizka.gif" style="margin: 0px; padding: 0px;display:block" width="301px" height="301px"></div> POZNÁMKA: 1.buď jsou rozměry součásti stylů a můžou mít různé jednotky [px,pp,ex,em,cm,%...] =>NUTNO UVÉST KTERÉ <img src="img/mrizka.gif" style="width:300px; height:20em"> 2.nebo jde o atributy tj. hodnoty vždy v pixelech (kt.se neuvádějí) <img src="img/mrizka.gif" width="301" height="301"> |
||
| Railbot Profil |
#5 · Zasláno: 3. 10. 2007, 15:12:55
Petroff
Těžko říct proč se namáháš psát takové slohovky, když problém je už vyřešen. |
||
| Petroff Profil |
#6 · Zasláno: 3. 10. 2007, 15:17:45
Suta
Kod 2 snažím se experim.na to přijít Můžeš mi říct co ti dělá tahle HTML v prohlížeči ? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> </head> <body> <div style="float: left; border: 5px solid red;"> <img src="img/mrizka.gif" style="float: left; margin: 0px; padding: 0px;" width="301" height="301"> </div> </body> </html> |
||
| Petroff Profil |
#7 · Zasláno: 3. 10. 2007, 15:20:12 · Upravil/a: Petroff
Railbot
Takhle jsem ho vyřešil a následně napsal v době kdy ještě NEBYL vyřešen ....píšu hrozně pomalu :=) Navíc o vysvětlení té mezery tam nepadlo ani slovo... |
||
| Railbot Profil |
#8 · Zasláno: 3. 10. 2007, 15:26:15
Petroff
No jestli jsi to psal 3 hodiny, tak to potěš :) O mezeře slovo nepadlo, mezeru řeší můj příspěvek výše. |
||
| Petroff Profil |
#9 · Zasláno: 3. 10. 2007, 15:28:06
Railbot Já ale nad monitorem nic nevidím..
|
||
| Railbot Profil |
#10 · Zasláno: 3. 10. 2007, 15:29:39
Petroff
Tak si zkus sednout před něj, uvidiš, že to pomáhá. |
||
| Petroff Profil |
#11 · Zasláno: 3. 10. 2007, 17:01:08
Ty mezery jsou široké 3px. A v IE existuje bug 3px tak nevím.
Pokusy jsem zjistil, že ve standardním modu je to v pořádku. A v modu zpětné kompatibility (quirks) stačí nastavit L,R -3px margin. Äkorát to nepomíchej (záporný okraj ve standartním režimu NE!!!!!!!) <html> <head> </head> <body> <div id="obr"style="float: left; border: 5px solid red;"> <img src="img/mrizka.gif" style="float: left; margin: 0px -3px; padding: 0px;" width="301" height="301"> </div> <script> /* Tohle ti vypíše režim (kdyby sis nebyl jistý) */ alert(document.compatMode); /* napíše: BackCompat */ </script> /* schovej do šuplíku */ </body> </html> |
||
| Suta Profil |
#12 · Zasláno: 3. 10. 2007, 17:57:08
Petroff
Experimentama jsi mě trknul, díky moc. Již mimo téma: zkrátka náš "oblíbený" IE je nevyspytatelný. Kdo ty bugy zná nebo na ně jednou přijde, je za vodou (a může hádat další :) Kdo je nezná a chce na ně přijít... pevné nervy přeju. Sám vím, o čem píšu. Vy to neznáte? :) |
||
|
Časová prodleva: 17 let
|
|||
0