Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> [HTML][CSS]Grafika pozycjonowana w tabeli
Chrom
post
Post #1





Grupa: Zarejestrowani
Postów: 240
Pomógł: 17
Dołączył: 28.12.2005
Skąd: Warszawa

Ostrzeżenie: (0%)
-----


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. }
Go to the top of the page
+Quote Post
 
Start new topic
Odpowiedzi (1 - 1)
Kreton
post
Post #2





Grupa: Zarejestrowani
Postów: 345
Pomógł: 3
Dołączył: 20.02.2005

Ostrzeżenie: (0%)
-----


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.

Ten post edytował Kreton 25.07.2008, 17:32:34
Go to the top of the page
+Quote Post

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 



RSS Aktualny czas: 20.08.2025 - 07:56