Фон в форме меню/список

[kiz]

Суть проблемы в том, что фон к форме отображается только в осле и мозиле, и как изменить кнопку выбора в форме? Объясните кто знает!!!

код:

<div id="sort">
<select  name="kom" class="sortform" >
<option>По командам</option>
<option>Яндекс</option>
<option>Почта</option>
<option>Рамблер</option>
</select>
<select name="data" class="sortform">
<option value="b" selected>По дате</option>
</select>
<select name="chemp" class="sortform">
<option value="c" selected>По чемпионату</option>
</select>
</div>

CSS:

#sort{    float:left; width:1000px; height:50px; background:#e6e6e6;}
.sortform {
padding: 5px; /* добовляем для отступа текста в нутри формы */
outline:none;
overflow: hidden;
border:none;
background:url("img/fon_sort.png") ;/* фон только ДЛЯ IE и мозила */
width:250px; height:30px;
margin:10px 0 0 18px; }

СКРИН

Edited October 14, 2011 by kiz

[Softlink]

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

[kiz]

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

А поподробней можно пожалуйста !!!!!!!

[Softlink]

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

А поподробней можно пожалуйста !!!!!!!

ссылка на поподробней (!!!!!!!)

[kiz]

Так там нельзя сменить текст в форме, после выбора остается прежний текст!!!

Как исправить ???

Edited October 14, 2011 by kiz

[Softlink]

Так там нельзя сменить текст в форме, после выбора остается прежний текст!!!

Как исправить ???

http://forum.htmlbook.ru/index.php?showtopic=20993

[kiz]

Так там нельзя сменить текст в форме, после выбора остается прежний текст!!!

Как исправить ???

http://forum.htmlbook.ru/index.php?showtopic=20993

СПАСИБО ДРУЖИЩЕ ПОМОГЛО !!!

Следом возникает следующий вопрос: посмотрите на скрин, там увидите что последняя ссылка в меню ставит за собой бордер, который я прописывал для всех ссылок, как растянуть меню во всю ширину блока что бы было все ровно?

код:

<ul id="menu"> 
<li><a class="active" href="#">Главная</a></li>
<li><a href="#">Виды спорта</a></li>
<li class="treg"><a id="current" href="#">Чемпионаты</a>
<ul> 
<li><a href="#">Главная</a></li> 
<li><a href="#">Видеообзоры</a></li> 
<li><a href="#">Телепрограммы</a></li> 
<li><a href="#">Спортивные каналы</a></li> 
<li><a href="#">Программа</a></li>
</ul> </li>
<li class="treg"><a href="#">Трансляции</a> 
<ul> 
<li><a href="#">Главная</a></li> 
<li><a href="#">Видеообзоры</a></li> 
<li><a href="#">Телепрограммы</a></li> 
<li><a href="#">Спортивные каналы</a></li> 
<li><a href="#">Программа</a></li>
</ul> </li> 
<li><a href="#">Видеообзоры</a></li>
<li class="treg"><a href="#">Телепрограммы</a>
<ul> 
<li><a href="#">Главная</a></li> 
<li><a href="#">Видеообзоры</a></li> 
<li><a href="#">Телепрограммы</a></li> 
<li><a href="#">Спортивные каналы</a></li> 
<li><a href="#">Программа</a></li>
</ul> </li>
<li ><a href="#">Спортивные каналы</a></li>
<li class="men"><a href="#">Программа</a></li>
</ul>
<ul id="menu2"> 
<li><a class="active" href="#"> <span class="rus">Россия</span></a></li>
<li><a href="#"><span class="fra">Франция</span></a></li>
<li><a href="#"><span class="ang">Англия</span></a></li>
<li ><a href="#"><span class="ger">Германия</span></a></li>
<li ><a href="#"><span class="isp">Испания</span></a></li>
</ul>

CSS:

/* Главное меню */
#menu { 
width:100%;
height:48px;
list-style: none; 
background: url(img/bg_menu.jpg);
margin:7px  auto ;

} 
#menu li {
float: left; 
padding:0; 
position: relative; 
} 
#menu a {  
border-right: 1px solid  #1a1a1a;
border-left: 1px solid  #3f3f3f;
float: left; 
padding:0 21px 0 22px; 
color: #e9b043; 
font: bold 11px/48px Tahoma, Geneva, sans-serif; 
text-decoration: underline; 
text-shadow: 0 1px 0 #000; 
} 
#menu a:link.active, #menu a:visited.active, #menu a:hover { background:#252525; color:#5f961e;}
#menu li:hover > a  { 
color: #5f961e;
background: transparent;
background-color:#252525;
} 
*html #menu li a:hover /* IE6 */{ 
color: #5f961e;
background: transparent;
background-color:#252525; 
} 
#menu li:hover > ul {  
display: block; 
} 
#menu .nobullet { 
background-image: none; /* Прячем рисунок */
padding-left: 5px; /* Изменяем поле слева */
}
#menu ul a {
background-image: none; /* Для подпунктов рисунок убираем */
height: 1%; /* Для IE7 устанавливаем hasLayout */
   }
/* Подменю */

#menu ul{ 
list-style: none; 
margin: 0; 
padding: 0; 
display: none; 
position: absolute; 
top: 48px; 
left: 0; 
z-index: 99999; 
background: #252525;
background-color: rgba(42,42,42,0.90); /*полупрозрачный фон меню*/
filter:progid:DXImageTransform.Microsoft.gradient (startColorstr=#90252525,endColorstr=#90252525);/*для ие*/
} 
#menu ul li { 
float: none; 
margin: 0; 
padding: 0; 
display: block; 
} 
#menu ul li:last-child {} 
#menu ul a { 
padding:0px 60px 0px 20px; 
height: auto; 
line-height: 2; 
display: block; 
white-space: nowrap; 
float: none; 
text-transform: none; 
} 
*html #menu ul a /* IE6 */{ 
height: 10px; 
width: 150px; 
} 
*:first-child+html #menu ul a /* IE7 */{ 
height: 10px; 
width: 150px; 
}  
#menu .treg  a:hover{
background-image:url(img/treg_act.png);
background-repeat:no-repeat;
background-position: 55% 79% ;}
#menu .treg ul a:hover {  
background-image: none; /* Для подпунктов рисунок убираем */}
#menu ul li:first-child a {} 
#menu ul li:first-child a:after { } 
#menu ul li:first-child a:hover:after { 
border-bottom-color: #04acec; 
} 
#menu ul li:last-child a {} 
#menu:after {} 
* html #menu             { zoom: 1; } /* IE6 */
*:first-child+html #menu { zoom: 1; } /* IE7 */
.treg  { 
background-image: url(img/treg.png);
background-repeat:no-repeat;
background-position: 55% 77% ;
}
/* Главное меню */

[Softlink]

Как вариант - выровнять меню по центру и убрать бордеры у крайних ячеек. Можно размеры прописать ячейкам, можно table-cell использовать, много вариантов. В конце концов табличкой сделать.

[kiz]

Подскажи как через table-cell ???

[Сергей Шолохов]

Предлагаю сделать таблицей, для горизонтальных стилизированных меню это лучший вариант.

Пример базовой конструкции горизонтального меню

[psywalker]

Подскажи как через table-cell ???

А самому вбить в поиск запрос не судьба? http://www.xiper.net/collect/html-and-css-tricks/navigation/rubber-blocks-menu.html

[kiz]

Ребята спасибо за помощь !!!