Autor Zpráva
Suta
Profil
Ahoj, prosím o vysvětlení a radu pro vyřešení následujícího příkladu:

Kód 1.

<div style="float: left; border: 5px solid red;">
<img src="img/mrizka.gif" style="margin: 0px; padding: 0px;" width="301px" height="301px">
</div>


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)

<div style="float: left; border: 5px solid red;">
<img src="img/mrizka.gif" style="float: left; margin: 0px; padding: 0px;" width="301px" height="301px">
</div>


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
img {display:block}
Suta
Profil
Railbot
Máš pravdu, díky, vyřešeno. Jen nerozumím tomu, proč float: left dělá (dělal) vlevo tu mezeru...
Petroff
Profil
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
Petroff
Těžko říct proč se namáháš psát takové slohovky, když problém je už vyřešen.
Petroff
Profil
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
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
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
Railbot Já ale nad monitorem nic nevidím..
Railbot
Profil
Petroff
Tak si zkus sednout před něj, uvidiš, že to pomáhá.
Petroff
Profil
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
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? :)

Vaše odpověď

Mohlo by se hodit


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: