Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: automatyczny margines w (tylko) w firefoxie
Forum PHP.pl > Forum > Po stronie przeglądarki > CSS
zazdrosny17
11.11.2012, 14:45:48
Witam,

Tworze takie oto menu: http://www.star-bruk.pl/pomocy/menu.png <-- pokazane jak działa w różnych przeglądarkach, na
pierwszy rzut oka jest ok, ale po przyjrzeniu się widać, że w firefoxie napisy są wyśrodkowane jak trzeba, a w całej
reszcie nie. Bawiąc się margin-top, mogłem poprawić na każdej innej przeglądarce ale wtedy w firefox było na nisko...

oto link do strony: http://www.star-bruk.pl/pomocy/panel/ustawienia.php

no i kod:

html:

[HTML] pobierz, plaintext 
  1. 	<!-- menu -->
  2. 	<div id="menu">
  3. 		<a href="ustawienia.php" id="start_button"><div class="font_text_button_menu"><div id="f1">START</div></div></a>
  4. 		 <div class="space_menu_button"></div>
  5. 		<a href="aktualnosci.php" id="kluby_button"><div class="font_text_button_menu"><div id="f2">KLUBY</div></div></a>
  6. 		 <div class="space_menu_button"></div>
  7. 		<a href="zespol.php" id="zespol_button"><div class="font_text_button_menu"><div id="f3">ZESPÓŁ</div></div></a>
  8. 		 <div class="space_menu_button"></div>
  9. 		<a href="sponsorzy.php" id="sponsorzy_button"><div class="font_text_button_menu"><div id="f4">SPONSORZY</div></div></a>
  10. 		 <div class="space_menu_button"></div>
  11. 		<a href="terminarz.php" id="terminarz_button"><div class="font_text_button_menu"><div id="f5">TERMINARZ</div></div></a>
  12. 		 <div class="space_menu_button"></div>
  13. 		<a href="fotki.php" id="fanzone_button"><div class="font_text_button_menu"><div id="f6">FANZONE</div></div></a>
  14. 		 <div class="space_menu_button"></div>
  15. 		<a href="zaczki.php" id="mlodziez_button"><div class="font_text_button_menu"><div id="f7">MŁODZIEŻ</div></div></a>
  16. 		 <div class="space_menu_button"></div>
  17. 		<a href="prasa.php" id="prasa_button"><div class="font_text_button_menu"><div id="f8">PRASA</div></div></a>
  18. 		 <div class="space_menu_button"></div>
  19. 		<div id="puste"></div>
  20. 	</div>
  21. 	<!-- koniec menu -->
[HTML] pobierz, plaintext


css:
[HTML] pobierz, plaintext 
  1. @font-face 
  2. {	
  3. 	font-family: 'Aller_lt';
  4. 	src: url(../font/Aller_Lt.ttf) format("truetype");	
  5. }
  6.  
  7. @font-face 
  8. {	
  9. 	font-family: 'Aller_Rg';
  10. 	src: url(../font/Aller_Rg.ttf) format("truetype");	
  11. }
  12.  
  13. body
  14. {
  15. 	margin: 0;
  16. 	padding: 0;
  17. 	background-color: black;
  18. 	font-family: Aller_lt;
  19. }
  20.  
  21. #main_frame
  22. {
  23. 	margin: 0 auto;
  24. 	background-color: black;
  25. 	width: 1000px;
  26. 	height: 534px;
  27. }
  28.  
  29. #menu
  30. {
  31. 	clear: both;
  32. 	width: 1000px;
  33. 	height: 40px;
  34. 	border-bottom: 1px solid black;
  35. }
  36.  
  37. #start_button
  38. {
  39. 	width: 80px;
  40. 	height: 40px;
  41. 	background-image: url('../img/button_1_bg.png');
  42. 	background-repeat: repeat-x;
  43. 	float: left;
  44. 	text-decoration: none;	
  45. }
  46.  
  47. #kluby_button
  48. {
  49. 	width: 72px;
  50. 	height: 40px;
  51. 	background-image: url('../img/button_1_bg.png');
  52. 	background-repeat: repeat-x;
  53. 	float: left;
  54. 	text-decoration: none;	
  55. }
  56.  
  57. #zespol_button
  58. {
  59. 	width: 88px;
  60. 	height: 40px;
  61. 	background-image: url('../img/button_1_bg.png');
  62. 	background-repeat: repeat-x;
  63. 	float: left;
  64. 	text-decoration: none;	
  65. }
  66.  
  67. #sponsorzy_button
  68. {
  69. 	width: 118px;
  70. 	height: 40px;
  71. 	background-image: url('../img/button_1_bg.png');
  72. 	background-repeat: repeat-x;
  73. 	float: left;
  74. 	text-decoration: none;	
  75. }
  76.  
  77. #terminarz_button
  78. {
  79. 	width: 115px;
  80. 	height: 40px;
  81. 	background-image: url('../img/button_1_bg.png');
  82. 	background-repeat: repeat-x;
  83. 	float: left;
  84. 	text-decoration: none;	
  85. }
  86.  
  87. #fanzone_button
  88. {
  89. 	width: 100px;
  90. 	height: 40px;
  91. 	background-image: url('../img/button_1_bg.png');
  92. 	background-repeat: repeat-x;
  93. 	float: left;
  94. 	text-decoration: none;	
  95. }
  96.  
  97. #mlodziez_button
  98. {
  99. 	width: 105px;
  100. 	height: 40px;
  101. 	background-image: url('../img/button_1_bg.png');
  102. 	background-repeat: repeat-x;
  103. 	float: left;
  104. 	text-decoration: none;	
  105. }
  106.  
  107. #prasa_button
  108. {
  109. 	width: 83px;
  110. 	height: 40px;
  111. 	background-image: url('../img/button_1_bg.png');
  112. 	background-repeat: repeat-x;
  113. 	float: left;
  114. 	text-decoration: none;	
  115. }
  116.  
  117. #puste
  118. {
  119. 	width: 231px;
  120. 	height: 40px;
  121. 	background-image: url('../img/button_1_bg.png');
  122. 	background-repeat: repeat-x;
  123. 	float: left;
  124. }
  125.  
  126. .space_menu_button
  127. {
  128. 	width: 1px;
  129. 	height: 40px;
  130. 	background-image: url('../img/space_menu_button.png');
  131. 	float: left;
  132. }
  133.  
  134. .font_text_button_menu
  135. {
  136. 	margin-top: 11px;
  137. 	text-align: center;
  138. 	color: #525252;
  139. 	font-size: 14px;
  140. 	font-family: Aller_Rg;
  141. 	font-weight: bold;
  142. }
[HTML] pobierz, plaintext



Bardzo proszę o pomoc! - wiem, ze tam moge zaladowac zdjecia, ale jest rozwiazanie ktore mnie nie satysfakcjonuje. Probowalem tez uzyc hight-line w font_text_button_menu,
ale nie pomoglo. Pomysly sie wyczerpaly. Pomocy!
Divinity
11.11.2012, 15:44:34
Może zamiast:
Cytat
hight-line
(nie ma takiego atrybutu)

użyj line-height: 40px, a samo margin-top usuń ;]


;]
zazdrosny17
11.11.2012, 16:02:37
nono, tego uzylem, tylko tu sie pomylilem, to co napisales walsnie nic nie daje

Wiesz co, jak sie przyjzdalem to to wyglada tak:

na ten tekst nagladam border, w firefox widac wewnetrzny margines ktorego nie mozna wyzerowac.

ale jak odswiezam (F5) kilka razy szybko, to widze inna czcionke ktora tego marginesu nie ma...

i po milisekundzie zmienia sie na tą cziocnke o ktora mi chodzim, ale juz margines jest -- tylko w firefoxe
Divinity
11.11.2012, 16:14:24
Zrobiłem na szybko coś takiego: http://jsfiddle.net/bFCGp/

Kod
<ul id="menu">
    <li class="highlight"><a href="#">Start</a></li>
    <li><a href="#">Kluby</a></li>
    <li><a href="#">Zespół</a></li>
    <li><a href="#">Sponsorzy</a></li>
    <li><a href="#">Terminarz</a></li>
    <li><a href="#">Fanzone</a></li>
    <li><a href="#">Młodzież</a></li>
    <li><a href="#">Prasa</a></li>
</ul>​​​


Kod
​body {
    background-color: #fff;    
    font-family: Arial, sans-serif;    
}

#menu li {
    background-image: url("http://www.star-bruk.pl/pomocy/img/button_1_bg.png");
    border-right: 1px solid #000;
    display: inline-block;  
    margin-right: -4px;
}

#menu .highlight {
    background-image: url("http://www.star-bruk.pl/pomocy/img/button_2_bg.png");
}

#menu .highlight a {
    color: #fff;
}

#menu li a {
    display: block;
    color: #444;
    font-size: 14px;
    font-weight: bold;
    height: 40px;
    line-height: 40px;
    padding: 0 10px;
    text-decoration: none;
    text-transform: uppercase;    
}​


Na moje oko wygląda identycznie w FF, Chrome i Operze. Może to Ci pomoże smile.gif

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.