CSS, margin ukazuje jinak
Nazdar pomocníci,
potřebuji docílit, aby se text "Lorem ipsum dolor it met." dostal do bílého obdélníku(aby byl text 20px od horního rohu a od levé strany).
Mohl bych to udělat pomocí padding, ale to IE s tím dělá bugy a proto používat tuto metodu. Když dám tomu divu s textem margin:20px 20px;, tak to udlá margin nadřazenému prvku (rozšíří to zelené místo bílého) než chci.
Foto:
60vee69av
HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
<title>Webík</title>
<link rel="stylesheet" type="text/css" href="styles/main.css" media="screen">
</head>
<body>
<div id="obalovac">
<div id="hlavicka">
</div>
<div id="nav">
</div>
<div id="plovouci">
<div id="levo">
<div class="clanek">
<div class="txt">
Lorem ipsum dolor it met.
</div>
</div>
<div class="clanek">
</div>
</div>
<div id="pravo">
</div>
</div>
</div>
</body>
</html>CSS:
* {margin:0px; padding:0px;}
body {
margin:0px auto;
background-color:rgb(214,214,214);
text-align:center;
}
#obalovac {
width:1000px;
margin:0px auto;
text-align:left;
}
#hlavicka {
background-color:rgb(153,51,51);
width:1000px;
height:100px;
}
#plovouci {
margin:30px 0px 0px 0px;
width:1000px;
}
#levo {
background-color:rgb(102,153,102);
margin:0px 10px 0px 0px;
width:600px;
float:left;
}
#pravo {
background-color:rgb(102,102,204);
width:390px;
height:600px;
float:left;
}
.clanek {
margin:20px 20px;
width:400px;
background-color:#fff;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
}
.txt {
margin:20px 20px;
}
Jak padding dělá v IE bugy?
Nějaké old verze IE možná, ale ty nikdo nepoužívá a ten kdo je používá, tak na tvůj web stejně nepoleze.
Použij padding a nedělej si to zbytečně horší, optimalizovat web pro IE6 je naprostá blbost ;)
Mě to dělá i IE9 to nerozšíří do strany, v Opeře, Chromu a Firefoxu to rozšíří.
A navíc většina Xpčkářů a že jich je, používají IE menší než 9.
Vetsina XPckaru ma sice IE ve verzi nizsi nez 9, ale to neznamena ze ho i pouziva.
Začal bych zde css
Tam jsem také zaačal, právě tam je je padding hackování pomocí margin, aby to bylo "všude optimální". Díky za rady.
A ví teda někdo podstatu této diskuze, proč to ten margin ukazuje jinak, něž má?
čus v jakém programu to děláš? :)
PSPad