Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS][HTML] Inna interpretacja margin-top przez FF
Forum PHP.pl > Forum > Przedszkole
mlodygda
Witam, mam stronkę składającą się z 3 divów:

  1. #naglowek
  2. {
  3. text-align: center;
  4. position: absolute;
  5. background-color: #DBDBDB;
  6. width: 64%;
  7. height: auto;
  8. margin-top: 163px;
  9. margin-left: 18%;
  10. color: black;
  11. font-family: Acme;
  12. font-size: 14pt;
  13. border-style: outset;
  14. border-color: white;
  15. border-bottom: 0;
  16. }
  17.  
  18. #tresc
  19. {
  20. text-align: center;
  21. position: absolute;
  22. overflow: auto;
  23. background-color: #DBDBDB;
  24. width: 64%;
  25. height:434px;
  26. margin-top: 266px;
  27. margin-left: 18%;
  28. color: black;
  29. font-family: Acme;
  30. font-size: 14pt;
  31. border-style: outset;
  32. border-color: white;
  33. border-bottom: 0;
  34. border-top: 0;
  35. }
  36.  
  37. #stopka
  38. {
  39. text-align: center;
  40. position: absolute;
  41. background-color: #DBDBDB;
  42. width: 64%;
  43. height: auto;
  44. margin-top: 700px;
  45. margin-left: 18%;
  46. color: black;
  47. font-family: Acme;
  48. font-size: 14pt;
  49. border-style: outset;
  50. border-color: white;
  51. border-top: 0;
  52. }


Problem jest w nagłówku w tym miejscu:

margin-top: 163px;

Otóż tak ten margines interpretuje firefox:
http://s18.postimg.org/w1sg73rrt/firefox.jpg

A tak interpretuje go opera:
http://postimg.org/image/sbp9vrizr/

Jak można zauważyc w operze jest widoczna dolne obramowanie menu ( wskazane czerwoną strzałką ) natomiast w firefoxie to menu przesuwa sie nieco w dół i juz nie widać tego obramowania. Próbowałem to rozwiązywać za pomocą % czyli:

margin-top: xx%; -> ale wtedy na innych rozdzielczościach się stronka kaszani. Jakie jest wyjście z tej sytuacji?
!*!
Pokaż to jakoś na przykładzie online http://jsfiddle.net/ http://forum.php.pl/index.php?showtopic=15...mp;#entry896036
Zresetuj ustawienia tego menu, jak i innych elementów
  1. *{margin:0;padding:0}
mlodygda
Proszę Cię bardzo:

http://jsfiddle.net/Lztn2/3/show/

aczkolwiek tu to w ogóle się rozjechało.

Tutaj kod:
http://jsfiddle.net/Lztn2/3/
!*!
Tak jak pisałem, musisz użyć jakiegoś pliku css który będzie resetował wygląd pod każdą przeglądarką.
http://jsfiddle.net/Lztn2/9/show/
Nie używaj wartości % do centrowania, jak i ustalenia marginesu, w poziomie używaj
  1. margin:0 auto;
, a w pionie... tu są różne techniki, sam musisz wybrać którą. (display:table, wiecej znadziesz w google pod "html centrowanie div")
Dodatkowo nie miałeś domkniętych tagów.
mlodygda
ja nie wiem, czy my piszemy o tym samym, bo z tego co mówisz jedyną rozsądną radą jest ta o pliku CSS pod każdą przeglądarkę.

Mi chodzi o to, żeby treść na tym szarym tle (nagłówek z menu, zawartosc tekstowa i stopka ) byly w tym miejscu w którym są na przedstawionych skrinach.
Problem jest - jak napisałem - w tym, że w FF nagłówek zachodzi nieco za treść i nie widać dolnego obramowania.
Kiedy wezmę margin:0 i padding:0 to przecież to menu będzie na górze strony. Dzięki bardzo, ale nie o to chodzi.

Napisałem też, że % NIE używam bo się kaszani na innych rozdziałkach.

Więc tak naprawde dalej nie wiem, jak sobie z tym poradzić.
!*!
Skoro nie używasz %, to po co podajesz kod w którym się one znajdują?
Porównaj kod jaki Ci podałem. Wywaliłem z niego zbędne rzeczy, dostosuj to tylko dalej pod siebie. position absolute itd, nie jest Ci tu do niczego potrzebny. Przepisz to jeszcze raz, ale używając znaczników które są potrzebne, a nie tych które akurat się nawiną.

http://jsfiddle.net/Lztn2/11/

edycja:
http://jsfiddle.net/Lztn2/12/show/
mlodygda
juz nic.

dzięki bardzo.
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.