Nechcenna medzera v IE6 – CSS – Fórum – Programujte.com

mam problem s menu lebo v mozile ho ukazuje normalne ale v IE 6 tam stale dava medzeru lenze ten div ma vysku 7px a IE6 ukazuje okolo 12px (obrazky su v png preto to v IE vizera divne to si nevsimajte)

v IE6

v mozille

funnyportal.sk

IE do vysky (sirky) zapocitava padding.. viz. http://www.jakpsatweb.cz/css/padding.html

lenze ten div ma nastaveny padding 0

skúšal si margin: 0; ?

hej ale v tom to neni pretoze sa zmeni velkost a nie medzera medzi prvkami,ako keby mu nieco kazalo ze nesmie byt mensie nez 12px

Toto se mi stávalo taky...vyřešil jsem to myslím tak, že jsem za kařdý obrázek, který končil řádek napsal tag

a aky tag ?

To Marty_SVK : :D sem já to blbec...tag <br />

Předtím se mi to úplně nepochitelně přeformovalo do skutečnýho odřádkování...

Mám dost jasnou představu:
1. udělat si pořádek s id (neměl bys mít stejný identifikátor vícekrát než jednou, na to jsou třídy)
2. problém dělá jen IE6 (IE7 je v pořádku, stejně jako Opera a FF) . . .hledal bych specifika, neřkuli BUGy v chování tohoto prohlížeče
------------------------------------
Už jsem na to přišel:
V této deklaraci:
#menuhore2 { /*lave okno menu*/
display: block;
width: 186px;
height: 38px;
padding: 15px 0 0 30px;
background: url(menulist.png) no-repeat;
}
zkus změnit padding . . . . dej tam: padding: 0px 0 0 30px;
Teď už znáš zdroj chyby a stačí jen najít řešení

(Považuji za zbytečné mít v každé deklaraci bloku
float:left;
clear:left;
display: block;
Narůstá ti objem css souboru, klidně to vynech, nemá to žádný vliv na výsledek
-> stačí když má levý obal float:left)

Vyřešeno - funguje 100% v IE6/7 Opeře a FF, tohle je kompletní opravená stránka: http://exstream.atlasweb.cz/funny/funny_orig.htm

A zde jsou části XHMTL a CSS, které jsem opravil
Mám tam okomentované změny (s objasněním chyb v kódu)

XHTML 

 <div id="page">



 <h1 id="header">FunnyPortal.sk</h1>



 <div id="lavyobsah">

  <div class="menuhore"><img src="xxxxxxxxxmenu.png" /></div>

  <div class="menustred"><div class="menupozadie1"></div><div class="menupozadie2">

   <div id="obalovydiv">

   <ul>

    <li><a href="../akcne-hry/">» Akčné hry</a></li>

    <li><a href="../index.php">» Logické hry</a></li>

    <li><a href="../forum/index.php">» Fórum</a></li>

   </ul>

   </div>

   </div>

   <div class="menupozadie3"></div>

   </div>

  <div class="menudole"></div>



  <div class="menuhore"><img src="xxxxxxx/prihlase.png" /></div>

  <div class="menustred">

  <form id="prihlasenie" method="POST" action="#">

  <hr class="nostyle" />

  <label for="meno"> Užívatel : <input type="text" id="meno" name="meno" size="17"> </label>

  <label for="heslo"> Heslo : <input type="password" id="heslo" name="heslo" size="12"> </label>

  <input class="submit" type="submit" value="Prihlásit" name="B1">

  <a href="http://www.funnyportal.sk/registruj.php">Registrovat</a>

  <hr class="nostyle" />

  </form>

  </div>

  <div class="menudole"></div>

 </div>

STYL-SW.CSS

/******** VYSOCE DOPORUČUJI GLOBÁLNÍ=hromadný RESET NA ZAČÁTKU */

/* (když si zde např.vynuluješ formulářové prvky, nebudeš mít později problémy s rozdílným vzhledem v různých prohlížečích */

/************************/

* {padding:0;margin:0}

form label {cursor: pointer}

input, select, textarea {font-size: 100%}



/************************ Místo hvězdičkového resetu (má své nedostatky) si vyber z resetů na webu: */ 

/************************  http://kurafire.net/log/archive/2005/07/26/starting-css-revisited  *******/



.nostyle {display:none} /* Pro formátování při vypnutých stylech např. <br class="nostyle" />,<hr class="nostyle" /> */



body { . . . . . . . .

     

/* VYTVOŘIL JSEM NADPIS (VÝHODY = VYPNUTÉ STYLY, GOOGLEDATA, ČTEČKY */

h1#header { /*hlavicka*/

width: 100%;

height: 150px;

clear:both;

background: url(header00.png) no-repeat;

text-indent: -9999px;   /***************** zabrání zobrazení při zapnutých stylech ******/

}  

/* UPRAVIL JSEM FORMULÁŘ (VÝHODY = LZE VYLADIT VZHLED A Z POPISKů SE STALY LABELy (KLIKACÍ, ČTEČKY) */



#prihlasenie {    /*** <form id="prihlasenie" name="prihlasenie"> labely inputy tlačítka </form>  ***/

padding: 8px 18px 8px 5px;

text-align: center;

}

#prihlasenie label {

display:block;

margin-left: 8px;

text-align: left;

}

#prihlasenie input  {

display:block; 

margin: 16px auto 8px;

font-size:120%;             /****** výška INPUT políček *******/

}

#prihlasenie label input  {

margin: 2px 0px 4px 0px;

}



/***************** [třídy menuxxx]  KROMĚ OPRAV CHYB JSEM ODSTRANIL: ******************************/

/********************************** float:left; clear:left;  display: block;  ==> ÚSPORA MÍSTA ****/

/************** Z [.menuhore + .menuhore2] JSEM UDĚLAL JEDEN BLOK [.menuhore]  ==> ÚSPORA MÍSTA ****/ 

.menuhore { /*lave okno menu*/

width: 156px;                    /* 156+30 = 186px  nezapomenout na padding !!!! */

height: 23px;                    /*  23+15 =  38px  nezapomenout na padding !!!! */

padding: 15px 0 0 30px;

background: url(menulist.png) no-repeat; 

}

.menustred { /*lave okno menu*/

padding: 0px 0px 0px 13px;               /* pouze levy padding, width=auto !!!! */

background: url(menustre.png) repeat-y;

}

.menudole { /*lave okno menu*/

width:186px;

height: 16px;

background: url(menudole.png) no-repeat;

}

.menupozadie1 { 

width: 159px;

height: 13px;

background: url(menupoza.png) no-repeat;

}

.menupozadie2 { 

width:159px;

background: url(menupozb.png) repeat-y;

}

.menupozadie3 { 

width:159px;

height: 10px;

background: url(menupozc.png) no-repeat;

}

/********************************** Zde jsem skončil ****************************************************/

/* (ale můžeš sám stejným způsobem "vyčistit" střední i pravý sloupec od zbytečných float/clear/display */



#pravy { . . . . .

 . . . .

#stred { /*Cast z okna v strede*/

float:left;

display: block;

width:425px;                                /*********** !!!!!!!!! oprava místo 450 dej 425 */

padding: 10px 0 0 25px;                     /*********** Důvod: 25+425=450 = celková šířka */

background: url(novinkys.png) repeat-y;

}

diky presne nieco taketo som potreboval pretoze s CSS robim strasne kratko a este som poriadne nechapal rozdiel medzi id a triedou...fakt diky prerobim to v priebehu par dni