Ustawienie położenia buttonów

wersja skryptu MyBB: 1.6.9
adres forum: http://bb.lamalabs.org
na czym polega problem (screen, opis, komunikaty, nazwa stylu/theme/szablonu):

Mam mały problem z buttonami stworzyłem dodatkowy styl buttons.css jego zawartość:

#llbutton {
    margin-left: 5px;
    margin-right: -3px;
}

#llbutton .link a {
    color: #eeeeee;
    float: left;
    padding: 8px;
    background-color: #999999;
    display: inline;
    margin-right: 5px;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    
    text-decoration: none;
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 15px;
    font-weight: bold;
}

#llbutton .link a:hover {
    color: #ffffff;
    background-color: #C64E4E;
}

#llleft1 {
    margin-left: 56px;
    margin-right: -3px;
    margin-top: 37px;
}

#llleft1 .link a {
    color: #eeeeee;
    float: left;
    padding: 8px;
    background-color: #999999;
    display: inline;
    margin: -37px 0 0 0;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    
    text-decoration: none;
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 15px;
    font-weight: bold;
}

#llleft1 .link a:hover {
    color: #ffffff;
    background-color: #C64E4E;
}

#llleft2 {
    margin-left: 100px;
    margin-right: -3px;
    margin-top: 37px;
}

#llleft2 .link a {
    color: #eeeeee;
    float: left;
    padding: 8px;
    background-color: #999999;
    display: inline;
    margin: -37px 0 0 0;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    
    text-decoration: none;
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 15px;
    font-weight: bold;
}

#llleft2 .link a:hover {
    color: #ffffff;
    background-color: #C64E4E;
}

#llleft3 {
    margin-left: 169px;
    margin-right: -3px;
    margin-top: 37px;
}

#llleft3 .link a {
    color: #eeeeee;
    float: left;
    padding: 8px;
    background-color: #999999;
    display: inline;
    margin: -37px 0 0 0;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    
    text-decoration: none;
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 15px;
    font-weight: bold;
}

#llleft3 .link a:hover {
    color: #ffffff;
    background-color: #C64E4E;
}

#llleft4 {
    margin-left: 200px;
    margin-right: -3px;
    margin-top: 37px;
}

#llleft4 .link a {
    color: #eeeeee;
    float: left;
    padding: 8px;
    background-color: #999999;
    display: inline;
    margin: -37px 0 0 0;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    
    text-decoration: none;
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 15px;
    font-weight: bold;
}

#llleft4 .link a:hover {
    color: #ffffff;
    background-color: #C64E4E;
}

#llright1 {
    margin-left: 5px;
    margin-right: 240px;
    margin-top: 37px;
}

#llright1 .link a {
    color: #eeeeee;
    float: right;
    padding: 8px;
    background-color: #999999;
    display: inline;
    margin: -37px 0 0 0;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    
    text-decoration: none;
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 15px;
    font-weight: bold;
}

#llright1 .link a:hover {
    color: #ffffff;
    background-color: #C64E4E;
}

#llright2 {
    margin-left: 70px;
    margin-right: -3px;
    margin-top: 37px;
}

#llright2 .link a {
    color: #eeeeee;
    float: left;
    padding: 8px;
    background-color: #999999;
    display: inline;
    margin: -37px 0 0 0;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    
    text-decoration: none;
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 15px;
    font-weight: bold;
}

#llright2 .link a:hover {
    color: #ffffff;
    background-color: #C64E4E;
}

#llright3 {
    margin-left: 129px;
    margin-right: -3px;
    margin-top: 37px;
}

#llright3 .link a {
    color: #eeeeee;
    float: left;
    padding: 8px;
    background-color: #999999;
    display: inline;
    margin: -37px 0 0 0;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    
    text-decoration: none;
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 15px;
    font-weight: bold;
}

#llright3 .link a:hover {
    color: #ffffff;
    background-color: #C64E4E;
}

#llright4 {
    margin-left: 186px;
    margin-right: -3px;
    margin-top: 37px;
}

#llright4 .link a {
    color: #eeeeee;
    float: left;
    padding: 8px;
    background-color: #999999;
    display: inline;
    margin: -37px 0 0 0;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    
    text-decoration: none;
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 15px;
    font-weight: bold;
}

#llright4 .link a:hover {
    color: #ffffff;
    background-color: #C64E4E;
}

#llright5 {
    margin-left: 255px;
    margin-right: -3px;
    margin-top: 37px;
}

#llright5 .link a {
    color: #eeeeee;
    float: right;
    padding: 8px;
    background-color: #999999;
    display: inline;
    margin: -37px 0 0 0;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    
    text-decoration: none;
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 15px;
    font-weight: bold;
}

#llright5 .link a:hover {
    color: #ffffff;
    background-color: #C64E4E;
}

zgaduję że za dużo tego kodu i da się skrócić, no ale średnio z css mi idzie. Mój problem jest taki że źle wyświetlają mi się te buttony odstają od krawędzi forum.

---

Jak zawsze widzę las rąk do pomocy.

Hmm... Ze screenów średnio rozumiem problem.
Nie rozumiem też zbytnio tego całego kodu CSS. Podaj zawartość szablonu postbit, bo bez tego nie dojdę, co ty tam namodziłeś.

Sam postbit:

http://wklej.org/id/979829/

postbit_delete_pm

http://wklej.org/id/979830/

postbit_edit

http://wklej.org/id/979831/

postbit_email

http://wklej.org/id/979832/

No wszystkich chyba nie będę dawać.

http://wklej.org/id/979834/

Problemem są dziwnie marginesy i wybrane rozwiązanie zbędnego umieszczania klasy w identyfikatorze.
Przy aktualnym ustawieniu, przyciski wyświetlają się dobrze tylko wtedy, gdy są wszystkie. Jeśli jakiegoś brakuje, to marginesy między elementami się rozjeżdżają.

Tak wygląda przykładowy styl i szablon przycisku po mojemu:

.bitbutton {
    display: block;
    margin: 3px 2px;
    background-image:url(images/otkau/button_bg.png);
    padding: 2px 10px;
    float: left;
}

.bitbutton:link, .bitbutton:visited {
    color: #fff;
}

.bitbutton:hover, .bitbutton:active {
    background-position: 0px -30px;
    cursor: pointer;
    color: #fff;
    text-decoration: none;
}

.bitbutton {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

<a href="private.php?action=delete&amp;pmid={$id}&amp;my_post_key={$mybb->post_code}" class="bitbutton">Usuń</a> 


Oczywiście zamiast tła obrazkowego i jego przesuwania przy najechaniu kursorem, możesz użyć zwykłych kolorów i je zmieniać.

Live demo: http://otkau.nidrax.eu/forum/temat-kodom...d=41#pid41

A czy to tez mam dodać?

.bitbutton {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

I w jaki sposób czy po prostu wkleić to do tego:

.bitbutton {
    display: block;
    margin: 3px 2px;
    background-image:url(images/otkau/button_bg.png);
    padding: 2px 10px;
    float: left;
}

.bitbutton:link, .bitbutton:visited {
    color: #fff;
}

.bitbutton:hover, .bitbutton:active {
    background-position: 0px -30px;
    cursor: pointer;
    color: #fff;
    text-decoration: none;
}

To wyżej jest oddzielnie, bo zazwyczaj kod CSS3 umieszcza się w osobnym, specjalnie stworzonym arkuszu (css3.css), ale możesz kod dodać normalnie do global.css, albo lepiej – przekopiować atrybuty do obecnej klasy bitbutton, czyli:

.bitbutton {
    display: block;
    margin: 3px 2px;
    background-image:url(images/otkau/button_bg.png);
    padding: 2px 10px;
    float: left;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

.bitbutton:link, .bitbutton:visited {
    color: #fff;
}

.bitbutton:hover, .bitbutton:active {
    background-position: 0px -30px;
    cursor: pointer;
    color: #fff;
    text-decoration: none;
}