anpolimus
-
Posts
6 -
Joined
-
Last visited
Content Type
Profiles
Forums
Calendar
Store
Posts posted by anpolimus
-
-
http://jsfiddle.net/Gxzbg/7/ залил на jsfiddle.
Немного громоздкая структура html по причине того, что средняя часть должна быть резиновой (если идут вложенные комментарии)
-
Здравствуйте все!
В процессе доводки сайта под ИЕ 7 увидел провтык в оформлении комментариев:
Вот как комментарии отображаются в нормальных браузерах:
И как отображается в ИЕ 7:
Насколько я понимаю эксплорер тупит на свойстве background-position.
HTML код фрагмента:
<table class="com_top">
<tr>
<td class="com_avatar">
<div class="user-picture">
<a href="/users/adm1n" title="Информация о пользователе."><img typeof="foaf:Image" src="/sites/default/avatar.png" alt="Аватар пользователя adm1n" title="Аватар пользователя adm1n" /></a> </div>
</td>
<td class="round_cont"><div class="coml"></div></td>
<td class="comc">
<div class="author">
<span rel="sioc:has_creator"><a href="/users/adm1n" title="Информация о пользователе." class="username" xml:lang="" about="/users/adm1n" typeof="sioc:UserAccount" property="foaf:name">adm1n</a></span> </div>
<div class="submitted">
<span property="dc:date dc:created" content="2013-01-30T14:11:54+03:00" datatype="xsd:dateTime" rel="sioc:has_creator">30.01.13 14:11</span> </div>
<div class="comment_links">
<ul class="links inline"><li class="comment-delete first"><a href="/comment/4/delete">удалить</a></li>
<li class="comment-edit"><a href="/comment/4/edit">изменить</a></li>
<li class="comment-reply last"><a href="/comment/reply/53/4">ответить</a></li>
</ul> </div>
</td>
<td class="round_cont"><div class="comr"></div></td>
</tr>
</table>СSS для данного блока:
.comment .com_top td {padding:0px;height:50px;margin:0px;vertical-align:top;}
.comment .com_top .round_cont {width:5px;}
.comment .com_top .com_avatar {padding-right:10px;width:50px;height:50px;overflow:hidden;}
.comment .com_top .com_avatar .user_picture {display:inline;height:50px;overflow:hidden;line-height:10px;}
.comment .com_top .com_avatar .user-picture a {width:50px;height:50px;display:inline;zoom:1;overflow:hidden;}
.comment .com_top .coml,.comment .com_top .comc,.comment .com_top .comr {height:50px;background:url(/themes/vkk/com_title.png);}
.comment .com_top .comc {position:relative;background-position:0px -100px;}
.comment .com_top .coml {width:5px;background-position:0px 0px;font-size:1px;background-repeat:no-repeat;}
.comment .com_top .comr {width:5px;background-position:0px -50px;font-size:1px;background-repeat: no-repeat;}
.comment .com_top .author {width:100%;font-size:14px;color:#880707;margin-top:8px;margin-bottom:5px;padding-left:5px;height:15px;overflow:hidden;}
.comment .com_top .author a {color:#880707;font-size:14px;}
.comment .com_top .submitted {position:absolute;top:12px;right:2px;height:15px;line-height:14px;font-size:10px;color:#686666;width:50px;text-align:center;display:block;}
.comment .com_top .comment_links {width:100%;margin:0px;}
.comment .com_top .comment_links .links {width:100%;font-size:12px;text-align:left;margin:0px;}
.comment .com_top .comment_links .links ul li {padding:0px;padding-right:5px;}
.comment .submitted a,.comment .links a {color:#686666;text-decoration:none;}
.comment .submitted a:hover,.comment .links a:hover {color:#880707;text-decoration:underline;}
.comment .content,.comment .content p{font-size:12px;margin:5px auto;}Я использую для данной рамки "данных комментатора" спрайт - картинку а нужный фрагмент вырезаю backrgound-position.
Может кто-то помочь в данной ситуации?
Хотябы показать, в какую сторону рыть.
-
Titan спасибо, скорее всего 2-й вариант самый нормальный
-
высота рисунка меньше чем ширина поля.
Я не могу уменьшить высоту соседней ячейки до высоты рисунка. Уменьшение шрифта ничего не дало
-
верстаю сайт www.mediascan.ru
В меню в заголовке меню почему-то появляются лишние пиксели
вот как оформлен заголовок меню:
<table cellspacing=0 cellpadding=0 border=0 width="100%" >
<tr>
<td width="20px"><img src="./images/menu_top_left.png"></td><td height="20px" class="menu_top" valign=middle ><p class="menu_head">Последние выпуски</p></td><td width="20px"><img src="./images/menu_top_right.png" ></td>
</tr>
<tr>а так прописано в css:
td.menu_top
{
background-color:#bbe7a4;
text-align:center;
vertical-align:middle;
color:#476126;
font-weight:bold;
height:20px;
padding-top:0px;
padding-bottom:0px;
}
input
{
border:1px solid #476126;
}
p.menu_head
{
font-size:11px;
margin-top:0px;
margin-bottom:0px;
padding-top:0px;
padding-bottom:0px;
text-align:left;
}Таковой проблемі нету только IE а вто в Опере и Мозиле вылазит кусок .
Помогите кто может, уже день над этим бьюсь
IE7 не правильно отображается фон блоков
in HTML Coding
Posted
Там не уголок а срез.
Вот уже думаю чтобы для ИЕ просто сделать серый фон без прибамбасов.