Стилизация ссылок

sportmaster

27 августа 2009, 21:53

577

Столкнулся с проблемой: пропадает фон ссылки при наведении на нее курсором.

Это происходит только в том случае, если написать код следующ. образом:background-image:url(images/globe.png) no-repeat right top;

Если же код написан вот так:

background-image:url(images/globe.png);

background-repeat:no-repeat;

background-position:right top;

то все остается на своих местах.

HTML and CSS

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>CosmoFarmer</title>

#main a {

color:#8c1919;

font-weight:bold;

text-decoration:none;

border-bottom:2px dotted #A5E410;

}

#main a:hover {

background:#FCC423;

}

#legal a {

color:#666;

background:url(images/email.gif) no-repeat left center;

padding-left:20px;

margin-left:10px;

}

#main a.external {

background:url(images/globe.png) no-repeat right top;

border-bottom:none;

padding-right:20px;

}

#main a.external:hover {

color:#152D6A;

background-position:right -24px;

}

</style>

</head>

</div>

<h1>Bathtub Hydroponics</h1>

<p>Lorem ipsum dolor sit amet, 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 aliquip ex ea commodo consequat. Duis autem vel eum iriure.</p>

<h2 class="warning">Watch the Water Level</h2>

<h2 class="warning">Rubber Duckies Needn’t Apply</h2>

<h3><strong>Online Resources</strong></h3>

<ul>

<li><a href="http://www.americanstandard-us.com/Products/products.aspx?area=bath&cat=8" class="external">American Standard Bathtubs </a></li>

<li><a href="http://www.clawfootsupply.com/editor/cast-iron-buying-guide.php" class="external">Cast-iron tub buying guide </a></li>

<li><a href="http://www.vintagetub.com/" class="external">Vintage Tubs </a></li>

</ul>

<h2 class="warning">Clean the Overflow Valve </h2>

</div>

</body>

</html>

Кому понадобятся картинки - прикрепил.:beer:

png globe.png

gif email.gif

smart1k

28 августа 2009, 02:36

В Ie7 Opera 9, Firefox 3 картинка меняется и ничего не пропадает, если ты имел ввиду под фоном globe.png.

Не

background-image:url(images/globe.png) no-repeat right top;, а background:url(images/globe.png) no-repeat right top;

Дизайн сайтов (UI/UX), логотипов, баннеров и прочего... (/ru/forum/770062)

Дзен реализовал для авторов возможность вывода денег через СПБ

Как удалить плохие SEO-ссылки и очистить ссылочную массу сайта

Стилизация ссылок