# Plovoucí boxy o stejné velikosti tvoří v pravidelné mřížce hlavní obsah stránky = odkazové menu.
# Odkaz zformátovaný jako blok obsahuje: obrázek + popis(= blok s 1-3řádky textu).
# Pole odkazů je uzavřeno do tagu <p> (tuto komplikaci má na svědomí WYSIWYG editor).
Provedl jsem úpravu, která úspěšně vertikálně centruje text popisky v prostoru pod obrázkem.
Použitá metoda není funkční v Internet Exploreru, takže jsem očekával původní TOP-ALIGN zobrazení textu.
IE6 se zachoval korektně.
IE7 to kazí:
1. Nejspodnější řádek má u písmen gqjy ořezány nožičky
2. Popiska v prvním boxu "The Government" je zalomena do dvou řádků (přestože se vejde na jeden)
KÓD PŘED ÚPRAVOU: [Zobrazuje se naprosto bezchybně]
<?xml version="1.0" encoding="utf-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="cs" lang="cs">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<base href="http://punk.hostuju.cz/uploads/images/">
<style>
/*----------------------- Položka menu: -----------------------------*/
/* <a Odkaz> <img Obrázek /> <span> Popiska </span> </a> */
/*-------------------------------------------------------------------*/
body {font-size:100%}
a { float: left;
display: block;
width: 124px;
height: 175px;
border: 1px solid blue;
margin: 3px;
text-align: center;
text-decoration: none;
background: yellow;
cursor: pointer;
}
a img {
border: 1px solid blue;
display: block;
margin: 5px auto;
}
a span {
display: block;
text-indent: 0;
font: bold 12px/14px sans-serif;
margin: 8px auto;
}
</style>
</head>
<body>
<p>
<a href="#"> <img width="109" height="111" src="die_for_goverment.jpg" />
<span> The Government </span></a>
<a href="#"> <img width="109" height="111" src="http://punk.hostuju.cz/uploads/images/die_for_goverment.jpg" />
<span>Die For The Government - 1996</span></a>
<a href="#"> <img width="109" height="111" src="http://punk.hostuju.cz/uploads/images/die_for_goverment.jpg" />
<span>Die Die For The Government - 1996</span></a>
<a href="#"> <img width="111" height="113" src="http://punk.hostuju.cz/uploads/images/die_for_goverment.jpg" />
<span>Die Die Die For The Government - 1996</span></a>
<a href="#"> <img width="109" height="111" src="http://punk.hostuju.cz/uploads/images/die_for_goverment.jpg" />
<span>Die For The Government - For The Government 1996</span></a>
<a href="#"> <img width="111" height="111" src="http://punk.hostuju.cz/uploads/images/die_for_goverment.jpg" />
<span>Die For The Government - 1996</span></a>
</p>
</body>
</html>
KÓD PO ÚPRAVĚ: [IE7 nezobrazuje korektně]
<?xml version="1.0" encoding="utf-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="cs" lang="cs">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<base href="http://punk.hostuju.cz/uploads/images/">
<style>
/*------------------------- Položka menu: -------------------------------*/
/* <a Odkaz> <img Obrázek /> <div><span> Popiska </span></div> </a> */
/*-----------------------------------------------------------------------*/
a { float: left;
display: block;
width: 124px;
height: 175px;
border: 1px solid blue;
margin: 3px;
text-align: center;
text-decoration: none;
background: rgb(255,180,37);
cursor: pointer;
}
a img { border: 1px solid #1646a8;
display: block;
margin: 5px auto;
}
a div { display: table;
width: 96%;
height: 54px;
text-align: center;
}
a div span { display: table-cell;
vertical-align: middle;
padding: 0 6px;
text-indent: 0;
font: bold 12px/14px sans-serif;
}
</style>
</head><body>
<p>
<a href="#"><img width="109" height="111" src="die_for_goverment.jpg" />
<div><span>The Governmenty</span></div></a>
<a href="#"> <img width="109" height="111" src="die_for_goverment.jpg" />
<div><span>The Government - 1996y</span></div></a>
<a href="#"> <img width="109" height="111" src="die_for_goverment.jpg" />
<div><span>Die For The Governmenty - 1996y</span></div></a>
<a href="#"> <img width="109" height="111" src="die_for_goverment.jpg" />
<div><span>Die Die For The Government - 1996y</span></div></a>
<a href="#"> <img width="109" height="111" src="die_for_goverment.jpg" />
<div><span>Die Die Die For The Government - 1996y</span></div></a>
<a href="#"> <img width="109" height="111" src="die_for_goverment.jpg" />
<div><span>Die For The Government - For The Governmenty</span></div></a>
</p>
</body></html>
Co s tím (poraďte pls)?