dvijtý rámeček v Mozile

Třeba
border: 10px #fcc double;

Aha promiň, odpovídal jsem na to první. Na ten druhý upřesněný dotaz je odpověď přepočet procent v procentuálním zadání velikosti fontu v téhle definici. Chce to jenom poladit , nebo možná dát v jednotkách em (těch 80%).


#main-content {
padding: 0.5em 1em 2em 1em;
font-size: 80%;
}

Nastav font-size:1em; to by mělo pomoci. BTW je tam volaný js, který tam není <script type="text/javascript" src="js.js"></script>

Tak jsem nastavil font-size na 0.8em a některý rámečky zmizely úplně. Myslim, že tudy cesta nevede :(

Neni to bug Mozilly? Jiný prohlížeče to nedělaj :)

Martin: Obávám se že máš pravdu - tady http://diskuse.jakpsatweb.cz/index.php?action=vthread&topic=4878&forum =7&page=-1 jsem psal o tom, že mám v záloze ještě jeden bug. Je to víceméně ono. Podívej se v Gecku na http://www.brs.cz/new/firma1.php , měň velikost písma a sleduj tu 1px mezeru mezi položkami toho svislého menu. Občas tam najednou budou 2px. Ono je to teda ještě trochu jinak - jak jsem s tím bojoval, tak jsem tu 1px mezírku nakonec udělal přímo v tom obrázku na pozadí a mezi položkami menu je 0px. Ale občas se tam jeden px sám docpe.
Sakra, snad jsem to moc nezamotal.

Zkus zvětšovat text a sleduj menu. u mé stránky http://www.resslovaci.net/test/index.php?co=gb&ok=1 moje menu je ok, žádnej jeden px navíc :)

Není to bug mozilly.

IE zvětšuje písmo po skocích , tzn.
Největší
Velké
Střední
Malé
Nejmenší

Opera zvětšuje vše na stránce, tzn všechny velikosti

Gecko to zobrazuje jinak, nicméně logicky správně. Zvětšuje tak jak je udáno, tedy v tomhle případě něco v em a něco v procentech a tímpádem vzniká při přepočtu na pixely někde jiná šířka té mezery.

Kydyby bylo vše nastaveno v em, nebo vše v procentech tento "problém" nenastane.

Pro kontrlu si zkus zvětšovat písmo v Gecku (ctrl+kolečko myši) a uvidíš, že se ta mezera přesouvá tam kde ten přepočet procent na pixely nevychází.

Pro mě je to bug. Mozilla neumí počítat. IE to zvládá hezky :)

No když máš css správně tak to prostě a jednoduše v pořádném prohlížeči funguje. Viz http://weblog.plavacek.net/miniatura.html

BTW nedivím se, že to nefunguje tak jak by jsi chtěl, jenom první tři definice a velikosti v různých jednotkách to se pak mezi sebou pěkně mele.

body {font: 11pt/1.5 ...
#header {font-size: 90%; ...
#header2 {width: 420px; ...


Možná by jsi si měl do těch komentářů tam napsat místo Nemám rád Mozillu napsat Nenechám si poradit a neumím to doladit pro Mozillu

Kydyby bylo vše nastaveno v em, nebo vše v procentech tento "problém" nenastane.
Tak jsem vše nastavil v procentech, potom v em a dělá to pořád

Podívej se k Plaváčkovi na ten odkaz do css. Vše tam je v em a procenta jsou použitá jen pro 100%. Neříkám, že je to jednoduché, problém nastává při použití jakéhokoliv obrázku. Sám jsem s tím nedávno zápasil. Když říkám vše v em, tak myslím i rozměry udávané v pixelech. Mimochodem už jsem našel tu pravou chybu u id main-content máš jenom 3 hodnoty paddingu a to je asi problém. Jinak můžeš zkusit tenhle styl, ale je potřeba doladit ho v IE, zkoušel jsem to jenom on-line ve Firefoxu.

body {
margin: 1em 1em;
color: #fff;
scrollbar-track-color: #fff;
scrollbar-face-color: #3b6fa4;
scrollbar-highlight-color: #fff;
scrollbar-3dlight-color: #3b6fa4;
scrollbar-darkshadow-color: #3b6fa4;
scrollbar-shadow-color: #fff;
scrollbar-arrow-color: #fff;
background: #315c88;
font: 1em verdana, "geneva ce", lucida, sans-serif;
}
#header {
position: relative;
height: 9em;
font-size: 0.9em;
margin: 0.5em 1em;
}
#header2 {
background: url("pravo.gif") top right repeat-y;
position: absolute;
top: 0;
right: 0;
margin: 0 -0.1em 0 0;
height: 100%;
width: 10em;
}
#logo div {
overflow: hidden;
color: #005744;
font-size: 0.8em;
text-align: left;
cursor: pointer;
}
#logo h1 {
color: #005744;
font-size: 1.2em;
text-align: left;
padding: 0.25em 0 0 0.5em;
}
#logo span {
display: block;
z-index: 1;
margin: 0;
background: url("logo-resslovaci.gif") top left no-repeat;
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
cursor: pointer;
}
#logo a {
color: #ffa500 !important;
text-decoration: none;
}
#nadpis {
margin: 1.5em 0 0.5em;
padding: 1em 2em;
background: #849db8;
}
#nadpis h1 {
font-weight: normal;
font-size: 1.1em;
text-transform: uppercase;
letter-spacing: 0.2em;
}
#content {
min-width: 18em;
width: 99%;
margin: 0 auto;
border: 0.1em solid #3b6fa4;
text-align: left;
background: #315c88;
}
#sidebar {
float: right;
width: 11em;
margin: 0;
}
#sidebar-content {
padding: 1.5em 1em 1em;
font-size: 0.9em;
}
#menu {
display: block;
margin: 0 0 2em;
}
#main {
margin: 1em 11em 0 1.5em;
padding: 0;
_height: 42em;
_overflow: visible;
min-height: 42em;
}
#main-content {
padding: 0.5em 1em 2em 0;
font-size: 0.8em;
}
hr.cleaner {
clear: both;
height: 0.1em;
margin: -0.1em 0 0;
padding: 0;
border: none;
visibility: hidden;
}
h1, h2, h3, h4, h5, h6 {
margin: 0;
font-family: "tahoma ce", "arial ce", "helvetica ce", tahoma, arial, lucida, sans-serif;
}
a:link {
color: #ffa500;
}
a:visited {
color: #ffa500;
}
a:active {
color: #ffa500;
}
a:hover {
color: #ffa500;
text-decoration: none;
}
#navigation ul {
display: block;
border: 0;
margin: 0;
padding: 0;
border-bottom: 0.1em solid white;
font-size: 0.9em;
}
#navigation li {
display: block;
border: 0;
margin: 0;
padding: 0;
list-style-type: none;
height: 2em;
}
#navigation li a {
display: block;
padding: 0.5em 1.5em 0.5em 0.5em;
height: 1em;
letter-spacing: 0.15em;
border-top: 0.1em solid white;
border-left: 1.9em solid #849db8;
text-transform: uppercase;
text-decoration: none;
color: white;
font-weight: normal;
font-family: "tahoma ce", "arial ce", "helvetica ce", tahoma, arial, lucida, sans-serif;
white-space:nowrap;
}
#navigation li a#aktualni {
border-left: 1.9em solid #ffa500;
}
#navigation li a:hover {
border-left: 1.9em solid #ffa500;
text-decoration: underline;
}
.prispevek {
border: 0.1em solid #3b6fa4;
margin: 0;
border-top: 0;
background: #849db8;
}
.prispevek .username {
float: left;
width: 10em;
padding: 1em;
min-height: 5em;
_height: 5em;
margin: 0;
background: #849db8;
}
.prispevek .zprava {
margin: 0 0 0 12em;
padding: 1em;
min-height: 5em;
_height: 5em;
background: #849db8;
}
.prispevek2 {
border: 0.1em solid #3b6fa4;
margin: 0;
border-top: 0;
background: #849db8;
}
.prispevek2 .username2 {
float: left;
width: 10em;
padding: 2em;
margin: 0;
background: #849db8;
}
.prispevek2 .zprava2 {
margin: 0 0 0 12em;
padding: 2em;
background: #849db8;
}

zkoušel jsem to jenom on-line ve Firefoxu
EditCSS je dobrá věc

JJ a když je zdroj nepřehledný ctrl+a , ctrl+c - http://flumpcakes.co.uk/css/optimiser/ ctrl+v, enter, vybrat vše z výsledné textarey a zpátky do prvního tabu a zase ctrl+v a styl je za dvě minuty celý překopaný ;-)

Fred Teď se můžeš přesvědčit, všechno mám v em. Teda kromě #header2 {width: 420px; ...
kde mám obrázek o velikosti 420px a taky kromě border:1px . Jaky by jsi to prosimtě vyladil ty?

Acci Jo a když nevíš kde je problém tak to většinou vyřeší tenhle bookmarklet http://slayeroffice.com/?c=/content/tools/modi.html

Musí být i ten border v em, zkopíruj si ten styl výš, ten by měl být v pohodě, tedy asi bohužel kromě IE.

Ten styl co jsi sem vložil, dělá to stejný jako ten můj.

Trochu jsem se sek.... ale při zvětšení písma to dělá zas ten dvojtej rámeček.
Nechám to tvoje řešení...díky moc.

Tak jsem se nesek :) Teď to ty rámečky spojuje :)

Máš pravdu asi je to bug, trochu jsem to čistil aby bylo dobře vidět a zbylo tohle

*{
margin:0;
padding:0;
}
.prispevek {
font-size:1em;
border: 0.5em solid red;
background: #fff;
width:50em;
}
.username, .zprava {
float: left;
background: gray;
width:25em;
}
.zprava {
margin: 0 0 0 25em;
float:none;
}
Je to pěkně vidět :-(

Stránku jsem přesunul jsem http://www.resslovaci.net/test/index.php?co=gb2

Bohužel, jedná se o chybu ve vykreslovacím jádře Mozilly a v podstatě se s tím moc dělat nedá. Jedině snad v tomto případě použít tabulku.

Martin: Když se ti snažím pomoct a potvrzuju ti, že je to bug, což dokládám pomocí menu na svých stránkách, opravdu nechápu proč mi na to odpovídáš Zkus zvětšovat text a sleduj menu. u mé stránky http://www.resslovaci.net/test/index.php?co=gb&ok=1 moje menu je ok, žádnej jeden px navíc :) O tvým menu tu snad nebyla řeč.

Takže se potvrzuje že je to opravdu bug, viz můj první příspěvek. To jsem paradoxně rád, protože aspoň vím, že chyba není u mě.

Jo jo omlouvám se Martinovi i Habendorfovi, když jsem zkoušel ten styl co jsem sem pástnul, fungovalo mi to dokud jsem hodně nezvětšil písmo. Je to vina spíš mé zbrklosti. Martin za to nemůže, takže sorry.

Napadlo mě ještě.. zkus se obejít bez borderu a použít margin. Čili, hlavnímu bloku (.prispevek2) nastavíš barvu pozadí, jako máš teď rámečky a jednotlivé vnořené bloky od sebe oddělíš marginem.. magin-bottom: 1px. Tím bys měl dosáhnout stejného efektu a s tím Mozilla problém mít nebude.