Inny wygląd pod FF i Operą

[PawelC]

Hej mam taki problem, pod FF strona się super wyświetla a pod FF już nie, co może być powodem tego?

kod mam taki:

<li style="width:171px;background:url(guzik.gif);height:26px;list-style:none;padding-left:55px;padding-top:12px;font-size:12px;font-family:Verdana;font-weight:bold;color:#0099ff;margin-top:4px;margin-bottom:-18px;">Kategorie</li>

Kod dla id="link" w li

#link ul,li{
padding-left:10px;
width:196px;
list-style:none;
margin-left:10px;


font-size:12px;
font-family:Verdana;
color:	 #565656;
}

Pod FF wygląda dobrze, a pod Operą już nie, a dokładniej można tu zobaczyć:

https://www.gigadownload.net.pl/ftp/exploitbug1.jpg

[giker]

przecież masz margin-bottom:-18px;

[PawelC]

No tak, jak mam bez tego to pod Operą strona dobrze się wyświetla, a pod FF już nie. A jak mam ten margin to pod FF jest dobrze a po Operą nie.

[pawelut]

Stawiam na margin-bottom:-18px

Zostalem uprzedzony

[PawelC]

NO tak tylko jak to wywalę to pod FF będzie źle to wyglądało. A dokładnie będzie odstęp od Kategorie na jakieś 18px

[Flanker]

Pokoazałbyś większą część kodu...

Spróbuj display:block; nie gwarantuję, że zadziała.

Ja bym to jednak zrobił troszkę inaczej, nagłówki działów (Menu, Kategorie, Ostatnio na forum itp) zrobił jako h3 a linki na liscie ul li.

[PawelC]

body{
margin:0;
padding:0;
}
.content{
width:857px;
margin-left:auto;
margin-right:auto;


}
.contents{
width:857px;
margin-left:auto;
margin-right:auto;


}
.top{
width:842px;
height:30px;
margin-left:auto;
margin-right:auto;
background:url(pasek.gif);
color:white;
font-size:11px;
font-family:Tahoma;
padding-left:15px;
padding-top:7px;
}

.top a:link{color:white;text-decoration:none;}
.top a:active{color:white;text-decoration:none;}
.top a:visited{color:white;text-decoration:none;}
.top a:hover{color:white;text-decoration:underline;}

.logo{
width:857px;
height:171px;
margin-left:auto;
margin-right:auto;
background:url(top.gif);
}

.lewa{
width:240px;
height:auto;
margin-left:-7px;
float:left;
}
.lewa a:link,a:active,a:visited{color:#565656;text-decoration:none;}
.lewa a:hover{color:#565656;text-decoration:underline;}
.prawa a:link,a:active,a:visited{color:#565656;text-decoration:none;}
.prawa a:hover{color:#565656;text-decoration:underline;}
.prawa{
width:610px;
*width:605px;
float:right;
margin-right:10px;
*margin-right:0;
font-size:12px;
font-family:Verdana;
color: 	#565656;
}


#link ul,li{
padding-left:10px;
width:196px;

list-style:none;
margin-left:10px;
margin-top:0;
font-size:12px;
font-family:Verdana;
color: 	#565656;
display:block;
}
.home{
width:590px;
*width:575px;
height:162px;
background:url(helo.gif);

font-family:Verdana;
padding:10px;
color:#565656;
font-size:12px;
}
.news{
width:590px;
*width:575px;
height:243px;
background:url(news.gif);

font-family:Verdana;
padding:10px;
color:#565656;
font-size:12px;
}
.serwisy{
width:590px;
*width:575px;
height:313px;
background:url(dane.gif);

font-family:Verdana;
padding:10px;
color:#565656;
font-size:12px;
}
span.blue{
font-family:Verdana;
font-weight:bold;
color:#0099ff;
font-size:12px;
}
.serwisy a:link{color:#565656;text-decoration:underline;}
.serwisy a:active{color:#565656;text-decoration:underline;}
.serwisy a:visited{color:#565656;text-decoration:underline;}
.serwisy a:hover{color:#565656;text-decoration:none;}

.soft a:link{color:#565656;text-decoration:underline;}
.soft a:active{color:#565656;text-decoration:underline;}
.soft a:visited{color:#565656;text-decoration:underline;}
.soft a:hover{color:#565656;text-decoration:none;}

[Flanker]

Podaj jeszcze kod html menu, nie wiemy jak je zrobiłeś.

[PawelC]

<!-- Kategorie !-->
<li style="width:171px;background:url(guzik.gif);height:26px;list-style:none;padding-left:55px;padding-top:12px;font-size:12px;font-family:Verdana;font-weight:bold;color:#0099ff;margin-top:4px;margin-bottom:-18px;">Kategorie</li>
<?php
require 'config.php';
mysql_query('SET NAMES utf8');
$sql=mysql_query("select * from gd_kategorie");
while($row=mysql_fetch_array($sql)){
echo '<li id="link">- <a href="kategoria.php?id='.$row['id'].'">'.htmlspecialchars($row['nazwa']).'</a></li>';
}
mysql_close();
?>

Kurde, jeżeli zamiast pobrania z bazy dam <li id="link"><a href="#">cos</a></li> to działa po Operą i FF

[Flanker]

Trochę to dziwne, u mnie po usunięciu margin-bottom:-18px; wyświetla wszystko poprawnie pod każdą przeglądarką. Zwróć u siebie uwagę jak użyłeś znaczników ul, czy zamykałeś i otwierałeś po każdej grupie menu czy wszystko jest w jednym ul (teoretycznie nie ma znaczenia ale w praktyce być może).

Po drugie proponuję ci użycie nagłówków, h3 lub h4, po to one są, aby w co ważniejszych częściach strony je stosować.

Kurde, jeżeli zamiast pobrania z bazy dam <li id="link"><a href="#">cos</a></li> to działa po Operą i FF

Więc porównaj sobie kod wygenerowany przy użyciu bazy i bez. Być może gdzieś popełniłeś mały błąd i czymś się różni.

[PawelC]

Kod wygenerowany:

<ul class="link">

<li style="width:171px;background:url(guzik.gif);height:26px;list-style:none;padding-left:55px;padding-top:12px;font-size:12px;font-family:Verdana;font-weight:bold;color:#0099ff;margin-top:4px;">Kategorie</li>
<li class="link"><a href="kategoria.php?id=3">Bezpieczeństwo</a></li>
<li class="link"><a href="kategoria.php?id=4">Biblioteki i Dodatki</a></li>
<li class="link"><a href="kategoria.php?id=5">Biurowe</a></li>
<li class="link"><a href="kategoria.php?id=6">Edukacja i Nauka</a></li>
<li class="link"><a href="kategoria.php?id=7">Firma</a></li>
<li class="link"><a href="kategoria.php?id=8">Grafika</a></li>
<li class="link"><a href="kategoria.php?id=9">Multimedia</a></li>
<li class="link"><a href="kategoria.php?id=10">Internet i Komunikacja</a></li>
<li class="link"><a href="kategoria.php?id=11">Programowanie</a></li>
<li class="link"><a href="kategoria.php?id=12">Narzędzia</a></li>
<li class="link"><a href="kategoria.php?id=13">Strefa Linuxa</a></li>
<li class="link"><a href="kategoria.php?id=14">Gry</a></li>
<li class="link"><a href="kategoria.php?id=15">Telefony komórkowe</a></li>
<li class="link"><a href="kategoria.php?id=16">Programy portable</a></li></ul>

I ten właśnie wygenerowany kod wkleiłem, i jak ręcznie wstawie to jest wszystko ok, a jak generuje to jest źle

[Grim]

Zrób plik .css pod FF i osobny pod Operę Jednym wyeliminujesz błąd pod FF a drugim błąd pod Operą:

<link href="FF.css" rel="stylesheet" type="text/css" />
{if $browser eq 'opera' }
<link href="OP.css" rel="stylesheet" type="text/css" /> 
{/if}

Pozdrawiam

[Flanker]

Spróbuj zastąpić:

<li style="width:171px;background:url(guzik.gif);height:26px;list-style:none;padding-left:55px;padding-top:12px;font-size:12px;font-family:Verdana;font-weight:bold;color:#0099ff;margin-top:4px;">Kategorie</li>

Tym:

<h3 style="width:171px;background:url(guzik.gif);height:26px;padding:12px 0 0 55px;font-size:12px;font-family:Verdana;font-weight:bold;color:#0099ff;margin:4px 0 0 0;">Kategorie</h3>

Tylko znacznik otwierający <ul> przenieś pod to.

[xerif]

Grim, każdą stronę da się napisać tak, aby działała poprawnie bez osobnych arkuszy dla przeglądarek. Czasami wyjątek stanowi Internet Explorer, jednakże większość błędów da się tam wyeliminować nieco kombinując lub osiągając cel w inny sposób.

ExPloiT, widzę, że już poprawiłeś, ale powiem jako przestrogę dla innych. Mianowicie, na stronie może pojawić się tylko jeden element z przypisanym ID! Jeśli masz zamiar wyświetlać kilka to stosuj klasy.

Do poprawienia masz jeszcze jedną rzecz. Przypisujesz do każdego li klasę odwołując się do tego li poprzez .link zamiast przypisać klasę/id do menu i odwoływać się tak: #menu li

Kolejna sprawa - "Kategorie". Jeśli menu masz podzielone na kategorie to najodpowiedniejsze powinno być stosowanie dl/dt/dd, gdzie dt używasz do właśnie takich tekstów jak "Kategorie".

Zewnętrzny arkusz styli przynosi wiele korzyści - wszystkie ustawienia odpowiadające za wygląd poszczególnych elementów masz w jednym miejscu, a zmieniając coś w tymże miejscu zmieniasz wygląd jakiegoś elementu na stronie i wszystkich podstronach z dołączonym tym arkuszem. Ponadto strona z dołączonym zewnętrznym arkuszem ładuje się szybciej, gdyż jest on "keszowany" w przeglądarce. Czemu więc stosujesz style inline? Przypisuj identyfikatory i klasy, ale pamiętaj, że do elementu można się także odwołać za pomocą selektora typu.

Podaj również adres strony - w ten sposób łatwiej jest pomóc i szybciej otrzymasz trafną odpowiedź. Można wówczas skorzystać z narzędzi jakie dała nam technika - np. WebDeveloper Tools.