[CSS] Probleem vrije ruimte om tekst button

[MarcelP102]

Beste allen,

Afgelopen zomer heb ik zeer veel tijd gestoken in het totaal ombouwen van een standaard Magento template naar een wat mooier ogende site. Met mijn basis CSS kennis ben ik toen al ver gekomen maar een enkel punt heb ik tot op heden niet kunnen oplossen.

Het gaat bijvoorbeeld om deze pagina, de "koop nu" en "verkocht" knop valt kleiner uit dan het kader waar de prijs in staat.

Ik heb al eens geprobeerd met css margin de ruimte gelijk te maken, maar echter als er dan op bijvoorbeeld een andere browser de site bekeken word (waar de letters type ineens kleiner/groter is) klopt het weer niet. Momenteel alles maar terug gezet zoals het eerst was, maar ik irriteer me er nog mateloos aan.

Als iemand mij hiermee zou willen helpen zou ik zeer dankbaar zijn

[Rwin]

Als ik je goed snap wil je het volgende:

Er staan 3 knopjes onderaan elk product, en je wilt evenveel ruimte tussen de 3 knopjes?
Als het dit bovenstaande is, dan is het iets met padding op het verkeerde element vermoed ik.

Als dit het niet is, maak ff een plaatje van wat je wilt, en wat er fout is.

[MarcelP102]

Ja dat de hoogte van alle 3 de buttons gelijk zijn, het vervelende is is dat bij firefox de buttons wel even hoog zijn maar bij Chrome en andere browsers dit niet zo is.

[ Voor 54% gewijzigd door MarcelP102 op 09-07-2010 21:28 ]

[Rwin]

De hoogte van de 3 buttons is gelijk (bij mij op ff 3.6.6)
Bij IE8 inderdaad niet.

Ik denk nog steeds ergens padding.

Zit trouwens een css fout in, misschien dat ie daardoor genegeerd wordt:
Waarschuwing: ‘auto’ gevonden waar einde van waarde verwacht. Fout tijdens het parsen van waarde voor ‘padding’. Declaratie genegeerd.
Bronbestand: http://www.consoleonderde...otheme/css/stylesheet.css
Regel: 175

[ Voor 69% gewijzigd door Rwin op 09-07-2010 21:30 ]

[MarcelP102]

Oke nu het verder uitgezocht te hebben lijkt idd de Padding op de <button> niet te werken. Met behulp van Google Chrome gemerkt dat het aan/uit zetten van-> padding: 1px 3px; op het element .koop-box .form-button { geen effect heeft. Hoe komt het dat de padding wel werkt bij FF maar bij IE en Chrome niet? Iemand een idee?

[Rwin]

box-model ding denk ik.
Het zijn 2 buttons, en 1 div, daar zit het ergens. Je css is te ongeorganiseerd (voor mij tenminste als buitenstaander, en het is nu te warm ) om er even in te duiken.


Je css is erg ongeorganiseerd... ga eens hiernaartoe: http://www.cleancss.com/ en bekijk daarna eens de (meters scherm ) de code. De classe price (daar zit het denk ik) komt een aantal keer voor, op verschillende plaatsen...

[ Voor 37% gewijzigd door Rwin op 09-07-2010 22:16 . Reden: toch gekeken ]

[Mercarra]

Ik blijf dit even volgen. Toen Chrome uitkwam heb ik alle paddings op mijn site ook moeten verwijderen en omgezet naar margins van de 'childs' (of hoe dat ook moge heten in css termen).

[SumBeam]

In Opera is het bij mij ook het geval, scheelt precies 2 pixels met de rest. Als ik de top en bottom border weghaal en op 0px zet, klopt het wel precies.

Een border plakt zichzelf om het element heen (bijna altijd, tabellen zijn een uitzondering). Als je een div hebt van 100px en je zet er een border van 2px omheen, wordt hij dus 104px. Misschien moet je het ergens in die richting zoeken?

[R4gnax]

PSPonderdelen schreef op vrijdag 09 juli 2010 @ 21:58:
Oke nu het verder uitgezocht te hebben lijkt idd de Padding op de <button> niet te werken. Met behulp van Google Chrome gemerkt dat het aan/uit zetten van-> padding: 1px 3px; op het element .koop-box .form-button { geen effect heeft. Hoe komt het dat de padding wel werkt bij FF maar bij IE en Chrome niet? Iemand een idee?

Firefox maakt standaard gebruik v/h oude IE box model voor button elementen, wat nu in CSS3 bekend staat als het border-box model. Gebruik eerst eens -moz-box-sizing: content-box en ga dan proberen alles cross-browser gelijk te trekken.

[ Voor 4% gewijzigd door R4gnax op 10-07-2010 14:32 ]