Отображение ссылки-картинки

[seemax]

Подскажите пожалуйста где искать ошибку.

Ссылка должна отображать кнопку-картинку, а:hover должен отображать иную кнопку-картинку.

    <ul id="Nav5">
    <li><a href="home"></a></li>
    <li><a href="solutions"></a></li>
    <li><a href="products"></a></li>
    <li><a href="about"></a></li>
    <li><a href="contacts"></a></li>
    </ul>

 #Nav5 {
	height: 38px;
	width: 495px;
	border: 1px dotted #F00;
	list-style-type: none;
	position: absolute;
	left: 500px;
	top: 50px;
}
#Nav5 li {
	display: inline;
	margin-right: 5px;
	border: 1px solid #000;
}
#Nav5 li a {
	background-image: url(images/m1.gif);
	background-repeat: no-repeat;
	height: 38px;
	width: 99px;
}
#Nav5 li a:visited {
}
#Nav5 li a:hover {
	background-image: url(images/m2-2.gif);
	background-repeat: no-repeat;
	height: 38px;
	width: 99px;
}
#Nav5 li a:active {
}

В результате отображается только рамка Nav5!

Картинки размером 38х99, как задано.

[Veseloff]

А что фаербаг говорит?

[DStereo]

Подскажите пожалуйста где искать ошибку.

Ссылка должна отображать кнопку-картинку, а:hover должен отображать иную кнопку-картинку.

    <ul id="Nav5">
    <li><a href="home"></a></li>
    <li><a href="solutions"></a></li>
    <li><a href="products"></a></li>
    <li><a href="about"></a></li>
    <li><a href="contacts"></a></li>
    </ul>

 #Nav5 {
	height: 38px;
	width: 495px;
	border: 1px dotted #F00;
	list-style-type: none;
	position: absolute;
	left: 500px;
	top: 50px;
}
#Nav5 li {
	display: inline;
	margin-right: 5px;
	border: 1px solid #000;
}
#Nav5 li a {
	background-image: url(images/m1.gif);
	background-repeat: no-repeat;
	height: 38px;
	width: 99px;
}
#Nav5 li a:visited {
}
#Nav5 li a:hover {
	background-image: url(images/m2-2.gif);
	background-repeat: no-repeat;
	height: 38px;
	width: 99px;
}
#Nav5 li a:active {
}

В результате отображается только рамка Nav5!

Картинки размером 38х99, как задано.

Не забывайте, что элементы "a" являются строчными, так что добавить им высоту и ширину просто так не получится. Сначала нужно сделать их блочными.

#Nav5 li a{
...
display:block;
}

Потом, для "li" лучше всего так:

#Nav5 li{
...
float:left
}

а строчку с display:inline вообще удалить.

Ну и чтобы меню не схлопывалось по высоте:

#Nav5{
...
overflow:hidden;
}

Edited January 29, 2012 by DStereo

[seemax]

Firebug 1.9.0

автор Joe Hewitt, Jan Odvarko, robcee, FirebugWorkingGroup

Firebug интегрируется в Firefox для того, чтобы принести изобилие средств разработки на кончики Ваших пальцев, в то время как Вы путешествуете по сети.

Спасибо за подсказки-отзывы.

По фаербаг не успел разобраться с его полезностью. На первый взгляд не очень убедительно.

По float , хотел было без него, а вот не вышло...

[DStereo]

По float , хотел было без него, а вот не вышло...

Тогда используйте display:inline-block.

[Zombak]

Народ прошу помочь очень нужно

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

[seemax]

А что фаербаг говорит?

Спасибо за открытие Фаербаг. Разобрался немного благодаря В.М. http://htmlbook.ru/samlayout/testirovanie-i-otladka-koda/firebug-na-praktike

Но как обычно "Слона то я и не заметил".

Как в Фаербаг проверить валидатором??