обработка CSS и изображений в ASP.NET MVC

Question

Привет, я разрабатываю простое приложение на основе ASP.NET MVC. Я изменил default.css по умолчанию, чтобы у меня были свои собственные стили. Теперь единственная проблема заключается в том, что я добавляю свойство background-image к одному из моих UL-> Li-> A для создания меню. В Firefox он работает нормально, но изображения не отображаются в Internet Explorer (IE7 / 8). Кто-нибудь знает, что происходит?

мой CSS следующий;

     #nav-menu ul
{
    list-style: none;
    padding: 0;
    margin: 0;
    color:White;
}
#nav-menu li
{
    /*float: left;*/
    margin: 0.15em 0.15em;
    display:block;

}

#nav-menu li a
{
    background-image: url('/Images/leftbarlightblue.jpg');
    background-repeat:no-repeat;
    background-position:bottom;

    height: 2em;
    line-height: 2em;   
    width: 12em;
    display: block;
    text-decoration: none;
    text-align: center;
    color: white;
}

#nav-menu li a:hover
{
    background-image: url('./Images/leftbardarkblue.jpg');
    background-repeat:no-repeat;
    background-position:bottom;

    height: 2em;
    line-height: 2em;

    width: 12em;
    display: block;

    color: white;
    text-decoration: none;
    text-align: center;
}
#nav-menu
{
    width:15em
} 

, в то время как XHTML равен

<div id="menucontainer">
            <div id="nav-menu">
                <ul>
                    <li><%= Html.ActionLink("Home", "Index", "Home")%></li>
                    <li><%= Html.ActionLink("About Us", "About", "Home")%></li>                
                </ul>
            </div>

    </div>

1. Да, я пытался с ./Images / ... но это все еще не работает.

2. Ниже приведена моя иерархия папок.

   Solution -> Content
                  Site.css
                  Images
                         logo.jpg
                         leftbarlightblue.jpg
          ->Controllers
          -> Models
          ->Views
                Home
                Shared
                        Site.Master
   

Answer 1

ваша таблица стилей должна использовать буквальный путь следующим образом:

background-image: url('/Content/Images/leftbarlightblue.jpg');

а не

background-image: url('/Images/leftbarlightblue.jpg');

Answer 2

Если вы много работаете с CSS, я действительно рекомендую приобрести FireFox и FireBug, это позволит вам на лету просматривать таблицы стилей и точно понимать, почему некоторые вещи не работают.

Затем вы дважды проверили правильность URL-адреса изображения? Быстрый способ проверки состоит в том, чтобы получить абсолютный URL (перейдите к нему в браузере, чтобы убедиться, что он должен быть похож на http://myapp/content/images/leftbarlightblue.jpg) и поместите его в свой код вместо старого URL-адреса изображения. Если он загружается тогда, вероятно, ваши относительные пути неверны (часть ../), потому что я не знаю структуру вашей папки, я не могу помочь вам с тем, что должно быть.

На отдельной ноте background-position должна иметь горизонтальную позицию, за которой следует вертикальная позиция.

background-position: left bottom;

Answer 3

Я полагаю, что отображение зависит от URL.

Где находится ваш master.css?

Вы пробовали url('Images/leftbarlightblue.jpg') вместо?

Answer 4

У меня есть проблема, изображения были созданы с использованием CMYK. Таким образом, FF показывал их, используя приблизительные цвета, в то время как Internet Explorer полностью игнорировал их. Изменение формата решит проблему. Спасибо за вашу помощь, ребята.

Answer 5

Попробуйте запустить пути к изображениям без лишних точек и косых черт. Например:

/images/image.jpg

Вместо

../../images/image.jpg

Я до сих пор не уверен, как файлы хранятся на вашем реальном веб-сервере, поэтому вам может понадобиться добавить один или два каталога, но обычно не стоит использовать точки, чтобы сообщить серверу, сколько уровней нужно перейти в каталог. дерево (плюс многие люди забывают, что вам нужно указать, где находится изображение, как видно из местоположения файла CSS, не обязательно местоположения файла HTML / ASP)

Answer 6

Добавьте XHTML для # nav-меню, также если у вас есть живая ссылка на этот проблемный пост, который также