Проблема с отображением PNG в IE

[monkeymafia]

Здравствуйте !

Для моего проэкта мне необходимо горизонтальное меню, чтоб при наведении на нее курсора, элемент меню подсвечивался, текст не изменялся в цвете, изменялась стрелочка-индекатор, которая указывает на то что это выпадающее меню. Вот фрагмент ,того как это выглядит у меня в Opera :

Собственно на браузере Opera задача выполнена так, как надо! А на IE тот же фрагмент меню выглядит вот так :

Заметьте, что по краям моих png'шек в IE обрисовалась странная рамка. Вот собственно вопрос, как от нее избавиться?

CSS

  

#nav li.hover img {background-image:url(img/active.png); border:none;}


.bullet {
	background-image:url(img/inactive.png); 
	border:none;
	width:10px;
	height:7px;
}

HTML

 <li><a href='#'>О Нас <img class="bullet"></a>

PS: <li> является элементов главного меню, не закрыл тэг, потому что дальше идет код связанный с подменю!

[psywalker]

а рисунок стрелки сделан спрайтом?

покажи страницу с траблом

[monkeymafia]

Рисунок стрелки - обычный PNG рисунок,размеры 10x7 с прозрачностью 32%. inactive.png! Есть второй рисунок - те же параметры - называеться active.png. Итого имею 2 файла. При наведении на Пункт меню рисунок с inactive меняется на active. Реализовано следующим образом - в Html вставлен <img id="bullet"> , а в css я уже в зависимости от обычного положения курсора или hover меняю background-image картинки.

Показать страницу с траблом? Ты имеешь ввиду выложить скриншот рабочего стола или код страницы и стиля целиком?

[psywalker]

Рисунок стрелки - обычный PNG рисунок,размеры 10x7 с прозрачностью 32%. inactive.png! Есть второй рисунок - те же параметры - называеться active.png. Итого имею 2 файла. При наведении на Пункт меню рисунок с inactive меняется на active. Реализовано следующим образом - в Html вставлен <img id="bullet"> , а в css я уже в зависимости от обычного положения курсора или hover меняю background-image картинки.

Показать страницу с траблом? Ты имеешь ввиду выложить скриншот рабочего стола или код страницы и стиля целиком?

Зачем ты вооще используешь вот эту непонятку <img id="bullet">, вообще что это?

Меняй фон у ссылки обычным способом

[-O-J-A-]

border 0px

[monkeymafia]

Зачем ты вооще используешь вот эту непонятку <img id="bullet">, вообще что это?

Меняй фон у ссылки обычным способом

В меню 6 пунктов, 3 из них с выпадающим меню. Следовательно эти самые Png-Bullets должны находится только на 3ех. Если я буду менять фон обычным способом, то он будет распространятся на все пункты меню. А мне не нужны стрелки на трех лишних пунктах меню.

+ ко всему когда я вставляю картинку стрелки в кнопку , то автоматически текст с кнопкой центруются, а если ставлю как бэкграунд : во первых рисунок кнопки фиксируется в определенном положении,во вторых надо сдвигать текст вручную немного левее,чтоб выглядело будто отцентровано.

Вот CSS код всего меню:

 
  #nav { display: block;  padding: 0; position:relative; }
  #nav li { display: block; list-style: none; margin: 0; padding: 0; float: left; position: relative; width: 140px; }
  #nav a { display: block; }
  #nav ul { display: none; position: absolute; left: 0; margin: 0; padding: 0;}
  * html #nav ul { line-height: 0; } /* IE6 "fix" */
	  #nav ul a { zoom: 1; } /* IE6/7 fix */
	#nav ul li { float: none; padding:0;}
	#nav ul ul { top: 0; }


#nav ul { width: 140px; position:absolute}
#nav ul ul { left: 140px; }


#nav { background-color: none; height: 33px;}
#nav *:hover { background-color: none; }
#nav a { color: white; font-size: 12px; text-align:center; padding: 10px; line-height: 1; 
		text-decoration: none; 
		font-weight:bold; font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; background:url(img/button1.png)}
  #nav li.hover a { background-color: none; }
  #nav a.hover {background:url(img/button_bg1.png);  /* Цвет фона под ссылкой */}
  #nav ul { top: 33px;}
  #nav ul li a { background-color: none; font-size: 10px; text-align:center; color:#999; border-bottom: 1px dashed #CCC; 
	 padding-top:4px; padding-bottom:4px; }
   #nav ul a.hover { background-color: none; color:#000; }
   #nav ul a { border-right: none; opacity: 1.0; filter: alpha(opacity=100); background: none;}
   #nav li.hover img {background-image:url(img/active.png); border:none;}

Просто по большей части мне необходимо узнать, что за странная рамка вокруг рисунка образовалась! Как бы у меня вся страница напичкана png'шками и везде оно выглядит нормально. Другое дело, что везде я вставляю картинки <img src...> а здесь из css через background-image.

Тоесть вопросы следующие :

1.Как избавиться от рамки вокруг png в IE ?

2.Возможно ли получить доступ к src тэга img из css, и если да, то как?

чтобы можно было задать что то вроде

#picture {src:"такой то"}

#picture :hover{src:"другой то"}

3.Возможно ли изменить фон выбранной кнопки меню,и если да, то как?

Ответ на один из этих вопросов решит мою проблему.

PS: Вопрос решен (раком конечно же). Создал прозрачную png картинку размером 10x7 и вставил ее в <img src="img/blank_bullet"> . остальное осталось по прежнему. Теперь сквозь эту прозрачную картинку в IE все отображается также как и в Opere. Но я был бы не против узнать ответы на заданные мною вопросы! Заранее спасибо

Edited March 13, 2010 by monkeymafia

[slicemasta]

1 - похоже что вы используете пнг фикс для ие6, у которого пустая картинка обычно blank.gif не найдена, задайте ее верное местонахождение в скрипте.

2 - тут не понял немного, задать разные изхображения для элемента #picture в качестве фона и для #picture при наведении естественно можно, если этот элемент изображение IMG то нет (img#picture).