Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [HTML][CSS]Grafika pozycjonowana w tabeli
Forum PHP.pl > Forum > Przedszkole
Chrom
Witam,
Proszę powiedzie dlaczego w IE grafika wyświetlana jest prawidłowo a w Firefoxie menu po lewej stronie rozjeżdża się? Próbuję ustalić wymiary zarówno w stylach jak i w html-u.
  1. echo"<table border=\"0\" width=\"759\" cellspacing=\"0\" cellpadding=\"0\" style=\"background-image: url('image/$col"."tlo.jpg'); width: 759px; margin: auto; text-align: center;\">
  2. <tr>
  3. <td rowspan=\"2\" colspan=\"2\"><img src=\"image/$col"."1.jpg\" width=\"177\" height=\"200\" border=\"0\" alt=\"[]\" /></td>
  4. <td colspan=\"2\"><img src=\"image/$col"."2.jpg\" width=\"582\" height=\"125\" border=\"0\" alt=\"[]\" /></td>
  5. </tr>
  6. <tr>
  7. <td><img src=\"image/$col"."3.jpg\" width=\"125\" height=\"75\" border=\"0\" alt=\"[]\" /></td>
  8. <td style=\"background-image: url('image/$col"."4.jpg'); height: 75px; width: 457px; border: 0px;\" hight=\"75\" width=\"457\" border=\"0\"><p style=\"text-align: left; font-size: 20px;\">Amatorska hodowla: $hodowla </p></td>
  9. </tr>
  10. <tr>
  11. <td rowspan=\"9\" style=\"background-image: url('image/$col"."5.jpg'); background-repeat: repeat-y;\" width=\"37\" border=\"0\" ></td>
  12. <td width=\"140\" height=\"27\" border=\"0\"><a href=\"index.php\" name=\"Strona Główna\"><p style=\"text-align: left; padding: 5px 0px 5px 13px; font-size: 15px bold;\">Odnośnik 1</p></a></td>
  13. <td width=\"582\" height=\"200\" rowspan=\"11\" colspan=\"2\" style=\"background-image: url('image/tlo'.'$col.jpg')\">
  14. </td>
  15. </tr>
  16. <tr>
  17. <td><img src=\"image/$col"."7.jpg\" width=\"140\" height=\"10\" border=\"0\" alt=\"\" /></td>
  18. </tr>
  19. <tr>
  20. <td width=\"140\" height=\"27\" border=\"0\"><a href=\"index.php\"><p style=\"text-align: left; padding: 5px 0px 5px 13px; font-size: 15px bold;\">Odnośnik 2</p></a></td>
  21. </tr>
  22. <tr>
  23. <td><img src=\"image/$col"."9.jpg\" width=\"140\" height=\"10\" border=\"0\" alt=\"\" /></td>
  24. </tr>
  25. <tr>
  26. <td><a href=\"index.php\"><p style=\"text-align: left; padding: 1px 0px 2px 14px;font-size: 12px;\">Annabel<br /><small style=\"font-size: 8px;\">Canis Terra</small></p></a></td>
  27. </tr>
  28. <tr>
  29. <td><img src=\"image/$col"."11.jpg\" width=\"140\" height=\"10\" border=\"0\" alt=\"\" /></td>
  30. </tr>
  31. <tr>
  32. <td><a href=\"index.php\"><p style=\"text-align: left; padding: 1px 0px 2px 14px;font-size: 12px;\">Annabel<br /><small style=\"font-size: 8px;\">C T</small></p></a></td>
  33. </tr>
  34. <tr>
  35. <td><img src=\"image/$col"."11.jpg\" width=\"140\" height=\"10\" border=\"0\" alt=\"\" /></td>
  36. </tr>
  37. <tr>
  38. <td><a href=\"index.php\"><p style=\"text-align: left; padding: 5px 0px 5px 13px;\">Odnośnik</p></a></td>
  39. </tr>
  40. <tr>
  41. <td colspan=\"2\"><img src=\"image/$col"."15.jpg\" width=\"178\" height=\"111\" border=\"0\" alt=\"[]\" /></td>
  42. </tr>
  43. <tr>
  44. <td colspan=\"2\"></td>
  45. </tr>
  46. </table>";

  1. td a:link, td a:visited {
  2. display: block;
  3. width: 140px;
  4. margin: 0px;
  5. padding: 0px;
  6. background: #403c16 url("image/n6.jpg");
  7. color: #FFF;
  8. border: 0px;
  9. text-decoration: none;
  10. }
  11.  
  12. td a:hover {
  13. background-color: #86af78;
  14. background-image: url("image/n14.jpg");
  15. color: #009;
  16. margin: 0px;
  17. padding: 0px;
  18. text-decoration: none;
  19. }
Kreton
Nie chce mi się sprawdzać i strzelam, ale ustaw dla obrazków display: block a powinny odstępy zniknąć.

Jeżeli interesuje Cie przyczyna: IE traktuje od razu obrazki jako elementy blokowe, co jest niezgodne z zaleceniami W3C. Firefox i Opera tratują poprawnie obrazki jako elementy liniowe, czyli tak samo jak tekst. Zobacz, że pod każdą linijką tekstu pojawia się mała przerwa aby kolejne linie tekstu nie nachodziły na siebie. Dlatego pod obrazkiem poojawia sie przerwa.

O ile dobrze pamiętam możesz także uzyć vertical-align: bottom. Możesz takze uruchomić tryb prawie standardowy używając XHTML 1.0 Transitional.

BTW: Nie wysyłaj takich śmieci natsępnym razem. Daj wygenerowany HTML i link do strony.
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.