Záznam z interního vzdělávacího okénka HAVIT z 4.1.2018 je publikován na našem HAVIT YouTube Channel. Téma prezentoval Vít Heřman.
Dotčená témata:
V Internet Exploreru je docela alchymie vyrobit tlačítko, které je široké stejně jako text na něm.
<input type="button" value="Text tlačítka" class="button"/> <asp:Button ID="MyButton" Text="Text tlačítka" class="button"/>
Co jinde funguje, v IE selhává:
.button {
margin:0;
padding:0;
}
Co však kupodivu pomůže, je nastavení:
.button{
padding:0;
width:auto;
overflow:visible;
}
…někdy je lepší nebádat, proč tomu tak je.
Poměrně neznámým fíglem lze v některých browserech zajistit, aby se při tisku dlouhých tabulek, které se nevejdou na jednu stránku, vytiskly určité jejich řádky na každé stránce (záhlaví a zápatí).
Stačí využít sekce tabulky thead a tfoot a nastavit jim ty správné styly.
...
<style type="text/css">
thead {display: table-header-group;}
tfoot {display: table-footer-group;}
</style>
...
<table>
<thead>
<tr>
<td>Hlavička 1</td>
<td>Hlavička 2</td>
</tr>
</thead>
<tbody>
<tr>
<td>123</td>
<td>456</td>
</tr>
...
</tbody>
<tfoot>
<tr>
<td>Patička 1</td>
<td>Patička 2</td>
</tr>
</tfoot>
</table>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Vertikální centrování</title>
<style>
.greenBorder {border: 1px solid green;} /* nepodstatný styl */
</style>
</head>
<body>
<div class="greenBorder" style="display: table; height: 400px; _position: relative; overflow: hidden;">
<div style=" _position: absolute; _top: 50%;display: table-cell; vertical-align: middle;">
<div class="greenBorder" style=" _position: relative; _top: -50%">
libovolný prvek<br>
libovolné výšky<br>
a libovolného obsahu<br>
zůstává vertikálně vystředěný
</div>
</div>
</div>
</body>
</html>
Zdroj: JakPsatWeb.cz
Funguje i s jinými DOCTYPE, vyzkoušeno např. s HTML 4.01 Transitional s loose.dtd.
S pozicování obrázkových bulettů použitých jako list-style-image je děsnej opruz, každý prohlížeč to interpretuje jinak a spolehlivě to snad ani nejde.
Je mnohem jednodušší dát list-style-type:none a obrázkové bulettky udělat jako správně pozicované pozadí li:
ul { list-style-type: none; }
li
{
background-image: url(...);
background-repeat: no-repeat;
background-position: 0 5px;
padding-left: 10px;
}
HAVIT Knowledge Base 