CSS Display: inline;

[PhoenixFG]

Hi!

Ich habe mir einen Typ Link mittels CSS folgendermaßen definiert:

a.block {
font-family: Geneva, Arial, Helvetica, sans-serif;
text-decoration: none;
font-size: 14px;
color: #FFFFFF;
background-image: url(pics/button01.gif);
background-repeat: no-repeat;
display: inline;
font-size: 14px;
height: 40px;
width: 75px;
position: relative;
left: 2%;
margin: 5px 10px 0 5px;
padding: 3;
border: 1px solid #000000;
}

Wie man sieht, soll der Link mit einer Grafik hinterlegt werden. Nun interpretiert der IE die Größenangaben korrekt und setzt dann in das umrahmte Rechteck genau ein mal die Hintergrundgrafik. Mozilla jedoch, ignoriert die Größenangaben komplett und richtet sich nach der Textgröße des Links. Also bei langen Links wird die Box entsprechend breit und bei kurzen sehr schmal.
Doch von mir wird eigentlich das IE-Verhalten beabsichtigt.

Wenn ich übrigends die Darstellung von "inline" in "block" ändere, dann beachtet Mozilla die Größenangaben problemlos.

Wahrscheinlich hab ich irgendwo nen Fehler. Aber wo?
Oder gibts irgendwie einen Trick, um Mozilla die Größenangaben beizubiegen?

MfG

[Nase]

Dann mach doch einfach display: block;
Übrigens hast du 2x font-size drin.

[PhoenixFG]

zweimal Schriftgröße...passiert, wenn man dauernd drin herum editiert, ums doch noch irgendwie hinzubekommen.

Den Unterschied zw. Display: block und inline kennst Du? Wenn ich block verwenden könnte, würde ich es doch tun. Aber die Elemente sollen nun mal einfach nebeneinander stehen und nicht untereinander.

MfG

[Sphinx]

Den Unterschied zw. Display: block und inline kennst Du? Wenn ich block verwenden könnte, würde ich es doch tun. Aber die Elemente sollen nun mal einfach nebeneinander stehen und nicht untereinander.

MfG

Naja mit Firefox + Opera könntest du den zusatz ( float: left; ) nutzen habe selbiges Problem mit ul|li|a -> CSS-Buttons die Nebeneinander in einer bestimmten Breite erscheinen sollen... sobald ich ich ( display: inline;) nutze sind die Buttons bei Moz/Opera an die Größe des Linktextes (in diesem Fall der Button) angepasst. Bei (display: block;) habe ich einen Zeilenumbruch zwischen den Objekten den ich nur mit (float:left;) wegbekomme aber dafür gleichgroße Objekte...jedoch links-bündig...


Zur Not nimmst (IE+Opera Kompatibel) jedoch nicht Moz... ( display : inline-block; )

http://www.w3.org/TR/REC-CSS2/visuren.html#display-prop

[PhoenixFG]

thx, float: left hat geholfen. Wie soll man nur auf sowas kommen.

MfG

[Gil-galad]

Wie man sieht, soll der Link mit einer Grafik hinterlegt werden. Nun interpretiert der IE die Größenangaben korrekt und setzt dann in das umrahmte Rechteck genau ein mal die Hintergrundgrafik. Mozilla jedoch, ignoriert die Größenangaben komplett und richtet sich nach der Textgröße des Links. Also bei langen Links wird die Box entsprechend breit und bei kurzen sehr schmal.
Doch von mir wird eigentlich das IE-Verhalten beabsichtigt.

Mozilla interpretiert es wohl eher richtig und der IE falsch. Mozilla ist wesentlich näher am CSS-Standard als der IE. Deshalb interpretiert der IE auch relativ viel falsch und führt so zu falschen Darstellungen.

[Sphinx]

Mozilla interpretiert es wohl eher richtig und der IE falsch. Mozilla ist wesentlich näher am CSS-Standard als der IE. Deshalb interpretiert der IE auch relativ viel falsch und führt so zu falschen Darstellungen.

Das Problem ist - interpretieren...

Die Frage ist warum kann man ein Style mit display:inline; bei Mozilla NICHT mit der Breitenangabe width:100px; kombinieren...

~ ich hab aber ein wenig rumprobiert und bin mit dieser Lösung ganz zufrieden...

echo '<ul style="display:inline;">';
echo '<li style="width: 50px;display:table-cell;" title="Select Slot"><a style="width: 45px;display:block;" href="/php/index.php5?siteid=admincms&amp;id=teamsettings&amp;sid=';
echo $inhaltteams["id"];
echo '&amp;option=select';
echo '">Select</a></li>';
echo '</ul>';

Das ist ein UL/LI/A Button der bei allen 3 Big Browsern nun funktioniert *gottseidank... Kein ~ Zeilenumbruch mehr - kein ~ Button der nur an die Größe des Textes angepasst ist.... (Mozilla) in diesem Fall

[Gil-galad]

Das Problem ist - interpretieren...

Die Frage ist warum kann man ein Style mit display:inline; bei Mozilla NICHT mit der Breitenangabe width:100px; kombinieren...

Schonmal dran gedacht, dass CSS bestimmt Kombinationen nicht zulässt und sich der Mozilla da dran hält und der IE nicht? ;)

[PhoenixFG]

Schonmal dran gedacht, dass CSS bestimmt Kombinationen nicht zulässt und sich der Mozilla da dran hält und der IE nicht? ;)

Das mag ja sein und hat vielleicht auch seinen Sinn. Aber ich hab eben ein bestimmtes Ziel vor Augen, was das Aussehen meiner Webseite betrifft. Und da will ich die Breite des Links eben bestimmen können. Wenn der IE das zufällig so interpretiert wie ich es brauche und Mozilla tut das nicht, hilft es mir wenig, wenn der IE eigentlich einen Interpretationsfehler hat.
Dann muss ich eben den Code so lange biegen, bis er auf möglichst vielen Systemen zu einem Ergebnis führt, welches betrachtbar ist und nahe an meinen Vorstellungen ist.

MfG