TEXT: V Opeře,FF,IE6 dobře. V IE7 špatně. – CSS – Fórum – Programujte.com
 x   TIP: Přetáhni ikonu na hlavní panel pro připnutí webu

TEXT: V Opeře,FF,IE6 dobře. V IE7 špatně. – CSS – Fórum – Programujte.comTEXT: V Opeře,FF,IE6 dobře. V IE7 špatně. – CSS – Fórum – Programujte.com

 
Hledat
Rozšířené hledání ›
Nejnovější témata ve fóru
22:06, Startupy Megastroj.cz – Vše na jednom místě: půjčovna, bazar a inze…
21:17, Inzerce FPGA vývojová deska XILINX VIRTEX 5 ML507
20:59, OS - GNU / Linux Ubuntu a OpenSuse
21:47, Offtopic Digitalizace v Česku
10:10, Cinema 4D Export USDC do DaVinci Resolve
16:58, Photoshop Jak odstranit (potlačit) odlesky
Stavba Laser Arény
Laser Game Brno

›

Petroff0
Věrný člen
5. 8. 2007   #1
-
0
-

# 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)?

Nahlásit jako SPAM
IP: ...–
Petroff0
Věrný člen
7. 8. 2007   #2
-
0
-

!!!! TAK JSEM TO VYŘEŠIL - ALE STÁLE TOMU NEMŮŽU UVĚŘIT !!!

1.chyba = poškozený je TEXT.OBSAH (ale pouze v PRVNÍM float bloku) :
text ze 2 krátkých slov je zalomen do 2 řádků <=> jako kdyby byl content-block DIVu příliš úzký
ŘEŠENÍ = vynulovat levý okraj stránky: 

body {margin-left: 0}

2.chyba = poškozený je TEXT.OBSAH ve všech float blocích (ale pouze POSLEDNÍ řádek - odříznut v účaří spodek znaků)
ŘEŠENÍ = nastavit text.prvku relativní pozicování: 
a div span { display: table-cell;

             vertical-align: middle;

             padding 0 4px;

             font: bold 12px/14px sans-serif;

             position:relative;

}


K dokonalosti chybí nějaký postup co umí centrovat i v IE...Nevíte?

Nahlásit jako SPAM
IP: ...–
Petroff0
Věrný člen
7. 8. 2007   #3
-
0
-

!!! TAK UŽ TOMU VĚŘÍM a ruce pryč od toho !!!
IE7 HTML parser chybu nehlásí (blokové prvky DIV uvnitř P, kam patří jen řádkový obsah),
ale strom dokumentu je na hony vzdálen tomu navrhovanému.
Stačilo místo DIVů použít SPANy => struktura je OK.
A dokument je "navíc" plně validní: 

<?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" />

<title>[valid XHTML & CSS] ImageTextLink/FLOATcards</title>

<base href="http://punk.hostuju.cz/uploads/images/" />

<style type="text/css">

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 span { display: table;

        width:  96%;

        height: 50px;

}

a span span { display: table-cell;

              vertical-align: middle;

              position:relative;

              font: bold 12px/14px sans-serif;

}

</style>

</head><body>

    <p>

<a href="http://punk.hostuju.cz"><img width="109" height="111" alt="OK" src="die_for_goverment.jpg" />

  <span><span>The Governmenty</span></span></a>

<a href="http://punk.hostuju.cz"><img width="109" height="111" alt="OK" src="die_for_goverment.jpg" />

  <span><span>The Governmenty</span></span></a>

<a href="http://punk.hostuju.cz"> <img width="109" height="111" alt="OK" src="die_for_goverment.jpg" />

  <span><span>The Government - 1996y</span></span></a>

<a href="http://punk.hostuju.cz"> <img width="109" height="111" alt="OK" src="die_for_goverment.jpg" />

  <span><span>Die For The Governmenty - 1996y</span></span></a>

<a href="http://punk.hostuju.cz"> <img width="109" height="111" alt="OK" src="die_for_goverment.jpg" />

  <span><span>Die Die For The Government - 1996y</span></span></a>

<a href="http://punk.hostuju.cz"> <img width="109" height="111" alt="OK" src="die_for_goverment.jpg" />

  <span><span>Die Die Die For The Government - 1996y</span></span></a>

<a href="http://punk.hostuju.cz"> <img width="109" height="111" alt="OK" src="die_for_goverment.jpg" />

  <span><span>Die For The Government - For The Governmenty</span></span></a>

    </p>

</body></html>

K dokonalosti chybí nějaký postup co umí centrovat i v IE...Nevíte?

Nahlásit jako SPAM
IP: ...–
 ← Zpět na seznam vláken  ← Zpět do Fóra
Zjistit počet nových příspěvků

Přidej příspěvek

Toto téma je starší jak čtvrt roku – přidej svůj příspěvek jen tehdy, máš-li k tématu opravdu co říct!

Ano, opravdu chci reagovat → zobrazí formulář pro přidání příspěvku

×Vložení zdrojáku

×Vložení obrázku

Vložit URL obrázku Vybrat obrázek na disku
Vlož URL adresu obrázku:
Klikni a vyber obrázek z počítače:

×Vložení videa

Aktuálně jsou podporována videa ze serverů YouTube, Vimeo a Dailymotion.
×
 
Podporujeme Gravatara.
Zadej URL adresu Avatara (40 x 40 px) nebo emailovou adresu pro použití Gravatara.
Email nikam neukládáme, po získání Gravatara je zahozen.
-
 Zdrojový kód  Vložit obrázek  Video  Smajlíci
Pravidla pro psaní příspěvků, používej diakritiku. ENTER pro nový odstavec, SHIFT + ENTER pro nový řádek.
Sledovat nové příspěvky (pouze pro přihlášené)
Sleduj vlákno a v případě přidání nového příspěvku o tom budeš vědět mezi prvními.
Reaguješ na příspěvek:

Uživatelé prohlížející si toto vlákno

Uživatelé on-line: 0 registrovaných, 1 host

Podobná vlákna

Problém se zobrazením v IE6+IE7 [help pls] — založil Petroff

CSS

Nesmyslný text navíc ve ff + jiná velikost v opeře — založil Fonadius

HTML / XHTML

IE7 — založil jozo0025

Standardy W3C, v…

M$ IE7 — založil

Offtopic

Widget v Opere — založil Jakub

Offtopic

 

Hostujeme u Českého hostingu       ISSN 1801-1586       ⇡ Nahoru Webtea.cz logo © 2003–2024 Programujte.com
Zasadilo a pěstuje Webtea.cz, šéfredaktor Lukáš Churý