#button {
padding: 0px;
margin-left: 0px;
width: 320px;
height: 184px;
TEXT-DECORATION: none;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
#button ul {
list-style-type: none;
width: 320px;
height: 184px;
margin: 0 0 0 0;
}
#button li a {
display: block;
TEXT-DECORATION: none;
margin-left: 0px;
padding: 150 0 0 100;
height: 184px;
background: url(Pdvd_0.jpg) no-repeat top left;
}
html>body #button li a {
TEXT-DECORATION: none;
margin-left: 0px;
height: 184px;
width: 320px;
}
#button li a:hover {
height: 184px;
padding: 150 0 0 100;
background: url(Pdvd_0.jpg) no-repeat bottom left;
color: #fff;
}
хитрые CSS в кроссбразерности
Код:
так это выглядит в теле страницы
Код:
<DIV id="button">
<UL>
<LI><a href="http://www.google.ru><Font Face="Arial Black" Size="+1"><I>где угодно!</I></Font></a></LI>
</UL>
</DIV>
<UL>
<LI><a href="http://www.google.ru><Font Face="Arial Black" Size="+1"><I>где угодно!</I></Font></a></LI>
</UL>
</DIV>
В Опере и Ишаке все просматривается нормально, но в Мозиле и ГуглХром перед картинкой появляетя дурацкий отступ, который портит всю разметку.
Подскажите как оптимизировать.
Мать родная, а что, "font" опять в почете?
эта страница на народе, очень быстро клепаю, без заморочек о стиле.
Пишите нормально без fontов, а там уже и будет видно, почему не работает.
страндартный алгоритм для "кнопки" средствами css, только использован не как кнопка, а как элемент оформления текста.
я хотел узнать, может кто сталкивался с подобным. Ведь фактически границы элементов UL и LI прописаны в css, но хром и мазила сдвигают отображение поля LI вправо. Почему они это делают и как это можно исправить? все.
Установка "padding-left" в 0 у "UL" решит вопрос.
теперь буду следить за padding значениями )