[Chidori]

Hej!
Ok så här brukar jag göra....
Skapa en div med bakgrund som ser ut som en knapp.
Sätta in en input submit i diven med text vad knappen ska göra, t.ex. "stäng". KNappen har samma storlek som diven.

När jag kör igång den i IE7 så placerar sig texten perfekt i mitten men problemet är faktiskt i FF så texten hamnar just lite för långt så det skapar ett dåligt intryck. Exemplet nedanför har en "skugga", därför är diven lite högra än knappen.

#tableContent table#thbg #registerBtn {
background:url(../images/checkout.jpg) no-repeat;
height:49px;
width:117px;
margin:14px auto 0;
}

#tableContent table#thbg #registerBtn input {
height:26px;
width:116px;
font-weight:700;
font-size:14px;
color:#FFF;
text-align:center;
padding-right:17px;
}

Hur kan jag få texten i mitten som på IE7? (skumt att FF inte funka men IE)
Btw, nu märker jag att texten lägger sig olika i sidled också :/

[KarlRoos]

Med hjälp av line-height kan du fixa detta, hur ser markupen ut?

Något i stil med...

#minKnapp
{padding-bottom: 38px; background: url(../images/checkout.jpg) no-repeat;}

#minKnapp button
{height: 26px; line-height: 26px; width: 116px; border: 0px; padding: 0px; margin: 0px; font-size: 14px; color: #fff;}

med en markup som ser ut såhär:

<div id="minKnapp">
<button type="submit">Register</button>
</div>

OBS: otestat!

[Chidori]

<div id="registerBtn">
<input type="submit" name="button2" id="button2" value=" Register" />
</div>

line-height ändrade inget oavsett värde.

padding-bottom fixar det i FF men då är den för högt upp i IE7

När jag testar detta i IE version <=7 så uppkommer detta bra bugg. I IE8 och FF så måste man padda upp den för att få texten som den ska vara. Hur kan man få texten att vara på samma ställe i alla versioner? vad jag vet så stödjer IE7 !important så det hacket går inte att använda.

[KarlRoos]

Det har att göra med att IE inte flyttar texten till dess givna position förens knappen är nedtryckt.

Jag gjorde: http://karlroos.se/tmp/Button/

Har testat på Safari i Mac och IE 7 på Windows och det fungerar bra. Dock med IE hack men funkar.

[greenio.se]

Just formulärelement är det större skillnader på mellan olika webbläsare i allmänhet. Jag hade satt text-indent: -10000px; på inputen och haft register texten i själva diven, där line-height funkar utmärkt för vertikal centrering cross browser.

[Chidori]

Originally posted by KarlRoos@May 29 2009, 22:03
Det har att göra med att IE inte flyttar texten till dess givna position förens knappen är nedtryckt.

Jag gjorde: http://karlroos.se/tmp/Button/

Har testat på Safari i Mac och IE 7 på Windows och det fungerar bra. Dock med IE hack men funkar.

Kan du förklara vad du gjorde för att få det att funka?

[KarlRoos]

Ursprungligen postat av Chidori

Kan du förklara vad du gjorde för att få det att funka?

<!--[if IE]>
	<link rel="stylesheet" type="text/css" href="fix.css" />
<![endif]-->

Den ger knappen en 1px padding-top i Internet Explorer
Kul att kunna hjälpa till!

[Hjalmarsson]

Originally posted by Chidori@May 29 2009, 21:40

div id=registerBtn
input type=submit name=button2 id=button2 value= Register /
/div

line-height ändrade inget oavsett värde.
padding-bottom fixar det i FF men då är den för högt upp i IE7
När jag testar detta i IE version =7 så uppkommer detta bra bugg. I IE8 och FF så måste man padda upp den för att få texten som den ska vara. Hur kan man få texten att vara på samma ställe i alla versioner? vad jag vet så stödjer IE7 important så det hacket går inte att använda.

Fel! IE6 stödjer !important också.. bara det att IE6 ignorerar den första deklarationen om den har samma efter till skillnad mot vad "modernare" webbläsare gör.

Lite mer än så är det också, det handlar också om specificity'n, dvs något som har !important "på" sig har också högre specificity och har också högre prioritet än inline styles. kan vara nödvändigt i vissa javascript fall och modifiering av DOM'n.

Men finns fler sätt att komma åt IE7 utan att dra en conditional comment