CSS und die drei großen Brower. °_O

Tag allerseits, ich müh mich momentan damit ab CSS zu lernen und bekomm langsam ne Kriese. Es geht um ein paar Buttons, die in Firefox und Opera einfach nicht an die richtige Stelle wollen.
Das Aussehen der Buttons sind in einer externen Datei (format.css) festgelegt.

Code:

---

button.biu{
        background-color:#FAE092;
        color:#000000;
        width:23px;       
        height:23px;
        border:1px solid #000000;
        font-family:Arial;
        font-size:12pt;
        margin-bottom:4px;
        margin-right:4px;
    }
button.code{
        background-color:#FAE092;
        color:#000000;
        width:50px;       
        height:23px;
        border:1px solid #000000;
        font-family:Curier;
        font-size:12pt;
        margin-right:4px;
    }

---

button.bui ist die Vorgabe für die 3 Buttons mit dem B dem I und dem U drinnen.
button.code beinhaltet die Daten für die Buttons Code und Zitat.
Durch die Breite, die Höhe und Margin müsste das ganze theoretisch so aussehen:
http://nudelsalat.webstylez.now-onli.../css/iegut.png
Der Internet Explorer spielt dabei noch brav mit. Firefox und Opera machen allerdings was anderes. °_O

Erstmal zu Opera:
Im folgenden Fenster sieht man, dass Opera nicht einmal die vorgegebene Höhe und Breite für die Buttons verwendet. Die sind alle so hochgezogen. °_°
Ich hab dann versucht, margin bei gleicher Buttongröße wegzulassen. Der IE gliedert nun jeden Button direkt aneinander, während Opera und Firefox kleine Abstände dazwischen machen. Scheint so, als würden die Browser die Abstände auch bei genau angebenenen Werten beibehalten. Kann man das irgendwie unterbinden?
http://nudelsalat.webstylez.now-onli.../css/opera.png

Firefox:
Hier haben die Buttons die größe eingehalten allerdings stimmen die abstände immer noch nicht. Die sind zwischen den Buttons bei weitem größer als 4 Pixel. ._.

http://nudelsalat.webstylez.now-onli...ss/firefox.png

Internet Explorer:
Jo, hier passt eigentlich alles. o.o'
http://nudelsalat.webstylez.now-onli...ges/css/ie.png

Joa, mach ich irgendwas falsch weil es nur im Internet Explorer geht? Gerade auf den könnte ich gerne verzichten. o_o
Ich wäre für jede Hilfe dankbar. ._.
Hier sind die HTML und die Style Sheet Dateien:
http://nudelsalat.webstylez.now-onli.../blablubb.html
http://nudelsalat.webstylez.now-onli...css/format.css


BTW: Nichts gegen die Farbwahl, die ist nicht auf meinem Mist gewachsen. ^^

Damit dus bei Opera richtig dargestellt kriegst würd ich noch ein padding setzen und bei Mozilla einfach lassen (mich stört das eigentlich net und wär mir vermutlich nicht mal aufgefallen)

So wie ich das sehe ist der Mozilla (Firefox) mal wieder der einzige der das tut, was da steht.
Damit die Größe überall gleich ist, dazu fällt mir gerade nix ein. Aber damit sie überall richtig angeordnet sind musst du Leezeichen und Zeilenumbrüche zwischen den Buttons wegnehmen - denn das sind ja auch Zeichen, die angezeigt werden.
Außerdem noch einige Sachen:
- Um eine Schriftart anzugeben verwendet man <font face="curir"> - oder noch besser CSS ;)
- Bilder brauchen immer ein alt-Attribut. Du kannst in diesem Fall ja einfach den Code, mit dem der Smiley eingebunden werden soll benutzen.

Zitat:

---

Zitat von getöteter_ork

- Bilder brauchen immer ein alt-Attribut. Du kannst in diesem Fall ja einfach den Code, mit dem der Smiley eingebunden werden soll benutzen.

---

Das würd ich nicht machen, denn ein Blinder würde dann bei ;) "Semikolon Klammer Zu" vorgelesen kriege, was extrem nervig ist. Am besten ist es deshalb, das alt-Attribut leer zu lassen und als Title eine Beschreibung zu nehmen.

Zitat:

---

Zitat von getöteter_ork

So wie ich das sehe ist der Mozilla (Firefox) mal wieder der einzige der das tut, was da steht.
Damit die Größe überall gleich ist, dazu fällt mir gerade nix ein. Aber damit sie überall richtig angeordnet sind musst du Leezeichen und Zeilenumbrüche zwischen den Buttons wegnehmen - denn das sind ja auch Zeichen, die angezeigt werden.

---

Danke, daran hats tatsächlich gelegen. :)
Der mittlere Button steht in FF zwar immernoch einen Pixel zu hoch aber egal. Immerhin besser als in Opera. :D

@Geiu
Bisher hatte ich überhaupt nicht daran gedacht, das Forum auch für Behinderte Menschen zu gestalten. Ich weiß auch garnicht, ob das überhaupt den aufwand wert ist. Hab keine Ahnung worauf man achten müsste und inwieweit normale User dadurch leicht eingeschränkt werden. Muss ich mir noch überlegen.

gute nacht

Zitat:

---

Zitat von nudelsalat

@Geiu
Bisher hatte ich überhaupt nicht daran gedacht, das Forum auch für Behinderte Menschen zu gestalten. Ich weiß auch garnicht, ob das überhaupt den aufwand wert ist. Hab keine Ahnung worauf man achten müsste und inwieweit normale User dadurch leicht eingeschränkt werden. Muss ich mir noch überlegen.

---

Esa kommt stark auf deine Zielgruppe an. Wenn das Thema deines Forums Computerspiele oder Filme sind kannst du natürlich drauf verzichten. Aber normale User werden durch solche Maßnahmen eigentlich nie eingeschränkt, im Gegenteil, denn z.B. <abbr>-Tags sind natürlich auch für normale User hilfreich.

Hey cool.

Ich wollte immer schon mal wissen, wie man solche schicken Buttons herstellt, nun weis ich es, danke schön^_^!