Autor Zpráva
imploder
Profil *
#1 · Zasláno: 21. 8. 2007, 20:51:42
Odpovědět Citovat
Úplně nahoře mám na stránce šedý pruh, ve kterém je nadpis. Ten div je označený jako .heading a má tenhle styl:

.heading {
background-color: #ECEEF0;
margin: 0px;
padding: 0px;
}

Přestože i body jsem nastavil margin a padding na 0, Firefox ten šedý pruh pořád dává asi 5px pod začátek stránky. Zvláštní je, že když tam dám rámeček (ten tam nechci), posune se to i ve FF správně úplně nahoru.

Je to takový hodně primitivní problém, ale vůbec nevím čím to je. V Opeře i IE7 je to úplně nahoře i bez určení marginu.
Plaváček
Profil
#2 · Zasláno: 21. 8. 2007, 20:53:34
Odpovědět Citovat
imploder

Co máš uvnitř .heding ?
Zdeněk Košťál
Profil
#3 · Zasláno: 21. 8. 2007, 21:05:29
Odpovědět Citovat
imploder

Vážně by to chtělo obšírnější popis... buď více kódu anebo přímo link na stránku...
imploder
Profil *
#4 · Zasláno: 22. 8. 2007, 07:54:18
Odpovědět Citovat
kód stránky:
----------------------------------
<?xml version="1.0" encoding="windows-1250"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Awkwords - word generator</title>
<meta http-equiv="content-type" content="text/xml; charset=windows-1250" />
<meta http-equiv="content-language" content="en" />
<meta http-equiv="expires" content="Sun 26 Jun 2005 12:00:00 GMT" />
<link rel="stylesheet" href="default.css" type="text/css" media="all" />
<script language="JavaScript" type="text/javascript">
function addscrow(n) {
var s = document.getElementById('sc_select'+n); s.onchange = "";
var nrow = document.getElementById('sc_row'+(n+1)); nrow.style.display = 'block';
var ns = document.getElementById('sc_select'+(n+1)); ns.onchange = 'addscrow('+(n+1)+')';
}
</script>
</head>
<body>
<div class="heading">
<h1>Awkwords - word generator</h1>

<div class="h_right">
&copy; Petr Mejzlík &nbsp; <a href="mailto:imploder%40centrum.cz">imploder@centrum.cz</a>
</div>
<div class="cistic"></div>
</div>
<div class="right_links"><img src="help_ico.gif" style="vertical-align: middle" />
<span class="jslink" onclick="window.open('help.html', 'Awkwords help', 'scrollbars=yes, toolbar=yes, location=no, directories=no, status=yes, menubar=yes, width=600, height=350')">How to use</span>
</div>
<form action="index.php" method="post">
<div class="scsec"><b>shortcuts:</b>

(... dál je tam formulář generovaný PHP ...)
---------------------------------------
použité CSS:

body {
margin: 0px;
padding: 0px;
font-size: 80%;
background-color: white;
font-family: sans-serif, serif;
}
.heading {
background-color: #ECEEF0;
margin: 0px;
padding: 0px;
}
h1 {
float: left;
margin: 0px;
padding: 5px;
font-size: 120%;
color: black;
}
.h_right {
float: right;
font-size: 90%;
color: gray;
}
.cistic { clear: both; }


jak to vypadá: http://bprhad.wz.cz/bez_ramecku.gif

btw ten skript nahoře mi funguje jenom v Opeře a taky nevím čím to je.
Railbot
Profil
#5 · Zasláno: 22. 8. 2007, 08:32:40
Odpovědět Citovat
http://www.kai.vslib.cz/~satrapa/www/kurs/margin.html
imploder
Profil *
#6 · Zasláno: 22. 8. 2007, 09:15:13
Odpovědět Citovat
díky za odkaz, ale já tam prostě nikde margin nemám
tiso
Profil
#7 · Zasláno: 22. 8. 2007, 10:12:38
Odpovědět Citovat
imploder máš - <h1> má prednastavený margin - stačí mu ho zrušiť.
imploder
Profil *
#8 · Zasláno: 22. 8. 2007, 10:22:02
Odpovědět Citovat
Vždyť tam mám:

h1 {
float: left;
margin: 0px;
padding: 5px;
font-size: 120%;
color: black;
}
tiso
Profil
#9 · Zasláno: 22. 8. 2007, 10:31:13
Odpovědět Citovat
imploder - sorry, som slepý po ránu...
Plaváček
Profil
#10 · Zasláno: 22. 8. 2007, 10:34:32
Odpovědět Citovat
imploder

No, a já nevidím žádný rozdíl (alespoň podle toho kousky kódu, cos poslal, jsem žádný problém nezaznamenal).
habendorf
Profil
#11 · Zasláno: 22. 8. 2007, 10:43:56
Odpovědět Citovat
Taky žádný rozdíl nevidím, zápis je v pořádku.
imploder
Profil *
#12 · Zasláno: 22. 8. 2007, 10:46:54
Odpovědět Citovat
No jo, ale mně to stejně nefunguje.
imploder
Profil *
#13 · Zasláno: 22. 8. 2007, 10:47:50
Odpovědět Citovat
Prostě to vypadá jako na tom obrázku co jsem poslal.
habendorf
Profil
#14 · Zasláno: 22. 8. 2007, 10:50:29
Odpovědět Citovat
imploder

No já jsem si zkopíroval ten tvůj kód (douzavřel tagy) a bylo to OK.
imploder
Profil *
#15 · Zasláno: 22. 8. 2007, 11:46:43
Odpovědět Citovat
Když jsem si to taky zkopíroval, bylo to v pořádku, než jsem tam dal styl (zapomněl jsem ho poslat) pro ten odkaz "How to use" vpravo.

.right_links {
float: right;
padding: 5px;
}

Tam ale vůbec nevidím nic špatně. Zkusil jsem tam dát ještě pro jistotu margin:0, ale nijak se to neprojevilo. Navíc ten odkaz je až pod celým tím divem, tak nechápu jak může rozhodit něco nad ním. Firefox se asi prostě zbláznil nebo co...
Plaváček
Profil
#16 · Zasláno: 22. 8. 2007, 11:51:40
Odpovědět Citovat
imploder

To Firefox nedělá a osobně to tipuju na chybu někde jinde. Bez ukázky komplet kódu a CSS stylu to ale vzdávám.
imploder
Profil *
#17 · Zasláno: 22. 8. 2007, 12:00:41
Odpovědět Citovat
Plaváček
Díky že to ještě chceš zkoumat. Tady je kompletní stránka i s těma ********* slovama, které to generuje při výchozím nastavení:

<?xml version="1.0" encoding="windows-1250"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Awkwords - word generator</title>
<meta http-equiv="content-type" content="text/xml; charset=windows-1250" />
<meta http-equiv="content-language" content="en" />
<meta http-equiv="expires" content="Sun 26 Jun 2005 12:00:00 GMT" />
<link rel="stylesheet" href="default.css" type="text/css" media="all" />
<script language="JavaScript" type="text/javascript">
function addscrow(n) {
var s = document.getElementById('sc_select'+n); s.onchange = "";
var nrow = document.getElementById('sc_row'+(n+1)); nrow.style.display = 'block';
var ns = document.getElementById('sc_select'+(n+1)); ns.onchange = 'addscrow('+(n+1)+')';
}
</script>
<style type="text/css">
body {
margin: 0px;
padding: 0px;
font-size: 80%;
background-color: white;
font-family: sans-serif, serif;
}
.heading {
background-color: #ECEEF0;
margin: 0px;
padding: 0px;
}
h1 {
float: left;
margin: 0px;
padding: 5px;
font-size: 120%;
color: black;
}
.h_right {
float: right;
font-size: 90%;
color: gray;
}
.right_links {
float: right;
padding: 5px;
/*border: solid 1px;*/
margin: 0px;
}
.jslink {
text-decoration: underline;
color: blue;
cursor: pointer;
}
.words { padding: 10px; border-top: solid gray 5px; }
.scsec { margin: 10px; }
.psec { margin: 10px; }
.gensec { margin: 5px; width: 70%; text-align: right; }
div.sc_row input { width: 77%; }
.cistic { clear: both; }
</style>
</head>
<body>
<div class="heading">
<h1>Awkwords - word generator</h1>

<div class="h_right">
&copy; Petr Mejzlík &nbsp; <a href="mailto:imploder%40centrum.cz">imploder@centrum.cz</a>
</div>
<div class="cistic"></div>
</div>
<div class="right_links"><img src="help_ico.gif" style="vertical-align: middle" />
<span class="jslink" onclick="window.open('help.html', 'Awkwords help', 'scrollbars=yes, toolbar=yes, location=no, directories=no, status=yes, menubar=yes, width=600, height=350')">How to use</span>
</div>
<form action="index.php" method="post">
<div class="scsec"><b>shortcuts:</b>


<div class="sc_row" id="sc_row0"><select name="scn[0]" id="sc_select0"><option value="">-</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
<option value="E">E</option>
<option value="F">F</option>
<option value="G">G</option>
<option value="H">H</option>

<option value="I">I</option>
<option value="J">J</option>
<option value="K">K</option>
<option value="L">L</option>
<option value="M">M</option>
<option value="N">N</option>
<option value="O">O</option>
<option value="P">P</option>
<option value="Q">Q</option>

<option value="R">R</option>
<option value="S">S</option>
<option value="T">T</option>
<option value="U">U</option>
<option value="V" selected>V</option>
<option value="W">W</option>
<option value="X">X</option>
<option value="Y">Y</option>
<option value="Z">Z</option>

</select><input name="scc[]" type="text" value="a/i/u" maxlength="200" id="sc_input0"></div>

<div class="sc_row" id="sc_row1"><select name="scn[1]" id="sc_select1"><option value="">-</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C" selected>C</option>
<option value="D">D</option>
<option value="E">E</option>
<option value="F">F</option>
<option value="G">G</option>

<option value="H">H</option>
<option value="I">I</option>
<option value="J">J</option>
<option value="K">K</option>
<option value="L">L</option>
<option value="M">M</option>
<option value="N">N</option>
<option value="O">O</option>
<option value="P">P</option>

<option value="Q">Q</option>
<option value="R">R</option>
<option value="S">S</option>
<option value="T">T</option>
<option value="U">U</option>
<option value="V">V</option>
<option value="W">W</option>
<option value="X">X</option>
<option value="Y">Y</option>

<option value="Z">Z</option>
</select><input name="scc[]" type="text" value="p/t/k/s/m/n" maxlength="200" id="sc_input1"></div>

<div class="sc_row" id="sc_row2"><select name="scn[2]" id="sc_select2"><option value="">-</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
<option value="E">E</option>
<option value="F">F</option>

<option value="G">G</option>
<option value="H">H</option>
<option value="I">I</option>
<option value="J">J</option>
<option value="K">K</option>
<option value="L">L</option>
<option value="M">M</option>
<option value="N">N</option>
<option value="O">O</option>

<option value="P">P</option>
<option value="Q">Q</option>
<option value="R">R</option>
<option value="S">S</option>
<option value="T" selected>T</option>
<option value="U">U</option>
<option value="V">V</option>
<option value="W">W</option>
<option value="X">X</option>

<option value="Y">Y</option>
<option value="Z">Z</option>
</select><input name="scc[]" type="text" value="p/t/k" maxlength="200" id="sc_input2"></div>

<div class="sc_row" id="sc_row3"><select name="scn[3]" id="sc_select3"><option value="">-</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
<option value="E">E</option>

<option value="F" selected>F</option>
<option value="G">G</option>
<option value="H">H</option>
<option value="I">I</option>
<option value="J">J</option>
<option value="K">K</option>
<option value="L">L</option>
<option value="M">M</option>
<option value="N">N</option>

<option value="O">O</option>
<option value="P">P</option>
<option value="Q">Q</option>
<option value="R">R</option>
<option value="S">S</option>
<option value="T">T</option>
<option value="U">U</option>
<option value="V">V</option>
<option value="W">W</option>

<option value="X">X</option>
<option value="Y">Y</option>
<option value="Z">Z</option>
</select><input name="scc[]" type="text" value="s" maxlength="200" id="sc_input3"></div>

<div class="sc_row" id="sc_row4"><select name="scn[4]" id="sc_select4"><option value="">-</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D
imploder
Profil *
#18 · Zasláno: 22. 8. 2007, 12:06:15
Odpovědět Citovat
Tak ne, je to na: http://bprhad.wz.cz/f/wg_nadpis.htm
habendorf
Profil
#19 · Zasláno: 22. 8. 2007, 12:18:39
Odpovědět Citovat
Klasický problém s prázdným cleanerem. Dej do něj nbsp a je to.
Railbot
Profil
#20 · Zasláno: 22. 8. 2007, 12:19:26
Odpovědět Citovat
imploder
Nápověda - zkus si z h1 dát pryč ten float.
J
Profil *
#21 · Zasláno: 22. 8. 2007, 13:04:24
Odpovědět Citovat
co třeba viz habendorf - <div class="cistic">&nbsp;</div>
a kvůli snížení výšky mezery doplnit font-size: 1px; do .cistic
habendorf
Profil
#22 · Zasláno: 22. 8. 2007, 13:05:17
Odpovědět Citovat
a kvůli snížení výšky mezery doplnit font-size: 1px; do .cistic

font-size: 0;
line-height: 0;
height: 0;
clear: both;
J
Profil *
#23 · Zasláno: 22. 8. 2007, 13:16:03
Odpovědět Citovat
habendorf Arciť, ale při nule to není ono v IE6 - h1 v tomto případě není podbarvené jak určeno v .heading
habendorf
Profil
#24 · Zasláno: 22. 8. 2007, 14:08:07
Odpovědět Citovat
J

Protože je slušnost pro IE zadat pro heading šířku (100%), což on nemá.
imploder
Profil *
#25 · Zasláno: 22. 8. 2007, 17:01:44
Odpovědět Citovat
Railbot
To není dobrý nápad, ten float je tam potřeba.

habendorf
Díky za upozornění. Dost mě to překvapilo (na jiné stránce mám prázdný čistič taky a nejsou s tím problémy), ale opravdu to bylo tím. Nevěděl jsem, že div nemůže být prázdný. Teď už je to v pořádku.

Dneska to dám na http://bprhad.wz.cz/awkwords tak se na to pak můžete podívat i v IE6. Mám IE7 tak nevím jak to v něm vypadá.
Railbot
Profil
#26 · Zasláno: 22. 8. 2007, 18:16:30 · Upravil/a: Railbot
Odpovědět Citovat
imploder
Gratulujeme. Bez toho floatovacího nadpisu by se to samozřejmě klidně obešlo, to jen pro zajímavost.

Mám IE7 tak nevím jak to v něm vypadá.
Nainstaluj si standalone verzi.
Časová prodleva: 17 let

Vaše odpověď

Mohlo by se hodit

Nezapomeňte na odkaz na živou ukázku problému.

Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm:

0