FF & CSS. Глюк или я не догоняю?

Salex · №1

Например:
Разметка HTML:

Код:

<A HREF="services.html"><SPAN CLASS=MNU1UP onMOUSEOVER="SC('MNU1DN',this)" 
onMOUSEOUT="SC('MNU1UP',this)"><IMG SRC="img/iserv.gif" CLASS=ICO> Страница 
1</SPAN></A><br>

Стили:

Выделить код

Код:

IMG.ICO {WIDTH: 16;HEIGHT: 16;float:left}
.MNU1UP {BORDER: #A00000 1PX ;CURSOR: HAND; HEIGHT: 20; PADDING: 1;  WIDTH: 100%;
 TEXT-ALIGN: CENTER;COLOR: #006600; FONT: 13,5 Arial; FONT-WEIGHT: BOLD}
.MNU1DN {BORDER: 1px solid #A00000;CURSOR: HAND;HEIGHT: 20px;WIDTH: 100%;	
TEXT-ALIGN: CENTER;COLOR: #000099;	TEXT-DECORATION: NONE;	FONT: 13,5 Arial;	
FONT-WEIGHT: BOLD;	BACKGROUND: #F5FBFF;}

Т.е. смысл такой: при наведении мыши на вышеобъявленный <span> выделяется рамочкой с подсветкой.
Результат:
В IE и Опере в рамочке весь <span> , т.е и картинка и текст ("Страница 1").
В FF Рамочка рисуется только вокруг текста ("Страница 1"). Картинка же как бы и не
приделах.

Если же в стиле картинки убрать обтекание

Выделить код

Код:

IMG.ICO {WIDTH: 16;HEIGHT: 16;}

То все работает как хотелось (и текст и картинка выделяются рамкой).
Кто тупит? Если я, то где крутнуть?

Lynn · №2

Кто тупит?

1. В CSS у всех размеров, кроме нулевых, надо обязательно указывать единицу измерения.
2. Приведите код в порядок.

То все работает как хотелось (и текст и картинка выделяются рамкой).

Ну так и в чём проблема?

Salex · №3

1. Так вроде везде где надо размеры стоят. Конкретно для рамки стоит

Выделить код

Код:

HEIGHT: 20px;WIDTH: 100%;

2. Где код не в порядке? Ткните носом.

Появляется другая проблема При наличии обтекания картинка в пределах <span> прижимается влево, а в оставшемся пространстве текст центрируется (TEXT-ALIGN: CENTER). Без обтекания картинка слипается с текстом и центрируется на всем пространстве <span> Получается некрасиво....

Lynn · №4

1.

Выделить код

Код:

WIDTH: 16;HEIGHT: 16
HEIGHT: 20; PADDING: 1;

и т.д.

2. Отформатируйте код так, что б его удобно было читать.

Snik · №5

Замени span на div и будет тебе щастье. Или допиши display: block. А вообще я не понял, к чему так извращаться? Не проще ли так:
a.megalink {border: none; display: block; ...}
a.megalink:hover {border: solid 1px gray; ...}
a.megalink img {float: left; ...}
<a href="services.html" class="megalink"><img src="img/iserv.gif">Страница 1</a>
Кстати, об ошибках: помимо неправильно заданной рамки для UP и недействительных значений почти всех размеров, в.т.ч. для шрифтов - вдвойне(!!!), вместо cursor: hand следует писать cursor: pointer;

2. Отформатируйте код так, что б его удобно было читать.

Присоединяюсь. Иначе трудно что-то вообще понять.

Отредактировано Snik (20-05-2005 12:33:57)

Sergeys · №6

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

Salex · №7

Всем спасибо!
Отдельный респект Snik'у

to Sergeys: Над этим работаю тоже. Старый сайт. Разработка не моя.Потихоньку пытаюсь переделывать, а по большей части разбираюсь почему не работает то ли иное не в IE. Цель преобразований- приведение к стандартам и максимально идентичный вид в различных браузерах.

Отредактировано Salex (20-05-2005 15:16:42)

Полезная информация

№119-05-2005 14:13:15