Много вопросов

[diaryCSS]

Здравствуйте

У меня много вопросов, от простых к сложным.

1. НЕ АКТУАЛЬНО
Вопрос про кнопку редактирования эпиграфа, сейчас она "спряталась" под фон самого эпиграфа. Как сделать так, что бы она отображалась над ним?
Я пробовала прописывать "z-index: 1 !important;", и даже 1000 выставлять пробовала. но, видимо, не правильно понимаю, как оно работает.

#JournalDraft #epigraph { 
display:none !important; 
}

#draft_title { 
display:none !important; 
}

#JournalDraft .list_box { 
display: none !important; 
}

#Journal #post0 { 
margin: 20px !important; 
padding: 20px 0px !important; 
}

#Journal #epigraph { 
margin: 0px 0px 40px 0px !important; 
padding: 0px !important; 
}

 #epigraph .urlLink { 
display:none !important; 
}

#epigraph .Attention { 
display:none !important; 
}

#epigraph .editPostLink { 
position: absolute; 
}

#epigraph .editPostLink { 
top: 20px !important; 
right: 25px !important; 
z-index: 1 !important; 
}

2. РЕШЕНО
Как сделать запятую между метками в цвет фона?

картинка с вопросом

3. РЕШЕНО
Как сделать, чтобы ссылки .urlLink a, .profile a, .diary a, .umail a a отображались только в виде иконок, без надписей? Сейчас у меня получились иконки с надписями в них (розовый мелкий шрифт внутри елочных шариков)

картинка с вопросом

4. РЕШЕНО
Как сделать, чтобы при наведении на эти иконки для .urlLink a, .profile a, .diary a, .umail a всплывала подсказка с подписью - URL, профиль, дневник, U-mail? Это делается как-то через hover, но я нашла только про подсветку другим цветом при наведении и изменение курсора.

Сейчас код для .urlLink a, .profile a, .diary a, .umail a такой (для вопроса 3 и 4)

.urlLink a, .profile a, .diary a, .umail a {
position: absolute !important; 
bottom: 15 
display: block; 
width: 24px !important; 
height: 30px !important; 
line-height: 50px !important; 
}

.urlLink a {
background: url('/userdir/3/1/9/9/3199937/80147744.png') 0px 0px no-repeat; 
}

.profile a { 
left: 51 
background: url('/userdir/3/1/9/9/3199937/80147746.png') 0px 0px no-repeat; 
}

.diary a {
left: 82 
background: url('/userdir/3/1/9/9/3199937/80147747.png') 0px 0px no-repeat; 
}

.umail a {
left: 113 
background: url('/userdir/3/1/9/9/3199937/80147748.png') 0px 0px no-repeat; 
}

5.РЕШЕНО
Вопрос про вынесенные кнопки. Получается их двигать только вверх-вниз. Вправо-влево двигать выходит, но тогда кнопка "цепляется" не к краю враппера, а к краю экрана, и в другом разрешении или если изменять масштаб отображения, кнопка отделяется и "парит". Left и right привязывают их к краю экрана, а мне нужно, чтобы эти кнопки были привязаны к краю враппера и выглядели примерно таким образом:

картинка с вопросом

Как выглядит сейчас:

картинка с вопросом

Код для этих кнопок:

#tagslistlink { 
position: absolute; 
top: 147 
height: 30 
width: 160 
text-align: center; 
background: #583a31 !important;
padding-top: 5px !important; 
text-transform: lowercase; 
font: bold 17px Tahoma; 
border: 2px solid #ea97a1; 
z-index: 4 !important;
-webkit-border-radius:10px !important; 
-moz-border-radius:10px !important; 
border-radius:10 
}


#tagslistlink a { 
color: #ea97a1 !important;
}

#tagslistlink a { 
color: #ea97a1 !important;
}

#TagsList ul { 
width: 160px !important; 
text-align: left; 
font: normal 13px Tahoma; 
padding: 5px 5px 5px 5px !important; 
margin: 11px 0px 0px -20px !important; 
background: #583a31 !important;
border: 2px solid #ea97a1; 
-webkit-border-radius:10px !important; 
-moz-border-radius:10px !important; 
border-radius:10 
}

#YaSearch { 
position: absolute; 
top: 147 
height: 30 
width: 228 
text-align: center; 
background: #583a31 !important;
padding-top: 5px !important; 
text-transform: lowercase; 
font: bold 17px Tahoma; 
border: 2px solid #ea97a1; 
-webkit-border-radius:10px !important; 
-moz-border-radius:10px !important; 
border-radius:10 
}

Спасибо заранее!