text-decoration для текстовых ссылок но не для изображений внутри ссылок

[Mihail_]

Здравствуйте, подскажите пожалуйста, можно ли как-нибудь средствами CSS сделать чтобы подчеркивались текстовые ссылки внутри стиля, а если ссылкой является изображение, то text-decoration:none.

Например:

//надо чтобы подчеркивалось
<a href="http://site.com">site link</a> 

// НЕ надо чтобы подчеркивалось
<a href="http://site.com"><img src="http://site.com/logo.jpg"/></a>

псевдокласс имеет такой вид:

.content b a {
color:#383838;
font-weight:400;
text-decoration:underline;
}

кстати что тут значит буква "b" ?

Заранее спасибо за ваши ответы!

[Veseloff]

a img {text-decoration: none;}

Может, что-то типа такого?

кстати что тут значит буква "b" ?

Это значит, что стиль задаётся тегу a, вложенному в тег b, вложенному в элемент с классом content.

[swetlana]

Veseloff, это подействует на картинку, но не на ссылку, в которую она вложена.

Вообще надо смотреть на конкретный пример.

Может быть уместно для картинки задать float. Например здесь я именно так и делала.

А может и вовсе ничего делать не надо.

Но точно надо сначала посмотреть на страницу или на макет.

[Mihail_]

весь код я не хотел показывать т.к. он мягко говоря не очешь хорошо читается..

сайт - это блог на WordPress, суть в том что есть плагин на основе Lightbox для масштабирования и просмотра изображений без перезагрузки страницы - вот он автоматически подцепляет ссылки на изображения, а ссылки в постах у нас выделяются:

Код того, что на картинке:

<table width="95%" border="0" cellpadding="0" cellspacing="0" align="center">
            <tr>
              <td class="title_txt" height="0"  style="border-bottom: 2px dashed #EAEAEA;" valign="bottom"><span class="post_title"><a href="http://site.com/?p=59" rel="bookmark" title="Постоянная ссылка на это сообщение">
                Lorem ipsum dolor sit amet                </a></span></td>
              <td class="date" valign="middle">
                <span class="day">
                16                </span> <br />
                <span class="month">
                Фев                </span></td>
            </tr>
          </table>

<div class="content_txt"><div>
<p>Lorem ipsum dolor sit <a href="http://site.com">amet</a>, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut <a href="http://site.com">aliquip</a> ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait <a href="http://site.com">nulla facilisi</a>.</p>
<p><a href="http://virtual-lab.ru/wp-content/uploads/wordpress_logo.png"  rel="lightbox[roadtrip]"><img src="http://virtual-lab.ru/wp-content/uploads/wordpress_logo.png" width="200" alt="" alt="" /></a></p>
							<div class="navigation">
			<div class="alignleft"></div>
</div></div></div></div></div>
		<div class="post" id="post-59"><br /><br />
		</div></div>
	</div>
		<div style="clear:both; font-size:1.91em; line-height:1.91em"><br/></div>	
						</div>

.content_txt {
line-height:1.55em;
padding:8px 0px 0px 16px;
background:url(images/title_bgg.jpg) left top no-repeat;
margin-bottom: 15px;
}

.content_txt b a {
color:#383838;
font-weight:400;
text-decoration:underline;
}

.content_txt b a:hover {
color:#000;
font-weight:400;
text-decoration:none;
}

Это уже измененный плагином код, изначально картинка выглядела так

<a href="http://virtual-lab.ru/wp-content/uploads/wordpress_logo.png"><img src="http://virtual-lab.ru/wp-content/uploads/wordpress_logo.png" width="200" alt="" /></a>

--

.content_txt b a img {text-decoration: none;}

не помогло(

Edited February 16, 2011 by Mihail_

[DrHorror]

Слушай, если есть возможность изменять код, то что если сделать так:

1) Ссылку с картинкой поместить в <span class="wow"><a href.....><img ........./></a></span>

2) Указать .wow a {text-decoration: none;}

Либо попробуй еще у картинки поставить border="0"

Что-то из этого должно помочь

[swetlana]

DrHorror, а написать <a href="" class="wow"><img … /></a> религия не позволяет?

[DrHorror]

DrHorror, а написать <a href="" class="wow"><img … /></a> религия не позволяет?

Можно и так, не спорю

[Mihail_]

спасибо за ответы, но что-то опять не получается, изображения остаются подчеркнутыми

добавил в style.css запись .content_img a {text-decoration:none;}

<div class="content_txt"><div>
<p>Lorem ipsum dolor sit amet, <a href="http://site.com">consectetur</a> adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br />
<span id="more-83"></span><br />
<a href="http://virtual-lab.ru/wp-content/uploads/wordpress_logo.png"  class="content_img" rel="lightbox[roadtrip]"><img src="http://virtual-lab.ru/wp-content/uploads/wordpress_logo.png" alt="" /></a></p>
<div class="navigation">
<div class="alignleft"></div>
</div></div></div></div></div>
<div class="post" id="post-83"><br /><br />
</div></div>
</div>

пробовал и в <span class="content_img"> </span> вставлять, эффект тот же..

почему такое может происходить?

--upd

вдумчивый просмотр показал что граница там достигается не за счет text-decoration, а за счет border-bottom: 1px dashed #515151;

извиняюсь за свою невнимательность

Edited February 23, 2011 by Mihail_

[swetlana]

А вам точно нужно вот это:

</div>
</div></div></div></div></div>

В конструкции из одного абзаца и одной картинки?

И, ксати, указать для картинки float — точно не вариант?

[Mihail_]

к сожалению такое количество закрывающих блоки тегов нужно для WP темы..

может быть на примере страницы нагляднее будет:

почему на ссылку (например на последнее слово поста в блоге - laborum) продолжает воздействовать свойство border-bottom, если она относится к стилю content_img в котором ясно прописано:

.content_img{
text-decoration:none;
border-bottom: 0px none black;
}

p.s. float вроде для выравнивания и обтекания текстом нужно? мы пока с border-bottom боремся..

Edited February 24, 2011 by Mihail_

[Dinow]

А если сделать так, то не воздействует:

.content_txt a {
color:#324765;
text-decoration:none;
border-bottom: 1px dashed #515151;
}
a.content_img {
text-decoration:none;
border-bottom: none;
}

[swetlana]

Вообще-то для этой ссылки русским по белому написано:

.content_txt a {
border-bottom: 1px dashed #515151;
}

[Mihail_]

действительно если разместить в style.css

.content_txt a {
color:#324765;
text-decoration:none;
border-bottom: 1px dashed #515151;
}

a.content_img {
text-decoration:none;
border-bottom: none;
}

в строгой последовательности, то все работает как нужно

я не буду одолевать вопросами, почему если внутри блока <div> присутствует <span class="content_img">, то учитывается еще последовтальность объявления стилей в коде.. - сам дурак что не читаю мануалов

большое спасибо за найденное решение!

[Int]

class="title_txt" height="0" style="border-bottom: 2px dashed #EAEAEA;" valign="bottom"

Мне одному это показалось диким?

[swetlana]

почему показалось?

Это и есть дико.