Chybné zobrazení – CSS – Fórum – Programujte.com
 x   TIP: Přetáhni ikonu na hlavní panel pro připnutí webu
Reklama
Reklama

Chybné zobrazení – CSS – Fórum – Programujte.comChybné zobrazení – CSS – Fórum – Programujte.com

 

Hledá se programátor! Plat 1 800 € + bonusy (firma Boxmol.com)
fonadius
~ Anonymní uživatel
68 příspěvků
30. 6. 2007   #1
-
0
-

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: ...–
Reklama
Reklama
30. 6. 2007   #2
-
0
-



<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
-
0
-

Moc díky to mě nenapadlo :-)

Nahlásit jako SPAM
IP: ...–
Petr Fojtík0
Věrný člen
9. 7. 2007   #4
-
0
-

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
-
0
-

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>

Nahlásit jako SPAM
IP: ...–
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.
-
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, 5 hostů

 

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