Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [css] Problem z FF
Forum PHP.pl > Forum > Po stronie przeglądarki > CSS
Blajo
Na początek kodziki:

  1. <div id="page">
  2. <div id="info1">
  3. <div id="info1_content">Zaloguj się | Zarejestruj się</div>
  4. </div>
  5. <div id="top">
  6. <div id="top_content">
  7. <div id="top_content_left"><a href="index.html"><img src="img/logo.png" alt=""></a></div>
  8. <div id="top_content_right">
  9. <p>strona główna | moje konto | pomoc | mapa strony | o nas | regulamin | kontakt</p>
  10. <p>
  11. <option value="lang">Polski</option>
  12. <option value="lang">Czeski</option>
  13. <option value="lang">Niemiecki</option>
  14. <option value="lang">Angielski</option>
  15. <option value="lang">Francuski</option>
  16. <option value="lang">Włoski</option>
  17. <option value="lang">Hiszpański</option>
  18. <option value="lang">Wybierz język</option>
  19. </select>
  20. <img src="img/lang/pl.png" alt="Polska">
  21. <img src="img/lang/cz.png" alt="Czechy">
  22. <img src="img/lang/de.png" alt="Niemcy">
  23. <img src="img/lang/gb.png" alt="Anglia">
  24. <img src="img/lang/fr.png" alt="Francja">
  25. <img src="img/lang/it.png" alt="Włochy">
  26. <img src="img/lang/es.png" alt="Hiszpania">
  27. </p>
  28. </div>
  29. </div>
  30. </div>
  31.  
  32.  
  33. <div id="search">
  34. <div id="search_content">
  35. <input type="text" size="60">
  36. <option value="wszedzie">wszędzie</option>
  37. <option value="ogloszenia">w ogłoszeniach</option>
  38. <option value="aukcje">w aukcjach</option>
  39. </select>
  40. Szukanie zaawansowane
  41. </div>
  42. </div>
  43.  
  44. <div id="info2">
  45. <div id="info2_content"><strong>Najczęsciej szukane: </strong></div>
  46. </div>
  47.  
  48. <div id="content">
  49. <div id="content_left">b<br />b<br />b<br />b<br /></div>
  50. <div id="content_right">b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br /></div>
  51. </div>
  52.  
  53. <div id="footer">
  54. <div id="footer_content">
  55. <p>Linki</p>
  56. <p><strong>Stopka</strong></p>
  57. <p>Info</p>
  58. </div>
  59. </div>
  60.  
  61. </div>


  1. body {
  2. background-color: #fff;
  3. margin: 0;
  4. padding: 0;
  5. text-align: center;
  6. font: 11px "Tahoma", sans-serif;
  7. color: #444;
  8. }
  9.  
  10. #info1 {
  11. background: url(img/bg_info.png) repeat-x;
  12. width: 100%;
  13. height: 20px;
  14. color: #da251c;
  15. text-align: right;
  16. padding-top: 2px;
  17. font-weight: bold;
  18. }
  19.  
  20. #info1_content {
  21. width: 920px;
  22. border: 1px;
  23. border-style: solid;
  24. border-width: 1px;
  25. margin: auto;
  26. }
  27.  
  28. #top {
  29. background: url(img/bg_top.png) repeat-x;
  30. margin: auto;
  31. width: 100%;
  32. height: 78px;
  33.  
  34.  
  35. }
  36.  
  37. #top_content {
  38. width: 920px;
  39. height: 78px;
  40. margin: auto;
  41. border-style: solid;
  42. border-width: 1px;
  43. }
  44.  
  45. #top_content_left {
  46. width: 430px;
  47. height: 78px;
  48. float: left;
  49. text-align: left;
  50. margin: 10px;
  51. }
  52.  
  53. #top_content_right {
  54. width: 470px;
  55. height: 78px;
  56. float: left;
  57. margin-top: 10px;
  58. color: #39a7fe;
  59. }
  60.  
  61. #top_1px {
  62. width: 920px;
  63. height: 1px;
  64. margin: auto;
  65. border-style: solid;
  66. border-width: 1px;
  67. }
  68.  
  69. #top_1px_content {
  70. width: 920px;
  71. height: 1px;
  72. margin: auto;
  73. }
  74.  
  75. #search {
  76. background: url(img/bg_search.png) repeat-x;
  77. width: 100%;
  78. height: 53px;
  79. }
  80. #search_content {
  81. width: 920px;
  82. height: 25px;
  83. border-style: solid;
  84. border-width: 1px;
  85. text-align: left;
  86. color: #000;
  87. margin: auto;
  88. padding-top: 4px;
  89. }
  90.  
  91. #info2 {
  92. background-color: #f0f3f9;
  93. width: 100%;
  94. height: 25px;
  95. }
  96.  
  97. #info2_content {
  98. width: 920px;
  99. height: 25px;
  100. border-style: solid;
  101. border-width: 1px;
  102. text-align: left;
  103. color: #000;
  104. margin: auto;
  105. padding-top: 4px;
  106. }
  107.  
  108.  
  109. #content {
  110. width: 920px;
  111. margin: auto;
  112. border-style: solid;
  113. border-width: 1px;
  114. }
  115.  
  116. #content_left {
  117. width: 400px;
  118. float: left;
  119. overflow: hidden;
  120. position: relative;
  121. border-style: solid;
  122. border-width: 1px;
  123. }
  124.  
  125. #content_right {
  126. width: 516px;
  127. float: left;
  128. background-color: #fff;
  129. border-style: solid;
  130. border-width: 1px;
  131. }
  132.  
  133. #footer {
  134. background: url(img/bg_footer.png) repeat-x;
  135. width: 100%;
  136. height: 81px;
  137. }
  138.  
  139. #footer_content {
  140. width: 920px;
  141. height: 25px;
  142. border-style: solid;
  143. border-width: 1px;
  144. text-align: right;
  145. color: #000;
  146. margin: auto;
  147. padding-top: 4px;
  148. }


1 Problem: Sekcja <div id="search"> w IE7 wygląda dobrze, w FF zamiast być wyśrodkowanym zaczyna się od momentu, gdzie kończy się <div id="top_content_right">. Chcę żeby wszystko w sekcji search było wyśrodkowane.

2 Problem: Główna treść strony zmienia się wysokościowo zgodnie z zapotrzebowaniem. W IE sekcja footer daje się tam gdzie ma, czyli na dole, w FF odrazy pod search. Chcę na samym dole zawsze - pod główną treścią.

Jakieś pomysły, rady?
gekon
Jaki masz DOCTYPE?
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.