Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [html][css] Niezgodność wersji kodowej przy Operze i MOzilli
Forum PHP.pl > Forum > Przedszkole
poxrimex
27.02.2008, 15:08:53
w Operze i Mozilli tekst z diva stopka jest w divie menu

a przyczyną tego jest:
[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
[HTML] pobierz, plaintext


Bez tego działa dobrze pod tymi przeglądarkami

a oto kod:
[HTML] pobierz, plaintext 
  1. <div class="menu">ABC</div>
  2. <div class="stopka"><a href="index.php">Kontakt</a></div>
[HTML] pobierz, plaintext


pod Ie działa to prawdłowo

Jeszcze nigdy mi się to nie zdarzyło, tylko tak się dzieje pod tą wersją kodową ;/
grzesiek_g
27.02.2008, 15:34:40
Jeśli pod IE działa prawidłowo a pod FF i Operą źle to znaczy, że masz źle napisany kod.

P.S. Od kiedy to DOCTYPE jest stroną kodową (to raczej pojęcie związane z kodowaniem znaków smile.gif )?
poxrimex
27.02.2008, 16:10:55
to nie zmienia faktu, że pod przeglądarkami tymi nie działa ;/

Faktycznie nie nazywa się to wersja kodowa ;D

tylko typ dokumentu coś takiego ;]
grzesiek_g
27.02.2008, 16:20:50
Kod HTML to jeszcze nic, coś jest nie tak w CSS-ach, ale niewywróżę tutaj bez linka albo kodu.
poxrimex
27.02.2008, 16:33:48 
[HTML] pobierz, plaintext 
  1. div.menu
  2. {
  3. clear: both;
  4. width: 778px;
  5. height: 22px;
  6. background-image: url(pasek.gif);
  7. border-style: solid;
  8. border-width: 1px;
  9. border-color: black;
  10. }
  11.  
  12. div.stopka
  13. {
  14. width: 780px;
  15. margin-left: auto;
  16. margin-right: auto;
  17. clear: both;
  18. }
[HTML] pobierz, plaintext
grzesiek_g
27.02.2008, 16:51:38
Dla testów rozwinąłem twój kod tak by uzyskać prawidłowy dokument i nie mam takich przypadłości o których piszesz. Na pewno wszystko dobrze pootwierane i pozamykane? Oto mój kod:
[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <style>
  5. div.menu
  6. {
  7. clear: both;
  8. width: 778px;
  9. height: 22px;
  10. background-image: url(pasek.gif);
  11. border-style: solid;
  12. border-width: 1px;
  13. border-color: black;
  14. }
  15. div.stopka
  16. {
  17. width: 780px;
  18. margin-left: auto;
  19. margin-right: auto;
  20. clear: both;
  21. }
  22. </style>
  23. </head>
  24. <body>
  25. <div class="menu">ABC</div>
  26. <div class="stopka"><a href="index.php">Kontakt</a></div>
  27. </body>
  28. </html>
[HTML] pobierz, plaintext

Musi u ciebie działać...
poxrimex
27.02.2008, 16:57:03
zapomniałem napisać, że div stopka jest pod divem top. A w divie top jest div menu.

a oto style dla diva top:

[HTML] pobierz, plaintext 
  1. div.top
  2. {
  3. width: 780px;
  4. height: 40px;
  5. margin-left: auto;
  6. margin-right: auto;
  7. }
[HTML] pobierz, plaintext
grzesiek_g
27.02.2008, 19:08:19
Nadal jest ok, pokaż cały kod albo linka.
poxrimex
27.02.2008, 19:11:29 
[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <link rel="Stylesheet" type="text/css" href="style.css" />
  5. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
  6. <link rel="Shortcut icon" href="ikona.ico" />
  7. </head>
  8.  
  9.  
  10. <body>
  11.  
  12. <div class="szare"></div>
  13. <div class="top">
  14. <div class="logo"><a href="abc.html"><img src="logo.gif" style="width: 210px; height: 40px; border: none;"></a></div>
  15. <div class="logoright"><br /><a href="ogowanie.html">Logowanie</a> | <a href="rejestracja.html">Rejestracja</a></div>
  16. <div class="menu">ABC</div>
  17. </div>
  18.  
  19. <div class="stopka"><a href="index.php">Kontakt</a></div>
  20. </body>
  21. </html>
[HTML] pobierz, plaintext


CSS:

[HTML] pobierz, plaintext 
  1. html, body
  2. {
  3. margin: 0px;
  4. padding: 0px;
  5. text-align: center;
  6. }
  7.  
  8. div.szare
  9. {
  10. width: 778px;
  11. height: 10px;
  12. overflow: hidden;
  13. margin-left: auto;
  14. margin-right: auto;
  15. border-style: solid;
  16. border-width: 1px;
  17. border-top-width: 0px;
  18. border-color: #d2d2d2;
  19. }
  20.  
  21. div.top
  22. {
  23. width: 780px;
  24. height: 40px;
  25. margin-left: auto;
  26. margin-right: auto;
  27. }
  28.  
  29. div.logo
  30. {
  31. margin-top: 10px;
  32. margin-bottom: 10px;
  33. width: 210px;
  34. height: 40px;
  35. float: left;
  36. }
  37.  
  38. div.logoright
  39. {
  40. margin-top: 10px;
  41. margin-bottom: 10px;
  42. width: 520px;
  43. float: left;
  44. height: 40px;
  45. font-size: 12px;
  46. }
  47.  
  48. div.logoright a
  49. {
  50. color: #5e5e5e;
  51. text-decoration: none;
  52. font-family: Arial, Helvetica, Verdana, sans-serif;
  53. font-size: 12px;
  54. text-decoration: underline;
  55. }
  56.  
  57. div.logoright a:hover
  58. {
  59. color: #315bbd; 
  60. }
  61.  
  62. div.menu
  63. {
  64. clear: both;
  65. width: 778px;
  66. height: 22px;
  67. background-image: url(pasek.gif);
  68. border-style: solid;
  69. border-width: 1px;
  70. border-color: #262626;
  71. }
  72.  
  73. div.stopka
  74. {
  75. width: 780px;
  76. margin-left: auto;
  77. margin-right: auto;
  78. clear: both;
  79. }
  80.  
  81. div.stopka a
  82. {
  83. color: #5e5e5e;
  84. text-decoration: none;
  85. }
[HTML] pobierz, plaintext
grzesiek_g
27.02.2008, 19:17:26
Zdefiniowałeś height dla div.top. I wszystko jasne - wstaw albo min-height albo powieksz do takiej wartości jaka ma być, albo usuń height.
poxrimex
27.02.2008, 19:23:17
no wkońcu pomogło ^^

Pozdrawiam
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.