Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS][HTML]Niewyjaśniony odstęp
Forum PHP.pl > Forum > Przedszkole
sadistic_son
13.04.2011, 10:12:05
Między obrazkiem z 27 linijki - under-menu.bmp a resztą strony, czyli tabelą z menu pojawia się kilkupikselowy odstęp, na FF, Operze i Chromie coś koło 8px, na IE większy. Skąd to się bierze? No patrzę godzinę w ten html i css i nie wiem.
Problem wydaje się być rozwiązany jak dla tego IMG ustawię margin-top:-8px, ale minusowe marginy to nie rozwiązanie. No i na IE minusowy margin i tak nie działa. 
[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  5. <title>xxx</title>
  6. <meta name="description" content="xxxi" />
  7.  
  8. <link rel="stylesheet" href="menu_020_02401/menu/menu_style.css" type="text/css" />
  9. <body>
  10. <img src="images/top.bmp" /><br />
  11.  
  12. <table id="menu-container" border="0" cellpadding="0" cellspacing="0"><tr>
  13. <td><img src="images/menu-left.bmp" />
  14.  
  15. </td><td>
  16.  
  17. <ul id="menu">
  18.    <li><a href="index.php?page=home" target="_self" title="O Nas" class="current">O Nas</a></li>
  19.    <li><a href="index.php?page=menu" target="_self" title="Menu - Zamów" >Menu - Zamów</a></li>
  20.    <li><a href="index.php?page=gallery" target="_self" title="Galeria Zdjęć" >Galeria Zdjęć</a></li>
  21.    <li><a href="index.php?page=map" target="_self" title="Mapka Dojazdu" >Mapka Dojazdu</a></li>
  22. </ul>
  23. </td>
  24. <td id="menu-right"><img src="images/menu-right.bmp" style="margin-left:172px;"/>
  25.  
  26. </td></tr></table>
  27. <img src="images/under-menu.bmp" />
  28.  
  29. </body>
  30. </html>
[HTML] pobierz, plaintext
Style menu_style.css
[CSS] pobierz, plaintext 
  1. body{
  2. width:861px;
  3. margin:0 auto;
  4. }
  5.  
  6. img{
  7. border:0;
  8. }
  9.  
  10. table, tr, td{
  11. border:none;
  12. padding:0;
  13. margin:0;
  14. vertical-align:top;
  15. height:43px;
  16. }
  17.  
  18. #menu-right{
  19. background-image:url(../../images/menu-center-right.bmp);
  20. background-repeat:repeat-x;
  21. height:43px;
  22. }
  23.  
  24. ul#menu { 
  25. width: 518px; 
  26. height: 43px; 
  27. background: #FFF url("images/menu-bg.bmp") top left repeat-x; 
  28. font-size: 0.8em; 
  29. font-family: "Lucida Grande", Verdana, sans-serif; 
  30. font-weight: bold; 
  31. list-style-type: none; 
  32. margin: 0; 
  33. padding: 0; }
  34.  
  35. ul#menu li { 
  36. display: block; 
  37. float: left; 
  38. margin: 0 0 0 5px; }
  39.  
  40. ul#menu li a { 
  41. height: 43px; 
  42. color: #777; 
  43. text-decoration: 
  44. none; display: 
  45. block; float: 
  46. left; line-height: 200%; 
  47. padding:8px 15px 0; }
  48.  
  49. ul#menu li a:hover { color: #f00; }
  50.  
  51. ul#menu li a.current{ 
  52. color: #FFF; 
  53. background: #FFF url("images/current-bg.gif") top left repeat-x; 
  54. padding: 5px 15px 0; }
[CSS] pobierz, plaintext
Całość jest na razie w stadium dalekim końcowi. W CSS mogą się powtarzać atrybuty, działam na razie na bmp, potem pozamieniam na gify. Tak więc oszczędźcie mi proszę komentarzy krytykujących ten kod. Interesuje mnie tylko ta wk***jąca przerwa między obrazkiem z 27 linijki a wszystkim co ponad nim.

PS. Pytanie dodatkowe: jak mogę zastąpić HTMLowy zapis cellpadding="0" cellspacing="0" CSSem, bo z tego co kojarzę to tych znaczników HTMLowych nie powinno się już używać.
wookieb
13.04.2011, 10:15:39
Taaa. strasznie mi się przydaje wersja bez obrazków.
Wystaw do tego link.
sadistic_son
13.04.2011, 10:49:16
KLIK do witryny

Wszystkie obrazki z menu (current-bg.gif , menu-bg.gif , menu-bg.bmp), powtarzalne tło z prawego TD (menu-center-right.bmp) oraz reszta z pozostałych TD (menu-left.bmp , menu-right.bmp) mają wysokość 43px, czyli tyle ile powinny, tyle co całe menu i tabela. Jednak ta tabela przyjmuje wysokość większą niż 43px. Wyczaiłem na FireBugu, że to za sprawą a lub li lub a w li. To nie zmienia jednak faktu ze problemu rozwiązać nie potrafię.
wookieb
13.04.2011, 10:52:08
ul#menu li a height na 35px
table, tr, td wywal height
na przyszłość korzystaj z firebuga. Siedzisz tu na tyle, że aż niemożliwe jest abyś o nim nie słyszał.
sadistic_son
13.04.2011, 11:33:25
Cytat(wookieb @ 13.04.2011, 11:52:08 ) *
na przyszłość korzystaj z firebuga. Siedzisz tu na tyle, że aż niemożliwe jest abyś o nim nie słyszał.
Używam. Edytowałem posta najwidoczniej w trakcie jak pisałeś odpowiedź.

Pomogło znacznie ale niestety na IE nadal to samo. Wszystkie pozostałe przeglądarki - ok.
Ghost_78
13.04.2011, 14:13:51
Cytat(sadistic_son @ 13.04.2011, 10:12:05 ) *
PS. Pytanie dodatkowe: jak mogę zastąpić HTMLowy zapis cellpadding="0" cellspacing="0" CSSem, bo z tego co kojarzę to tych znaczników HTMLowych nie powinno się już używać.

Ja do tabelek w CSS uzywam:
[HTML] pobierz, plaintext 
  1. table {border-collapse: collapse;}
  2. table td {padding: 0px;}
[HTML] pobierz, plaintext

O to Ci chodzilo ?
darko
13.04.2011, 16:37:56
Możliwe, że ie złapał w cache stronę. Wyczyść cache i doklej jakąś zmienną i wartość do urla.
sadistic_son
14.04.2011, 13:10:15
Cytat(Ghost_78 @ 13.04.2011, 15:13:51 ) *
O to Ci chodzilo ?
Tak, dzięki.

Cytat(darko @ 13.04.2011, 17:37:56 ) *
Możliwe, że ie złapał w cache stronę. Wyczyść cache i doklej jakąś zmienną i wartość do urla.
No na takie coś to nie dałbym się złapać wink.gif Kombinowałem z czyszczeniem casha.

Anyway... Jak pozamieniałem obrazki na divy z tłem to problem zniknął biggrin.gif

THX all.
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.