[HTML][PHP][CSS]Problem ze stylami listy ;/, Jak powyżej Opcje

[worek]

Otóż problemik dzisiaj mam taki że ustawiłem style dla elementu listy dla pseudoklasy hover. Wiem wiem niektóre przeglądarki nie wspierają. Ale mam problem taki że pierwszy element listy ma coś spieprzone ze stylami reszta już idzie jak trzeba. Znaczy się mam menu poziome. I mam gradiencik. To po najechaniu na pierwszy element listy gradiencik jakieś 4px od dołu się nie zmienia ;/ A na pozostałych przyciskach cały przycisk się zmienia. Nie wiem co jest przyczyną szukałem w kodzie czy czasem paragrafu nie wepchnąłem w listę czy coś ale nic z tego. Więc chyba będę musiał zrobić menu na tabeli ;/

Kod generujący menu w liście:

CODE

<ul>
<?php
while($result = mysql_fetch_array($query)){
echo "<li class=\"buton\">".$result['cat_name']."</li>";}
?>
</ul>

style CSS

CODE

.buton
{

top:50%;
font-size:16px;
text-align:center;
border:1px;
border-color:#ff8400;
border-style:solid;
color:#ff7a03;
left:-30px;
list-style-position:outside;
list-style-type:none;
list-style:none;
width:180px;
position:relative;
height:30px;
padding:2px;
margin-top:10px;
margin-bottom:10px;
text-decoration:none;
background:linear-gradient(top, #f9e48f 0%,#f0bb00 100%); /* Old browsers */
background: -moz-linear-gradient(top, #f9e48f 0%, #f0bb00 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f9e48f), color-stop(100%,#f0bb00)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #f9e48f 0%,#f0bb00 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #f9e48f 0%,#f0bb00 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #f9e48f 0%,#f0bb00 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#F9E48F', endColorstr='#F0BB00',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, #f9e48f 0%,#f0bb00 100%); /* W3C */
-webkit-border-top-left-radius: px;
-webkit-border-top-right-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius: px;
-moz-border-radius-topleft: px;
-moz-border-radius-topright: 10px;
-moz-border-radius-bottomright: 10px;
-moz-border-radius-bottomleft: px;
border-top-left-radius: px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: px;
webkit-box-shadow: 0px 0px 5px #ff8400;
-moz-box-shadow: 0px 0px 5px #ff8400;
box-shadow: 0px 0px 5px #ff8400;
text-shadow: 0px 0px 2px #bb3f02;
filter: dropshadow(color=#ffb74b, offx=0, offy=0);
}
.buton:hover
{

top:50%;
font-size:16px;
vertical-align:bottom;
text-align:center;
border:1px;
border-color:#ff8400;
border-style:solid;
color:#ff7a03;
left:-30px;
list-style-position:outside;
list-style-type:none;
list-style:none;
width:180px;
position:relative;
height:30px;
margin-top:10px;
margin-bottom:10px;
text-decoration:none;
background: #f0bb00; /* Old browsers */
background: -moz-linear-gradient(top, #f0bb00 0%, #f9e48f 54%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f0bb00), color-stop(54%,#f9e48f)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #f0bb00 0%,#f9e48f 54%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #f0bb00 0%,#f9e48f 54%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #f0bb00 0%,#f9e48f 54%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#F0BB00', endColorstr='#F9E48F',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, #f0bb00 0%,#f9e48f 54%); /* W3C */
-webkit-border-top-left-radius: px;
-webkit-border-top-right-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius: px;
-moz-border-radius-topleft: px;
-moz-border-radius-topright: 10px;
-moz-border-radius-bottomright: 10px;
-moz-border-radius-bottomleft: px;
border-top-left-radius: px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: px;
webkit-box-shadow: px 5px #faebad;
-moz-box-shadow: px 5px #faebad;
box-shadow: px 5px #faebad;
text-shadow: 0px 0px 2px #bb3f02;
filter: dropshadow(color=#ffb74b, offx=0, offy=0);
}

Ten post edytował worek 29.05.2011, 23:15:53

[mortus]

Wypadałoby kod pokazać.

[worek]

Problemik rozwiązany, dałem <a> do listy i dla niego klasę hover, zamiast gradientów CSS-owych dla zgodności z przeglądarkami dałem 1px width image. chociaż nie takie zadanie ma spełniać bo ma być menu ale tylko podgląd menu jak będzie wyglądać po edycji w CMS-ie to dałem false żeby link nigdzie nie kierował

Ten post edytował worek 30.05.2011, 09:22:02