een link een vaste breedte meegeven via CSS in Mozilla

[marty]

Omdat het in IE niet mogelijk is om via CSS een button te veranderen als je er overheen hovert heb ik geprobeerd de buttons via een normale link te maken. Dat gaat in IE prima, maar nu ligt mozilla weer dwars. Mozilla vertikt het om een link een vaste width te geven (ik kan het niet met padding oplossen omdat ik een vaste breedte wil). (en vertikt het trouwens ook om 'm een margin mee te geven).

Wat ik nu heb:

Cascading Stylesheet:

a.spField:link, a.spField:visited, a.spField:hover, a.spField:active {
/*  display: block; */
    margin: 2px 0px;
    width: 150px;
    text-align: center;
    }
a.spField:link, a.spField:visited {
    background-color: white;
    color: blue;
    border: 1px solid blue;
    }
a.spField:hover, a.spField:active {
    background-color: blue;
    color: white;
    border: 1px solid white;
    }

Dat tekent in IE een soort button van 150pixels breed met een witte achtergrond en blauwe text + border. In Mozilla geeft ie 'm alleen die breedte niet van 150pixels (en ook de margin niet).
Ik heb het proberen op te lossen met de display property en opzich krijg ik dan wel de 150px voor elkaar (block, table, list-item), maar dan krijgt ie ook gelijk een ongewenste return mee. En da's niet de bedoeling.

Iemand enig idee hoe dit (zonder javascript) op te lossen is?

[drm]

Ik heb het proberen op te lossen met de display property en opzich krijg ik dan wel de 150px voor elkaar (block, table, list-item), maar dan krijgt ie ook gelijk een ongewenste return mee.

display:block is toch the way to go here. Je mag namelijk de breedte van inline items niet bepalen (da's nou eenmaal zo vastgelegd). Die "ongewenste return" is waarschijnlijk een margin, padding, line-height of gerenderde white-space.

[crisp]

De "ongewenste return" is inherent aan het feit dat je er een block-level element van maakt
Voor mozilla kan je dit doen:

Cascading Stylesheet:

display: -moz-inline-box;

totdat inline-block officieel gesupport gaat worden.

[ Voor 15% gewijzigd door crisp op 09-09-2005 15:09 ]

[marty]

crisp schreef op vrijdag 09 september 2005 @ 15:07:
De "ongewenste return" is inherent aan het feit dat je er een block-level element van maakt
Voor mozilla kan je dit doen:

Cascading Stylesheet:

display: -moz-inline-box;

totdat inline-block officieel gesupport gaat worden.

Hey dat werkt! Nu is de grootte in zowel IE als Mozilla vast. :-)

Zit nu alleen met een nieuw probleem: hoe krijg ik de text gecentreerd in Mozilla ?
Heb 't al geprobeerd met een padding van 50% aan beide kanten, maar dan rekt ie 'm gelijk tot buiten m'n scherm uit (en centreert 'm vervolgens nog steeds niet)

[crisp]

marty schreef op vrijdag 09 september 2005 @ 15:55:
[...]


Hey dat werkt! Nu is de grootte in zowel IE als Mozilla vast. :-)

Zit nu alleen met een nieuw probleem: hoe krijg ik de text gecentreerd in Mozilla ?
Heb 't al geprobeerd met een padding van 50% aan beide kanten, maar dan rekt ie 'm gelijk tot buiten m'n scherm uit (en centreert 'm vervolgens nog steeds niet)

niet... dat is een tekortkoming van -moz-inline-box, helaas...

-moz-inline-box is eigenlijk een XUL style. Mozilla had ook support voor -moz-inline-block, maar dat is ergens tussen 1.0.4 en 1.0.6 kapot gegaan en is vziw nog niet gefixed...

Enige alternatief dat je hebt is display: block; gebruiken en het element floaten.

[ Voor 9% gewijzigd door crisp op 09-09-2005 16:06 ]

[marty]

crisp schreef op vrijdag 09 september 2005 @ 16:05:
[...]
Enige alternatief dat je hebt is display: block; gebruiken en het element floaten.

floaten is ook niet echt een optie. ik ben juist een poging aan het doen al het bestaande in 1 goeie css-file onder te brengen, zodat ik wat meer uit m'n code weg kan halen en het wat makkelijker wordt de boel te onderhouden. als ik ze ga floaten dan moet ik alsnog in de pagina's zelf gaan lopen klooien om alles goed op z'n plaats te krijgen.