Вертикално подравняване на текст?

[gLaVoReZa]

Здравейте,

малко зациклих с един гаден казус, който всъщност може и да няма адекватно решение. Значи имам един бутон, който си има картинка за фон, и има зададен текст(value), обаче проблемът е, че текстът на бутона се подравнява различно във Firefox и другите браузъри.

Прилагам една картинка, на която можете лесно да видите за какво става въпрос.

Пробвах да задам vertical-align и line-height, обаче няма файда, нищо не помръдва.

Това да премахна value на бутона и да направя текста на самата фонова картинка не е решение, защото това е темплейт и трябва да е лесно манипулируем. Ако имате идеи, думайте!

 

[shterev]

с line-height трябва да става, но взе пак едно малко демо няма да е зле

 

[gLaVoReZa]

С line-height не става, защото това важи, ако имаш няколко реда текст, а атрибутът value на бутоните представлява само един ред текст. Какъвто и line-height да задавам, бутонът не реагира под нито един браузър.

Ето кода:

<form action="" method="post"><p><input type="button" id="HeaderButton" class="HeaderButton" value="Preview" title="Preview this style." /></p></form>

[css].HeaderButton {
margin : 15px auto 0 auto;
width : 139px;
height : 39px;
color : White;
font-family : Verdana;
font-size : 16px;
background-color : Transparent;
background-image : url("./DefaultSprite.png");
background-position : -497px -32px;
cursor : pointer;
}

.HeaderButton:hover {
background-position : -358px -32px;
}[/css]

 

[Vladkata]

А ако не е с <input>? Просто един <div>:

<div class="button">Preview</div>

[css]
.button{
background-image: url(фона);
width: ширина;
height: височина;
padding-top: 5px; /* и така би трябвало да стане еднакво */
}
[/css]

 

[shterev]

Не знам каква ти е идеята, но тая html структура с тези бутони не е добра практика. Пробвай да зададеш margin:0; padding:0 0 3px 0; Да видиш как ще реагира и ако ти е добре си го намести

 

[gLaVoReZa]

@Vladkata, това ми мина през акъла, но някак си не ми се ще да използвам div за бутон.

@shterev, кое по-точно не е добре на структурата? Това е съобразено с XHTML Strict стандарта. Ако имаш предвид това, че бутонът няма зададено никакво събитие, аз съм му присвоил onclick, чрез JavaScript. Просто ми трябва един бутон, без полета и т.н.

Това за padding-а отдолу действително намества текста под Firefox, но пък го вдига с 3px под другите браузъри и така се оправя под Firefox, но се прецаква под всичко друго. Единственият вариант май е да изкопая някакъв CSS хак за Лисицата, ама тъпото е, че то под различните версии намества текста различно, както се вижда на картинката от първия ми пост. Това означава, че трябва да търся хакове за различните версии и да им задавам различни работи, което не ми се струва особено надеждно.

 

[shterev]

Казах ,че не е добра практика, не съм казвал нищо за стандартите.Много по добър вариянт е да си направиш едни линкове <а> да кажеш с js да не правят нищо и вече там каквото ти правят , предполагам са табчета. А другия вариянт е да ги направиш картинки .

 

[gLaVoReZa]

Да, май ще го направя с връзка, ако това позволи да изглежда еднакво под всички браузъри. Това е добър вариант.

 

[shterev]

а и е добре за google, все пак е мн по добре това: <A href="ne6to si"> от колкото бутон

 

[hpstuff]

Много е прав @shterev ползвай бутони само и единствено за събмитване на форми. А за проблема ти има не съответствие в разположението на текста и не може да бъде уеднаквено без хакове, също така line-height има за текст на един ред просто при бутоните е по различно (с padding трябва да местиш текста).