Autor Zpráva
richinek
Profil *
#1 · Zasláno: 24. 2. 2007, 14:10:17
Odpovědět Citovat
Jak konkrétně odstranit 3px bug v tomto layoutu (http://css.interval.cz/priklady/priklad-9-1.htm), který se objevuje v IE6? Jedná se o odskok textu v prostředním sloupci.


CSS:
body, html
{
border: 0px none;
margin: 0px;
padding: 0px;
font-family: "Trebuchet MS", "Geneva CE", lucida, sans-serif !important;
font-size: small !important;
}

.resetovac
{
border: 0px none;
margin: 0px;
padding: 0px;
float: none;
clear: both;
width: 0px;
height: 0px;
line-height: 0px;
font-size: 0px;
}

p, img, table, tr, th, td, h1, h2, h3, h4, h5
{
border: 0px none;
margin: 0px;
padding: 0px;
}

#bodyhlavicka
{
background-color: #ffffcc;
}

#bodypaticka
{
background-color: #ffffcc;
}

#strankahlavicka
{
background-color: #dddddd;
}

#strankapaticka
{
background-color: #dddddd;
}

#strankaobal
{
width: auto;
min-width: 600px;
max-width: 900px;
margin: 0px auto 0px auto;
}

#strankaobal1
{
background: url('left.gif') top left repeat-y;
}

#strankaobal2
{
background: url('right.gif') top right repeat-y;
}

#levypanelobal
{
float: left;
width: 170px;
margin: 5px 0px 5px 5px;
padding: 2px 2px 2px 2px;
font-size: 90%;
}

#pravypanelobal
{
float: right;
width: 130px;
margin: 5px 5px 5px 0px;
padding: 2px 2px 2px 2px;
font-size: 85%;
}

#hlavnipanelobal
{
padding: 5px 150px 5px 190px;
}

#hlavnipanelhlavicka
{
background-color: #dddddd;
}

#hlavnipanelpaticka
{
background-color: #dddddd;
}
CSS pro MSIE
#strankaobal
{
width: 600px;
width: expression(document.body.clientWidth<604 ? "600px" : (document.body.clientWidth>900 ? "900px" : "auto" ) );
}

#levypanelobal
{
margin-left: 2px;
}

#pravypanelobal
{
margin-right: 2px;
}



XHTML:
<html>
<body>
<div id="strankaobal">
<div id="strankaobal1">
<div id="strankaobal2">

<div id="strankahlavicka">
<h1>Hlavička</h1>
</div>

<div id="strankavnitrek">
<div id="strankavnitrek2">

<div id="levypanelobal">
<div id="levypanelvnitrek">

<h1>Levý panel</h1>
<hr />
<div>
<p>Lorem ipsum dolor sit amet...</p>
</div>

</div>
</div>

<div id="pravypanelobal">
<div id="pravypanelvnitrek">

<h1>Pravý panel</h1>
<hr />

<div>
<p>Lorem ipsum dolor sit amet...</p>
</div>

</div>
</div>

<div id="hlavnipanelobal">
<div id="hlavnipanelvnitrek">

<div id="hlavnipanelhlavicka">
<h1>Hlavička obsahu</h1>
</div>

<h1>Nadpis 1</h1>
<hr />

<div>
<p>Lorem ipsum dolor sit amet...</p>
</div>

<hr />

<div id="hlavnipanelpaticka">
<h1>Patička obsahu</h1>
</div>

</div>
</div>

<div class="resetovac"> </div>

</div>
</div>

<div id="strankapaticka">
<h1>Patička stránky</h1>
</div>

</div>
</div>
</div>

</body>
</html>
Eddie
Profil
#2 · Zasláno: 24. 2. 2007, 14:16:42
Odpovědět Citovat
tomu textu nastav margin na -3px
Railbot
Profil
#3 · Zasláno: 24. 2. 2007, 14:21:01
Odpovědět Citovat
Použij hledání, už se to tu stokrát řešilo.
http://ie-brouci.dero.name/3px-bug.html
richinek
Profil *
#4 · Zasláno: 24. 2. 2007, 14:24:49
Odpovědět Citovat
p {
margin-left: -3px;
}


Nezabírá.
richinek
Profil *
#5 · Zasláno: 24. 2. 2007, 14:51:05
Odpovědět Citovat
Ani toto nepomáhá.


#levypanelobal
{
margin-left: -3px;

}
richinek
Profil *
#6 · Zasláno: 24. 2. 2007, 15:06:27
Odpovědět Citovat
Ani toto.

#levypanelobal
{
margin-right: -3px;

}


Už začínám z toho šedivět, poraďte mi, prosím.
Davex
Profil
#7 · Zasláno: 24. 2. 2007, 18:26:36 · Upravil/a: Davex
Odpovědět Citovat 
/* \*/

* html #hlavnipanelvnitrek {

	height: 1%;

	width: 100%;

	overflow: hidden;

}

/* */



Pro IE/Win stačí nastavit výšku nebo šířku. Overflow a width řeší problém s odskakováním při zúžení okna, pokud by byl v odstavci text kurzívou.
richinek
Profil *
#8 · Zasláno: 24. 2. 2007, 19:05:01
Odpovědět Citovat
Davexe,

bohužel to taky nefunguje, prostřední sloupec se posune dolů a začíná až pod koncem levého menu :(
jonge
Profil
#9 · Zasláno: 24. 2. 2007, 19:34:45
Odpovědět Citovat
richinek
Já to řeším takto (použij si jakýkoliv IE hack):

width: (číslo)px;

Stačí tam dát šířku takovou, aby se ti ten text nezobrazil pod menu. Takže zkoušet a testovat ;)
richinek
Profil *
#10 · Zasláno: 24. 2. 2007, 20:01:08
Odpovědět Citovat
584px je maximum, které funguje :)

Děkuji všem zúčastněným.


* html #hlavnipanelvnitrek {

height: 100%;

width: 584px;

overflow: hidden;

}
Časová prodleva: 17 let
Toto téma je uzamčeno. Odpověď nelze zaslat.

0