[CSS] Verschil in weergave browsers

[Bever]

Bij de weergave van een button (type submit) krijg ik bij elke browser een andere weergave. Is er een mogelijkheid om dit gelijk te trekken, aangezien het in alle browsers hetzelfde zou moeten zijn.

De weergaves:


De css code:

Cascading Stylesheet:

.hd_menu ul.nav_extra input.login_button {
    background-image: url(../images/button_bg.gif); /* 1px brede gradient  */
    background-repeat: repeat-x;
    border: 1px solid #FFFFFF;
    line-height: 20px;
    color: #FFFFFF;
    font-size: 10px;
    padding: 0px;
    padding-left: 5px;
    padding-right: 5px;
}

IE7 spant de kroon met een 2 px border ipv 1px.

Heeft iemand tips om dit gelijk te trekken? Om voor elk type browser een andere css te gebruiken lijkt me geen optie.

[steffex]

Het beste wat je kunt doen is een image button maken! Dan kun je gewoon een image aangeven die werkt als submit button.

HTML:

<input type="image" src="login.jpg" />

[Niemand_Anders]

Niet alleen de buttons, maar ook de fonts en hun grootte lijken per browser te verschillen. Wat betreft de image zou ik ook gewoon een image gebruiken.

Ik vermoed dat de default stylesheet(s) van de verschillende browsers je parten spelen.

[Bever]

stef-o schreef op donderdag 07 februari 2008 @ 12:43:
Het beste wat je kunt doen is een image button maken! Dan kun je gewoon een image aangeven die werkt als submit button.

HTML:

<input type="image" src="login.jpg" />

Omdat de site in verschillende talen kan worden weergegeven wil ik liever geen image gebruiken. Maar dat zou idd een oplossing zijn om het op te lossen.

Maar zou er geen andere fatsoenlijke oplossing zijn, want eigenlijk is dat toch niet te doen zo?

[MoietyMe]

Gewoon een vaste hoogte en breedte mee geven?

En anderds gebruik je toch gewoon php om de juiste imga op te roepen

code:

src="login_{$lang}.jpg"

oid.

[Verwijderd]

Je kan ook de achtergrond van de image in 1 stuk maken, dan gaat die ook wel in de verschillende browsers (tot op zekere hoogte) hetzelfde getoond worden. Er gaan echter altijd details verschillen tussen de browsers, heeft te maken met de eigenlijke rendering van alle componenten (die is in principe volledig browserspecifiek).

[Ramon]

Als je vermoedt dat het verschil in basisrendering van de browser ermee te maken heeft, dan kan je deze gebruiken. http://developer.yahoo.com/yui/reset/

Deze laadt je dan als eerste in je pagina. Daarna komt je eigen css eroverheen. Wees voorbereidt, er zal vast wel wat extra misgaan op je site wanneer je die reset.css erover pleurt

[Bever]

Verwijderd schreef op donderdag 07 februari 2008 @ 13:46:
Je kan ook de achtergrond van de image in 1 stuk maken, dan gaat die ook wel in de verschillende browsers (tot op zekere hoogte) hetzelfde getoond worden. Er gaan echter altijd details verschillen tussen de browsers, heeft te maken met de eigenlijke rendering van alle componenten (die is in principe volledig browserspecifiek).

Ja dat had ik eerst, maar probleem daarbij is dat als je een andere taal hebt en het woord is iets langer dan valt ie buiten de button.

Ramon schreef op donderdag 07 februari 2008 @ 13:51:
Als je vermoedt dat het verschil in basisrendering van de browser ermee te maken heeft, dan kan je deze gebruiken. http://developer.yahoo.com/yui/reset/

Deze laadt je dan als eerste in je pagina. Daarna komt je eigen css eroverheen. Wees voorbereidt, er zal vast wel wat extra misgaan op je site wanneer je die reset.css erover pleurt

Zelfs die reset helpt niet, zo blijft in IE7 de border 2px ipv 1px. Erg raar.

Ik heb besloten om het toch maar met images te doen zoals hierboven genoemd met verschillende plaatjes per taal.

[Verwijderd]

Kan die border in IE nog ergens anders vandaan komen? Misschien eens proberen de border op 0px of 2px te zetten en te kijken wat het effect is?

[MoietyMe]

Kun je anders niet het 'sliding doors'-effect gebruiken?

[Arnold]

Try deze is om de 2px border bij IE op te lossen

Cascading Stylesheet:

:focus {
    outline: 0;
}

[Fuzzillogic]

Afbeeldingen gebruiken voor knoppen kan wel, maar houdt rekening met de toegankelijkheid. Maar wat is het probleem nou eigenlijk? Ik zie 4 buttons die alle 4 prima uitzien. Browsers, HTML en CSS zijn helemaal niet gemaakt om allemaal tot op de pixel nauwkeurig te renderen. Ziet er zo prima uit, klaar, be done with it.

[Bever]

Good Fella schreef op donderdag 07 februari 2008 @ 14:55:
Kun je anders niet het 'sliding doors'-effect gebruiken?

Wat houd dat precies in?

GS2K1 schreef op donderdag 07 februari 2008 @ 14:58:
Try deze is om de 2px border bij IE op te lossen

Cascading Stylesheet:

:focus {
    outline: 0;
}

heeft geen effect op de 2px border.

Fuzzillogic schreef op donderdag 07 februari 2008 @ 14:59:
Afbeeldingen gebruiken voor knoppen kan wel, maar houdt rekening met de toegankelijkheid. Maar wat is het probleem nou eigenlijk? Ik zie 4 buttons die alle 4 prima uitzien. Browsers, HTML en CSS zijn helemaal niet gemaakt om allemaal tot op de pixel nauwkeurig te renderen. Ziet er zo prima uit, klaar, be done with it.

Een vormgever zit er niet op te wachten dat z'n buttons er compleet anders uitzien, en ja daarbij hoort helaas ook pixelneuken.
1 pixeltje maak ik me ook niet druk om, maar dit is toch wel wat meer dan dat.


Maar ik heb het ondertussen toch maar dmv images opgelost.

[Fuzzillogic]

Bever schreef op donderdag 07 februari 2008 @ 15:31:
[...]
Een vormgever zit er niet op te wachten dat z'n buttons er compleet anders uitzien, en ja daarbij hoort helaas ook pixelneuken.
1 pixeltje maak ik me ook niet druk om, maar dit is toch wel wat meer dan dat.

Veel vormgevers kunnen best wel eens een cursusje "webpagina's" gebruiken ja Als front-ender kom je nog heel vaak designs tegen die eigenlijk op papier horen, maar die voor webgebruik helemaal niet geschikt zijn.

Je hebt nu dus een image gebruikt, maar als je slim bent heb je die alleen voor de achtergrond gebruikt. Want morgen willen ze zo'n zelfde knop ergens anders ook, maar dan met andere tekst. En overmorgen bedenken ze zich dat "login" eigenlijk "log in" moet worden ofzo. En de dag erna.. enfin je snapt het wel

[Bever]

Fuzzillogic schreef op donderdag 07 februari 2008 @ 15:44:
[...]

Veel vormgevers kunnen best wel eens een cursusje "webpagina's" gebruiken ja Als front-ender kom je nog heel vaak designs tegen die eigenlijk op papier horen, maar die voor webgebruik helemaal niet geschikt zijn.

Ben het helemaal met je eens, maar als de vormgever ook de klant is dan heb je sommige dingen maar te slikken helaas.

Je hebt nu dus een image gebruikt, maar als je slim bent heb je die alleen voor de achtergrond gebruikt. Want morgen willen ze zo'n zelfde knop ergens anders ook, maar dan met andere tekst. En overmorgen bedenken ze zich dat "login" eigenlijk "log in" moet worden ofzo. En de dag erna.. enfin je snapt het wel

Met een plaatje als achtergrond en de tekst gewoon in de value heb je dus het probleem wat in het topic wordt aangegeven.

[Fuzzillogic]

Bever schreef op donderdag 07 februari 2008 @ 16:37:
[...]

Ben het helemaal met je eens, maar als de vormgever ook de klant is dan heb je sommige dingen maar te slikken helaas.


[...]

Met een plaatje als achtergrond en de tekst gewoon in de value heb je dus het probleem wat in het topic wordt aangegeven.

Buttons gebruiken. Veel flexibeler.

HTML:

<button><span>Wis de harde schijf</span><button>

Met CSS verregaand te customizen. De button zelf geef je dan de gewenste achtergrond. Ohja: default type van button is "submit", maar voor antieke browsers (IE) zul je dat toch nog expliciet moeten opgeven.

[ Voor 9% gewijzigd door Fuzzillogic op 07-02-2008 16:45 ]

[Kiphaas7]

Die span is toch niet nodig, of heb ik ergens overheen gelezen?

Fuzzillogic schreef op donderdag 07 februari 2008 @ 16:44:
[...]

Buttons gebruiken. Veel flexibeler.

HTML:

<button><span>Wis de harde schijf</span><button>

Met CSS verregaand te customizen. De button zelf geef je dan de gewenste achtergrond. Ohja: default type van button is "submit", maar voor antieke browsers (IE) zul je dat toch nog expliciet moeten opgeven.

[Bever]

Fuzzillogic schreef op donderdag 07 februari 2008 @ 16:44:
[...]

Buttons gebruiken. Veel flexibeler.

HTML:

<button><span>Wis de harde schijf</span><button>

Met CSS verregaand te customizen. De button zelf geef je dan de gewenste achtergrond. Ohja: default type van button is "submit", maar voor antieke browsers (IE) zul je dat toch nog expliciet moeten opgeven.

mmm met de <button> tag heb ik nooit gewerkt, ik gebruik altijd <input type="submit"...
zal het eens proberen of dat beter gaat... tnx

[Ramon]

Kiphaas7 schreef op donderdag 07 februari 2008 @ 17:11:
Die span is toch niet nodig, of heb ik ergens overheen gelezen?


[...]

span is nodig wanneer je de tekst zou willen replacen voor een plaatje.

[Kiphaas7]

Ramon schreef op donderdag 07 februari 2008 @ 18:15:
[...]

span is nodig wanneer je de tekst zou willen replacen voor een plaatje.

En je kan de button geen achtergrond geven?

Denk dat dit richting de discussie welke-image-replacement-techniek-vind-jij-het-beste gaat. Er zijn er waar je die span niet voor nodig hebt.

[Fuzzillogic]

Ramon schreef op donderdag 07 februari 2008 @ 18:15:
[...]

span is nodig wanneer je de tekst zou willen replacen voor een plaatje.

Zou kunnen, maar daar heb je de background van de button al voor. Die span is vaak gewoon handig, extra element om de tekst binnen de button te positioneren. Of om onzichtbaar te maken ivm toegankelijkheid.

[Ramon]

Met de background van de button kan je de tekst niet onzichtbaar maken, daar heb je dus die span voor nodig, wat ik zei dus.

[MoietyMe]

Bever schreef op donderdag 07 februari 2008 @ 15:31:
[...]

Wat houd dat precies in?

http://www.alistapart.com/articles/slidingdoors2/

Met een beetje knutselen krijg je dat ook wel in je knop. Bijvoorbeeld met die <button><span></span></button> code

[Kiphaas7]

Ramon schreef op donderdag 07 februari 2008 @ 19:31:
Met de background van de button kan je de tekst niet onzichtbaar maken, daar heb je dus die span voor nodig, wat ik zei dus.

En dan kom je weer op het verhaal wat ik vertelde, je hebt die span niet perse nodig:

code:

<h3 id="header">
    Revised Phark Image Replacement
</h3>

/* css */
#header {
    text-indent: -5000px;
    background: url(sample-opaque.gif);
    height: 25px;
    }

http://www.mezzoblue.com/tests/revised-image-replacement/

Of deze methode perfect is, weet ik niet. Waarschijnlijk niet, maar die extra span heb je niet perse nodig, en dat was mijn punt (welke image replacement techniek vind jij het leukste....).

[ Voor 5% gewijzigd door Kiphaas7 op 07-02-2008 21:03 ]