[xhtml,css] LI , a i display: block - odstepy pod LI Opcje

[5zymon]

Witam,

Mam problem z ktorym dostaje SZALU!! Smile. Oczywiscie w safari, operze, ie wszystko dziala jak trzeba, natomiast w Ie 6.0 i 7.0 NIE!. Problem polega na tym, ze mam menu, pionowe umieszone w liscie nienumerowanej, kaze <li> ma okreslone tlo, w kazdy <li> jest link <a href> ktory ma w sobie <img> obrazek.. Wszystko jet ok kiedy link ma w sobie sam text, ale w momencie kiedy wstawiam obrazek, JAKIKOLWIEK, miedzy LI robia mi sie odstepy na jakies 3px na oko. Za cholere nie moge sie ich pozbyc. Umieszczanie menu czyli ul , li a itd...w jednej linii bez bialych znakow nie poamga, odstepy dalej wystepuja. Serdecznie prsoze o zerkniecie na moj kod i ewnetualna poprawke, bo siedze nad tym juz pare godzin i mam juz serdecznei dosc. Tutaj jest link:

http://szymon.sytes.net/bbq/index.html

Specjalnie zostawilem border na 1 dla LI zeby bylo widac te odstepy w intenret explorerze.

Chodzi o ten kod:



Kod:

[HTML] pobierz, plaintext 
<div id="menu">
         <ul class="menu">
            <li><a href="index.html" class="menu"><img src="images/menu/home.gif" alt="Home" /></a></li>
            <li><a href="index.html" class="menu"><img src="images/menu/menu.gif" alt="Home" /></a></li>
            <li><a href="index.html" class="menu" ><img src="images/menu/company_birth.gif" alt="Home" /></a></li>
            <li><a href="index.html" class="menu" ><img src="images/menu/info.gif" alt="Home" /></a></li>
            <li><a href="index.html" class="menu" ><img src="images/menu/overview.gif" alt="Home" /></a></li>
            <li><a href="index.html" class="menu" ><img src="images/menu/contact_us.gif" alt="Home" /></a></li>
         </ul>
      </div>
[HTML] pobierz, plaintext 

A tutaj jest css odpowiedzialny za to :

Kod:

[HTML] pobierz, plaintext 
div#menu {
   width: 182px;
   min-height: 244px;
   float: left;
   margin-top: 25px;
   margin-left: 45px;
}
 
ul.menu {
   list-style: none;
}
 
ul.menu li{
   width: 179px;
   height: 39px;
   border: solid 1px black;
   background: url(../images/menu/menu_bg.gif);
   text-align: center;
}
 
a.menu {
   height: 39px;
   display: block;
}
[HTML] pobierz, plaintext 

Dla nie to zachowanie jest zupelnie z kosmosu. Bede wdzieczny za kazda pomoc, dzieki!

ps. Zapomnialem dodac iz dzieje sie to tylko wtedy gdy ustawiam displa: block na a href. JEst mi to potrzebne dlatego tak sie przy tym upieram :-).

[slammer]

Zobacz czy wstawienie każdego obrazka w DIV przyniesie oczekiwany rezultat

[HTML] pobierz, plaintext 
<ul class="menu">
<li><a href="index.html" class="menu"><div><img src="images/menu/home.gif" alt="Home" /></div></a></li>
</ul>
[HTML] pobierz, plaintext 

Ja tak zawsze robie i wszystkie odstępy zasranego IE znikają.

[5zymon]

Hej,

No niestety ani wsadzenie IMG w div ani A w div nie pomaga. Albo ja robie jakis blad ktorego po prostu nie widzE:-) albo to zachowanie jest zupelnie irracjonalne :-).

[Kreton]

Nadaj tylko dla ie kod np. w taki sposób:

Kod

* html ul li {
height: 1%;
}

Albo usuń entery po każdym </li>. Jeżeli interesuje Cię więcej szczegółow na ten temat to pisałem na tym na blogu. W podpisie masz notkę

Ten post edytował Kreton 12.11.2007, 18:01:33