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 а вто в Опере и Мозиле вылазит кусок .

Помогите кто может, уже день над этим бьюсь