Меню CSS Sprite не будет отображаться в IE8

Question

Компания, в которой я работаю, решила перейти на новое программное обеспечение для электронной коммерции, и я переделываю оригинальный шаблон.Мне удалось закодировать меню CSS Sprite, которое хорошо отображается в FF и Chrome, но даже не отображается в IE. Хотя оно не отображается в IE, оно вызывает проблемы с гигантскими интервалами (в частности,гигантское пространство), где должно быть меню, без изображений.Мне удалось проверить CSS, но HTML-код создается автоматически (спасибо, программное обеспечение для шаблонов!), И я не смог его успешно проверить.

Я признаю, что я не являюсь опытным программистом, но я посмотрел и попробовал решения для различных постов, связанных с этой темой на этом сайте и других, но безуспешно.Очевидно, нам нужен веб-сайт, чтобы хотя бы отображать меню во всех браузерах, поэтому, если вы поможете мне устранить неполадки, я буду очень признателен.

Вот сайт, на который вы можете посмотреть.http://11102611542.3dcart.net/

Вот CSS для меню:

.home{}
.about{}
.industry{}
.catalog{}
.blog{}
.account{}
.contact{}

ul#topMenu{
    list-style:none;
    margin:20px 0 0 0;
    width:980px;
}

ul#topMenu li {display:inline;}

ul#topMenu li a{
    display:block; 
    float:left;
    height:40px;
    background-image:url("/assets/images/menuBar/MenuFull.png");
    font-size:0px;
    /*padding:40px 0 0 0;*/
    /*margin-top:40px;*/
    /*overflow:hidden;*/
    /*text-wrap:none;*/ 
    /*text-indent:-9000px;*/

    }

ul#topMenu li a.home{
    width:109px; background-position:0 0;

    }

ul#topMenu li a.about{
    width:100px; background-position:-109px 0px;
    }

ul#topMenu li a.industry{
    width:213px; background-position:-209px 0px;
    }

ul#topMenu li a.catalog{
    width:130px; background-position:-422px 0px;
    }

ul#topMenu li a.blog{
    width:86px; background-position: -552px 0px;
    }

ul#topMenu li a.account{
    width:170px; background-position: -638px 0px;
    }

ul#topMenu li a.contact{
    width:172px; background-position: -808px 0px;
    }

ul#topMenu li a.home:hover{
    background-position:0 -40px;
    width:109px;
    }

ul#topMenu li a.about:hover{
    width:100px; background-position:-109px -40px;
    }

ul#topMenu li a.industry:hover{
    width:213px; background-position:-209px -40px;
    }

ul#topMenu li a.catalog:hover{
    width:130px; background-position:-422px -40px;
    }

ul#topMenu li a.blog:hover{
    width:86px; background-position: -552px -40px;
    }

ul#topMenu li a.account:hover{
    width:170px; background-position: -638px -40px;
    }

ul#topMenu li a.contact:hover{
    width:172px; background-position: -808px -40px;
}

И HTML:

<ul id="topMenu">
<li><a href="/home.asp" class="home">Home</a></li>
<li><a href="/About-Us_ep_7.html" class="about">About Us</a></li>
<li><a href="/Shop-By-Industry_ep_42.html" class="industry">Industry Guide</a></li>
<li><a href="http://www.fusionclimb.com/flippingBook/fusion%20climb%20product%20catalog/index.html" class="catalog">Catalog</a></li>
<li><a href="/blog.asp" class="blog">Blog</a></li>
<li><a href="/myaccount.asp" class="account">My Account</a></li>
<li><a href="/crm.asp?action=contactus" class="contact">Contact Us</a></li>
</ul>

Answer 1

Я бы начал с нуля, я знаю, это больно, но использование любого шаблона из стороннего программного обеспечения - очень плохой идеал. Они не проверяют его от браузера к браузеру, и программист, который создает это приложение, может быть не так продвинут, как вы. Мое предложение избавиться, если все таблицы. это очень старый стиль программирования. Желаю тебе удачи

Answer 2

Почему вы используете слишком много таблиц для разметки?Добавьте два width="100%" height="100%" для ваших двух sub-table

<table cellspacing="0" cellpadding="0" border="0" width="100%" height="100%">  <-- here
<tr>
<td width="17"><img src="assets/templates/v40010/images/search_L.png" width="17" height="36" alt=""></td>
<td><input type="text" size="25" name="keyword" id="searchlight" class="search-text" onFocus="javascript:if (document.searchForm.keyword.value=='search by keyword') {document.searchForm.keyword.value='';};" onblur="if(this.value.length == 0) this.value = 'search by keyword'" value="search by keyword"></td>
<td><input type="image" src="assets/templates/v40010/images/search_btn.png" name="search" value="GO"></td>
</tr>
</table>
</form>
<!--END: FRAME_SEARCH--></div></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
<tr>
<td>
<table cellspacing="0" border="0" width="100%" height="100%">  <-- here
<tr>
<ul id="topMenu">
<li><a href="/home.asp" class="home" id="topMenu">Home</a></li>
<li><a href="/About-Us_ep_7.html" class="about" id="topMenu">About Us</a></li>
<li><a href="/Shop-By-Industry_ep_42.html" class="industry" id="topMenu">Industry Guide</a></li>
<li><a href="http://www.fusionclimb.com/flippingBook/fusion%20climb%20product%20catalog/index.html" class="catalog" id="topMenu">Catalog</a></li>
<li><a href="/blog.asp" class="blog" id="topMenu">Blog</a></li>
<li><a href="/myaccount.asp" class="account" id="topMenu">My Account</a></li>
<li><a href="/crm.asp?action=contactus" class="contact" id="topMenu">Contact Us</a></li>
</ul>
</tr>
</tr>
</tr>
</table>

ОБНОВЛЕНИЕ:

a скрипка для вас, проверьте хорошо в моем ie8,И код запуска

Answer 3

У вас есть дубликаты id, неправильное вложение, открытые теги и т. Д.

Вам нужно исправить эти серьезные проблемы HTML прежде всего.

http://validator.w3.org/check?uri=http%3A%2F%2F11102611542.3dcart.net%2F&charset=%28detect+automatically%29&doctype=Inline&group=0

Answer 4

Ваш сайт отображается в режиме быстрого поиска в IE, поэтому вы не видите меню.И место там, потому что меню сложено, а не всплыло.Я бы предложил изменить тип документа на строгий, но я вижу, что у вас будут проблемы с ним, поскольку вы используете стороннее шаблонное программное обеспечение.Если вы не можете изменить это вручную, позвоните им и скажите им, в чем проблема.

Надеюсь, это поможет.