automatyczny margines w (tylko) w firefoxie, jak usunąć automatyczny margines Opcje

[zazdrosny17]

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 
	<!-- menu -->
	<div id="menu">
		<a href="ustawienia.php" id="start_button"><div class="font_text_button_menu"><div id="f1">START</div></div></a>
		 <div class="space_menu_button"></div>
		<a href="aktualnosci.php" id="kluby_button"><div class="font_text_button_menu"><div id="f2">KLUBY</div></div></a>
		 <div class="space_menu_button"></div>
		<a href="zespol.php" id="zespol_button"><div class="font_text_button_menu"><div id="f3">ZESPÓŁ</div></div></a>
		 <div class="space_menu_button"></div>
		<a href="sponsorzy.php" id="sponsorzy_button"><div class="font_text_button_menu"><div id="f4">SPONSORZY</div></div></a>
		 <div class="space_menu_button"></div>
		<a href="terminarz.php" id="terminarz_button"><div class="font_text_button_menu"><div id="f5">TERMINARZ</div></div></a>
		 <div class="space_menu_button"></div>
		<a href="fotki.php" id="fanzone_button"><div class="font_text_button_menu"><div id="f6">FANZONE</div></div></a>
		 <div class="space_menu_button"></div>
		<a href="zaczki.php" id="mlodziez_button"><div class="font_text_button_menu"><div id="f7">MŁODZIEŻ</div></div></a>
		 <div class="space_menu_button"></div>
		<a href="prasa.php" id="prasa_button"><div class="font_text_button_menu"><div id="f8">PRASA</div></div></a>
		 <div class="space_menu_button"></div>
		<div id="puste"></div>
	</div>
	<!-- koniec menu -->
[HTML] pobierz, plaintext 

css:

[HTML] pobierz, plaintext 
@font-face 
{	
	font-family: 'Aller_lt';
	src: url(../font/Aller_Lt.ttf) format("truetype");	
}
 
@font-face 
{	
	font-family: 'Aller_Rg';
	src: url(../font/Aller_Rg.ttf) format("truetype");	
}
 
body
{
	margin: 0;
	padding: 0;
	background-color: black;
	font-family: Aller_lt;
}
 
#main_frame
{
	margin: 0 auto;
	background-color: black;
	width: 1000px;
	height: 534px;
}
 
#menu
{
	clear: both;
	width: 1000px;
	height: 40px;
	border-bottom: 1px solid black;
}
 
#start_button
{
	width: 80px;
	height: 40px;
	background-image: url('../img/button_1_bg.png');
	background-repeat: repeat-x;
	float: left;
	text-decoration: none;	
}
 
#kluby_button
{
	width: 72px;
	height: 40px;
	background-image: url('../img/button_1_bg.png');
	background-repeat: repeat-x;
	float: left;
	text-decoration: none;	
}
 
#zespol_button
{
	width: 88px;
	height: 40px;
	background-image: url('../img/button_1_bg.png');
	background-repeat: repeat-x;
	float: left;
	text-decoration: none;	
}
 
#sponsorzy_button
{
	width: 118px;
	height: 40px;
	background-image: url('../img/button_1_bg.png');
	background-repeat: repeat-x;
	float: left;
	text-decoration: none;	
}
 
#terminarz_button
{
	width: 115px;
	height: 40px;
	background-image: url('../img/button_1_bg.png');
	background-repeat: repeat-x;
	float: left;
	text-decoration: none;	
}
 
#fanzone_button
{
	width: 100px;
	height: 40px;
	background-image: url('../img/button_1_bg.png');
	background-repeat: repeat-x;
	float: left;
	text-decoration: none;	
}
 
#mlodziez_button
{
	width: 105px;
	height: 40px;
	background-image: url('../img/button_1_bg.png');
	background-repeat: repeat-x;
	float: left;
	text-decoration: none;	
}
 
#prasa_button
{
	width: 83px;
	height: 40px;
	background-image: url('../img/button_1_bg.png');
	background-repeat: repeat-x;
	float: left;
	text-decoration: none;	
}
 
#puste
{
	width: 231px;
	height: 40px;
	background-image: url('../img/button_1_bg.png');
	background-repeat: repeat-x;
	float: left;
}
 
.space_menu_button
{
	width: 1px;
	height: 40px;
	background-image: url('../img/space_menu_button.png');
	float: left;
}
 
.font_text_button_menu
{
	margin-top: 11px;
	text-align: center;
	color: #525252;
	font-size: 14px;
	font-family: Aller_Rg;
	font-weight: bold;
}
[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]

Może zamiast:

hight-line

(nie ma takiego atrybutu)

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


;]

[zazdrosny17]

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]

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 (IMG:style_emoticons/default/smile.gif)

Pozdrawiam

Ten post edytował Divinity 11.11.2012, 16:15:08