4 вопроса по css

[_axl]

Здравствуйте, подскажите пожайлуста по трем вопросам:

1. Есть вот такой код:

<table>
		<tr>
			  <td style="" valign="bottom"><a href="index.php?register=yes" class="reg">Зарегестрироваться</a></td>
			  <td><input value="Войти" type="submit" /></td>
	   </tr>
</table>

Как все это сделать не таблицей, а блоком? Причем, естественно, нужно, чтобы надпись и кнопка находились на одном уровне. Это я к тому, что просто рядом можно разместить и так:

<a href="index.php?register=yes" class="reg">Зарегестрироваться</a><input value="Войти" type="submit" />

но в Опере и ФФ надпись подымается к верху, а в ИЕ6 норм.

2. По оформлению кнопки:

<input style="background-color: #DD0000; vertical-align: middle; border: 0; color: #FFFFFF; font-size: 12px; width: 66px; height: 21px; line-height: 21px; margin-top: 12px; " value="Войти" type="submit" />

здесь тоже проблема кроссбраузерности, в разных браузерах надпись отбражется на разном уровне в кнопке, в идеале хотелось бы разместить ее по строго центру. еще наблюдается, что надпись немного различается по высоте в разных браузерах, можно с этим что-то сделать?

3. Как через css формление оформление для input ов, различая их по типам, вот это:

input[type=text] {border: 1px solid #A9C0CE;}
input[type=submit], input[type=button]{background-color: #DD0000; border: 0; color: #FFFFFF; vertical-align: middle; }

не работает в IE6 (

4. Более общий вопрос по CSS. Как в нем определить новый класс, как копию уже существующего класса, т.е. к примеру у меня на странице есть много ссылок различающихся по цвету, но у всех одинаковая высота и поведение при наведении:

.links{ text-decoration: none; font-size: 12px; }
.links:hover{ text-decoration: underline; }

так вот, каждый раз определяя новый класс для ссылки приходиться прописывать и эти общие для всех свойства, а можно сделать какое-то наследование, типа .navigate extends .links , и navigate потом имел все свойства класса links, нужные из которых я пререопределю?

Спасибо!

Edited September 25, 2008 by _axl

[Argus]

1. Попробуй на input добавить style="vertical-align:middle;"

Вот только не понятно, почему ты говоришь, что надпись "подымается к верху". У меня она наоборот по низу кнопки по умолчанию идет.

2. Там ещё и грифт различается. Надо конкретно font-family:Arial; хотя бы указать. FF понимает только прямое указание для кнопки и не наследует этот параметр от родителей.

А для высоты советую использовать padding (тут примерно padding:2px 0 3px;). Он лучше понимается, чем line-height

3. Да, в IE6 нет возможности обращаться к элементам в сообветствии с установленными им аттрибутами. Вешайте классы.

4. Вопрос не очень понятен...

А вас не устраивает прописать свойство

a {...}

a:hover {...}

А потом уже при необходимости навешивать на отличающиеся от стандартных ссылки классы?

Если нет, то сведите все общие стили в какой-то один класс, а потом просто навешивайте на ссылки по 2 и более классов:

<a href="#" class="link navig"> </a>

[ivan]

Можешь попробовать свойство float.

к примеру,

<div style="float : left; vertical-align : middle;"><a href="index.php?register=yes" class="reg">Зарегестрироваться</a></div>

<div style="vertical-align : middle;"><input value="Войти" type="submit" /></div>

Этот параметр означает, что элемент будет выравниваться по left, а с других сторон он будет обтекаться другими элементами.

А вообще ты очень много информации найдешь в разделе "css по шагам" и в разделе "рецепты"

[Vlad]

По п. 3. В IE это не работало, не работает и... возможно будет работать в IE8. Но это под вопросом.

Про выравнивание. vertical-align: middle в браузерах работает несколько по разному и к тому же выравнивает не всегда по центру. Поэтому добавляешь position: relative; top: 2px и регулируешь с помощью значения top положение уже более точно.