Chybné zobrazení

~ Anonymní uživatel
~ 68 příspěvků

30. 6. 2007 #1

Dobrý den, mám následující problém: mám dva inputy a chci, aby se mi výsledek výpočtu mezi nimi zobrazoval do třetího needitovatelného. Rozhodl jsem se to vyřešit pomocí umístění divu. bohužel v ie se mi zobrazuje o 2px nižší než v opeře a firefoxu, což poměrně hodně kazí celý vzhled stránky. nevíte někdo co s tím?

div

    {

      border-left: 1px solid #388C85;

      border-top: 1px solid #388C85;

      border-bottom: 1px solid #388C85;

      margin: 0px;

      padding: 0px;

      color: black;

      font-size: 20px;

      vertical-align: middle;

      display: block;

      height: 31px;

      width: 94px;

      background: white;

      text-align: left;

      position: absolute;

      top: 138px;

      left: 296px;

    }

Nahlásit jako SPAM

IP: ...–

Ondřej Šplíchal 0

Posthunter

30. 6. 2007 #2



<link href="std.css" rel="stylesheet" type="text/css" />

<!--[if IE 6]><link href="ie.css" rel="stylesheet" type="text/css" /><![endif]-->

;-)

Nahlásit jako SPAM

IP: ...–

fonadius

~ Anonymní uživatel
~ 68 příspěvků

30. 6. 2007 #3

Moc díky to mě nenapadlo :-)

Nahlásit jako SPAM

IP: ...–

Petr Fojtík0

Věrný člen

9. 7. 2007 #4

Připadá mi zbytečné quli pár DIVům (nebo dokonce jednomu) vytvářet další css soubor.
1. S pomocí vnořených DIVů (MATRJOŠKA) je zajištěno shodné zobrazení v prohlížečích s odlišným box-modelem.
Stránku si zkopíruj a otestuj (je to DEMO) - já to nezkoušel v IE<6 a v Opeře,v té by neměly být problémy.
Vlastní CSS a HTML je tučně.
[Zjistil jsem že při COPY+PASTE v IE je celý zdroják na 1řádku, kdežto v FF je to OK .....nevíte někdo proč ?!?!]

<HTML><HEAD>

<META HTTP-Equiv="Content-Type" CONTENT="text/html; charset=UTF-8">

<TITLE>Stejný vzhled(rozměry+pozice) v IE6,7 FF Opeře....</TITLE>

<STYLE>

#kontrola_x,#kontrola_y,#kontrola_puvodni_x {

 background: #ccc; 

 position: absolute

 }

#kontrola_puvodni_x {

 height: 100%;

 width: 95px;

 top: 0;

 left: 396px; /* ### (=296+100) puvodní je zde pro porovnaní posunut o 100px doprava */

 }

#kontrola_x {

 height: 100%;

 width: 95px;

 top: 0;

 left: 296px;

 }

#kontrola_y {

 height: 33px;

 width: 100%;

 top: 138px;

 left: 0;

 }



#puvodni {                      /* Originální styly (bez úprav - kromě left) */

 border-left: 1px solid #388C85;

 border-top: 1px solid #388C85;

 border-bottom: 1px solid #388C85;

 margin: 0px;

 padding: 0px;

 color: black;

 font-size: 20px;

 vertical-align: middle;  /* !!! v DIVu nemá vliv na vertikální pozici textu (použij line-height) */

 display: block;

 height: 31px;

 width: 94px;

 background: white;

 text-align: left;        /* ??? bez left-padingu se text bije s borderem */

 position: absolute;

 top: 138px;

 left: 396px;  /* ### posunut o 100px doprava */

 }



#obal_upraveny {

 height: 33px;        /* výška-celkem: 33px = 31 + 2*1(border)               */

 width:  95px;        /* šířka-celkem: 95px = 90 + 1*1(border) + 4(padding)  */

 position: absolute;

 top: 138px;

 left: 296px;

 text-align: left;

 background: white;   /* barva pozadí  */

 color: red;          /* barva textu   */

 font-size: 20px;

 line-height: 30px;      /* nastavení vertikální pozice jednořádkového textu v DIVu */

 }

#border_upraveny  {

 border: 1px solid #388C85;

 border-right: 0;

 padding-left: 4px;

 }

#upraveny { height: 31px } 

</STYLE>

</HEAD>



<BODY>

<div id="kontrola_puvodni_x"></div>

<div id="kontrola_x"></div>

<div id="kontrola_y"></div>

 

<div id="puvodni">Původní</div>

  

<div id="obal_upraveny"><div id="border_upraveny"><div id="upraveny">Upravený</div></div></div> 

 </BODY>

</HTML>

2.Ještě jednodušší (snad jen jedno pravidlo ve stylech navíc) je použít vhodný hack (v těch se zatím moc nevyznám neb se styly začínám).

Nahlásit jako SPAM

IP: ...–

Petr Fojtík0

Věrný člen

16. 7. 2007 #5

Teď už umím s HACKy.
Důležitá je deklarace XML předcházející řádek s DOCTYPE-strict , takto běží IE6 (spolu s nižšími verzemi a Operou7 - ty jsem neotestoval) v QUIRK módu.
Ostatní prohlížeče "rozumí" pravidlu HTML>BODY, nastavující rozměry pro STANDARDNÍ režim. [VALIDNÍ ZÁPIS]
Přidal jsem ještě speciálně pro Operu 7.0 pravidlo korigující chybný blokový model. [NEVALIDNÍ ZÁPIS]

<?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> Stejný vzhled(rozměry+pozice) v IE5,6,7 Mozile Opeře7 Opeře </title>

<style>

* box-sizing: {content-box}  /******** Ošetřena Opera7 *********/



#upraveny {

 position: absolute;

 top: 138px;

 left: 296px;

                             /******** Hodnoty pro IE<7 ********/

 height: 33px;        /* výška-celkem: 33px = 31 + 2*1(border)               */

 width:  95px;        /* šířka-celkem: 95px = 90 + 1*1(border) + 4(padding)  */



 margin: 0px;

 padding: 0 0 0 4px;  /* Bez left-padingu se text bije s borderem */

 border: 1px solid #388C85;

 border-right: 0;



 color: black;

 background: white;

 text-align: left;

 font-size: 20px;

 line-height: 30px;   /* MÍSTO vertical-align POUŽIT line-height */

 }

 html>body #upraveny {

                             /******** Hodnoty pro ostatní *******/

 height: 31px;        /* výška-celkem: 33px = 31 + 2*1(border)               */

 width: 90px;         /* šířka-celkem: 95px = 90 + 1*1(border) + 4(padding)  */

 }

</style>

</head>



<body>

<div id="upraveny">Hotovo</div>

</body>

</html>