Autor Zpráva
jirka2
Profil *
Ahoj,
mám takovýto kód:
<!DOCTYPE html>
<html lang="cs">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>TEST</title>
<style type="text/css">
.obrazek {
    width: 100px;
    height: 100px;
    float: left;
    border: solid 1px black;
    margin-right: 40px;
}
</style>
</head>
<body>
<img class="obrazek" src="cosi.jpg" alt="test">
<ul>
<li>aaaaaaaaaaaaaaaaa
<li>aaaaaaaaaaaaaaaaa
<li>aaaaaaaaaaaaaaaaa
<li>aaaaaaaaaaaaaaaaa
<li>aaaaaaaaaaaaaaaaa
<li>aaaaaaaaaaaaaaaaa
<li>aaaaaaaaaaaaaaaaa
<li>aaaaaaaaaaaaaaaaa
<li>aaaaaaaaaaaaaaaaa
<li>aaaaaaaaaaaaaaaaa
<li>aaaaaaaaaaaaaaaaa
<li>aaaaaaaaaaaaaaaaa
</ul>
</body>
</html>
Ve všech mě dostupných prohlížečich se zobrazuje správně, tedy vše obtéká obrázek. Ale jen v IE9 ty puntíky před tagem <li> neobtékají obrázek. Samotný text tagu, ale ano. Pokud v IE9 nastavím režim kompability je to OK. Také je to OK, pokud dám starší DOCTYPE. Je to nějaký bug IE9 nebo dělám něco špatně?


Jen doplnění, místo obrázku může být i DIV a stále se to chybně zobrazuje v IE9.
<div class="obrazek"></div>
greeny
Profil
Pomohlo mi:
do stylu:
div.test {float: left;}
a v kódu odrážky uzavřít do:
<div class="test"><!-- zde odrážky --></div>
jirka2
Profil *
greeny:
Jenže teď spodní <li> neobtékají obrazek, jsou vertikálně zarovnané a vlevo dole je pak zbytečná mezera. Zde můj kód:
<!DOCTYPE html>
<html lang="cs">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>TEST</title>
<style type="text/css">
.obrazek {
    width: 100px;
    height: 100px;
    float: left;
    border: solid 1px black;
    margin-right: 40px;
}
.test {
    float: left;
}
</style>
</head>
<body>
<div class="obrazek"></div>
<div class="test">
<ul>
<li>aaaaaaaaaaaaaaaaa
<li>aaaaaaaaaaaaaaaaa
<li>aaaaaaaaaaaaaaaaa
<li>aaaaaaaaaaaaaaaaa
<li>aaaaaaaaaaaaaaaaa
<li>aaaaaaaaaaaaaaaaa
<li>aaaaaaaaaaaaaaaaa
<li>aaaaaaaaaaaaaaaaa
<li>aaaaaaaaaaaaaaaaa
<li>aaaaaaaaaaaaaaaaa
<li>aaaaaaaaaaaaaaaaa
<li>aaaaaaaaaaaaaaaaa
</ul>
</div>
</body>
</html>
Plaváček
Profil
jirka2

Nevím přesně, jak si představuješ výsledný vzhled, ale mohlo by pomoci:

ul {list-style:inside}

Případně, aby to vypadalo lépe, zrušíš margin-right u obrázku a nastavíš margin-left: 140px pro UL.
jirka2
Profil *
Plaváček:
BINGO, list-style-position:inside; pomohlo. Zase jsem se něčemu přiučil, díky za pomoc!


jirka2:
Jenom když text v <li> je do více řádků, tak to není uplně pěkné. Ale pořád je to lepší než to bylo!
Plaváček
Profil
jirka2:

I to lze vyřešit - ostatně dobrou praxí je odrážky vyrábět obrázkem na pozadí. Bez kontextu umístění na konkrétní stránce se ale těžko radí.

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

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