[IE vs FF] Input buttons te breed

[RwD]

Ik heb een klein verschil in layout op een webpagina tussen IE6 en FF1. De input buttons in IE worden namelijk extra breed hoe langer de tekst is die er in staat. Bij korte teksten zit er in IE links en rechts van de tekst in een button een ruimte vergelijkbaar met de ruimte in FF, maar als de teksten iets langer worden lijkt er ineens een padding links en rechts toegevoegd te worden die ik niet weg krijg!!

Hieronder is groen omkaderd zoals ik het wil hebben en zoals het wordt weergegeven in FF. Rood omkaderd is met te veel padding en zoals ik het dus niet wil hebben (IE).


Nu heb ik geprobeerd specifiek voor deze buttons eens een padding in te stellen, en ik heb alle css eigenschappen af gelopen, maar kan niks vinden. Ook heb ik hier en op Google gezocht. Ik wil trouwens geen specifieke breedte opgeven, de tekst in de knoppen is taal en context afhankelijk!

Ik heb bovenaan de stylesheet trouwens de volgende code staan om het verschil in standaardinstellingen tussen IE en FF (mbt margins en padding) op te heffen:

Cascading Stylesheet:

* {
  padding : 0;
  margin : 0;
}

Is dit nu een IE probleem doet FF het verkeerd? En waarom zit zo'n verschil als dit er in zonder dat het aanpasbaar is

[Willem]

Misschien wat meer sourcecode laten zien want hier kunnen we niks mee

[RwD]

Weinig creatief hoor; zonder stylesheet gebeurd het ook.

HTML:

<div id="buttons">
    <input type="submit" value="Save changes">
    <input type="reset" value="Reset values">
    <input type="button" value="Delete user">
</div>

[ Voor 35% gewijzigd door RwD op 20-01-2005 09:06 ]

[crisp]

je buttons een vaste breedte geven.

[RwD]

Zoals ik al aangaf wil ik dit niet doen omdat de inhoud taal en context afhankelijk is. Teksten in het fins zijn meestal langer dan in het engels!

[Verwijderd]

Probeer de buttons anders eens in een tabel te plaatsen.
Ik vind dit, persoonlijk, een goede manier om alles mooi gelayout de houden.

[RwD]

Ik weet niet of dat het probleem wel op lost en dat de knop naar de volgende regel springt kan ik wel oplossen zonder tabellen. Tabellen voor eigenschappen van een gebruiker kan ik rechtvaardigen maar voor 1 rij knoppen zie ik dit niet zitten.

De reden dat een tabel het voor het uiterlijk niet oplost is omdat ik er geen vaste waarde voor de breedte aan kan geven, en de knoppen eigenwijs hun grootte in zullen nemen (heb het net even geprobeerd)

HTML:

<tabel style="border:0;">
    <tr>
        <td><input class="button" type="submit" value="Save changes"></td>
        <td><input class="button" type="reset" value="Reset values"></td>
        <td><input class="button" type="button" value="Delete user"></td>
    </tr>
</tabel>

Maar deze code kan en wil ik dus niet gebruiken!

[ Voor 17% gewijzigd door RwD op 20-01-2005 09:18 ]

[crisp]

Je zou inderdaad verwachten dat het met padding op te lossen zou zijn; helaas is dat dus niet het geval en is er, althans voor Firefox, niet veel aan te doen. Form-elementen laten zich nu eenmaal vaak lastig stylen.
Wat je nog wel zou kunnen doen is een divje stylen en mbv een onclick en wat javascript de acties uitvoeren.

[RwD]

Gelukkig zeg je daar nog "althans voor FireFox" dat geeft me hoop voor IE
Is er wel een manier hoe je dit in IE aan kunt passen?

gestylde spans of divs is misschien wat jammer, deze hebben standaard geen tabstop, of knopachtige outlines zoals de knoppen dat dus wel hebben. Maar als dat de enige mogelijkheid is hou ik het in gedachte. Ik kan niet direct vinden wat de w3c recommendation er over zegt, dus dan zal het wel compleet eigen interpretatie zijn

offtopic:
Wel heb ik in de zoektocht een meta waarde gezien die ik nog niet kende <meta http-equiv="Content-Script-Type" content="text/javascript"> handig om bij onclicks de taal te specificeren

[ Voor 69% gewijzigd door RwD op 20-01-2005 10:36 ]

[crisp]

RwD schreef op donderdag 20 januari 2005 @ 10:26:
Gelukkig zeg je daar nog "althans voor FireFox" dat geeft me hoop voor IE

Is er wel een manier hoe je dit in IE aan kunt passen?

IE genereerd toch al minder ruimte om de tekst heen? Maar om je hoop maar de grond in te drukken: al zou je het willen aanpassen, dan ben je bij IE ook aan het verkeerde adres...

[crisp]

Ik moet beter lezen: je probleem is juist met IE

Ik heb even zitten testen, en inderdaad zijn button (zowel input als button-element) wat dat betreft in Firefox wel beter te stylen. IE loopt gewoon weer eens achter wat dat betreft...

[RwD]

Ik zag trouwens dat de knoppen samen (inclusief de witruimte er tussen) niet zo breed zijn als de beschikbare ruimte (370px, net zo breed als de tabel er boven), door een of ander vaag effect wordt de 3de knop naar beneden gedrukt.

Ik heb als tijdelijke oplossing de button-div een left en right margin van -5px gegeven waardoor in IE de knoppen op 1 regel komen (en in het engels niet breder worden dan de beschikbare ruimte, nu die andere talen nog...) en in FF maakt het uiterlijk geen verschil. Hopelijk gaat er verandering hierin komen in een nieuwe IE versie, want dit is gewoon een stukje design dat je opgdrongen wordt omdat een programmeur dat mooi uit vondt zien ofzo

[ Voor 7% gewijzigd door RwD op 20-01-2005 13:33 ]