Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [xhtml,css] LI , a i display: block - odstepy pod LI
Forum PHP.pl > Forum > Po stronie przeglądarki
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:
  1. <div id="menu">
  2. <ul class="menu">
  3. <li><a href="index.html" class="menu"><img src="images/menu/home.gif" alt="Home" /></a></li>
  4. <li><a href="index.html" class="menu"><img src="images/menu/menu.gif" alt="Home" /></a></li>
  5. <li><a href="index.html" class="menu" ><img src="images/menu/company_birth.gif" alt="Home" /></a></li>
  6. <li><a href="index.html" class="menu" ><img src="images/menu/info.gif" alt="Home" /></a></li>
  7. <li><a href="index.html" class="menu" ><img src="images/menu/overview.gif" alt="Home" /></a></li>
  8. <li><a href="index.html" class="menu" ><img src="images/menu/contact_us.gif" alt="Home" /></a></li>
  9. </ul>
  10. </div>


A tutaj jest css odpowiedzialny za to :

Kod:
  1. div#menu {
  2. width: 182px;
  3. min-height: 244px;
  4. float: left;
  5. margin-top: 25px;
  6. margin-left: 45px;
  7. }
  8.  
  9. ul.menu {
  10. list-style: none;
  11. }
  12.  
  13. ul.menu li{
  14. width: 179px;
  15. height: 39px;
  16. border: solid 1px black;
  17. background: url(../images/menu/menu_bg.gif);
  18. text-align: center;
  19. }
  20.  
  21. a.menu {
  22. height: 39px;
  23. display: block;
  24. }


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
  1. <ul class="menu">
  2. <li><a href="index.html" class="menu"><div><img src="images/menu/home.gif" alt="Home" /></div></a></li>
  3. </ul>


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ę smile.gif
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.