Проблемы с CSS Rollovers в Internet Explorer - PullRequest
Новая
       7

Проблемы с CSS Rollovers в Internet Explorer

0 голосов
/ 02 ноября 2009

Я создал веб-сайт портфолио, который в настоящее время хорошо работает в Safari и Firefox, но имеет проблемы в IE 5, 6 и 7 (не 8). Ролловеры Portfolio / About / Contact (чистый CSS) и миниатюры (чистый CSS) в разделе портфолио не работают должным образом (за исключением страницы-заставки, где они в порядке). Эти ролловеры имеют «активные» состояния, чтобы вы знали, на какой странице вы находитесь и т. Д. Ролловеры - это одно изображение с активными сайтами внизу и неактивными сайтами вверху изображения.

Мой код для примера HTML-страницы выглядит следующим образом: 

<div id="header" > 
  <img src="images/headerTopPadding.gif" height="23" border="0" align="top">
  <ul id="evaNeesemannDesignMenu">
    <li id="evaNeesemannDesign" ><a href="../index.html"></a></li>
  </ul>
  <ul id="portfolioAboutContactMenu">
    <li id="portfolioActive"></li>
    <li id="about"><a href="about.html"></a></li>
    <li id="contact"><a href="contact.html"></a></li>
  </ul>
  <img src="images/headerTopPadding.gif" border="0" height="23" align="top"> 
  <ul id="thumbnailMenu">
    <li id="smsThumbActive"><a href="smsOne.html"></a></li>
    <li id="m2Thumb"><a href="m2.html"></a></li>
    <li id="calvinInviteThumb"><a href="calvinInvite.html"></a></li>
    <li id="calvinMerchThumb"><a href="calvinMerch.html"></a></li>
    <li id="vantaaThumb"><a href="vantaa.html"></a></li>
    <li id="nurminenThumb"><a href="nurminen.html"></a></li>
    <li id="corbThumb"><a href="corbOne.html"></a></li>
    <li id="bpgThumb"><a href="bpg.html"></a></li>
    <li id="nineElevenThumb"><a href="nineEleven.html"></a></li>
    <li id="tomsThumb"><a href="toms.html"></a></li>
    <li id="deloittePropThumb"><a href="deloitteProp.html"></a></li>
    <li id="deloitteInfoThumb"><a href="deloitteInfo.html"></a></li>
    <li id="turnThumb"><a href="turn.html"></a></li>
    <li id="oedThumb"><a href="oedOne.html"></a></li>
    <li id="networkThumb"><a href="network.html"></a></li>
  </ul>
</div>

И CSS для этого региона этого кода выглядит следующим образом: 

#header{
position:relative; 
height:120px; 
background-color:#FFFFFF; 
width:100%;
} 

/* Eva Neesemann Design Menu Rollover */

#evaNeesemannDesignMenu {
position: relative; 
margin: 0px auto; 
padding: 0px; 
width: 194px; 
height: 23px; 
background: url(images/evaNeesemannDesign.gif);
}

#evaNeesemannDesignMenu li {
width: 194px; 
height: 23px; 
position: absolute; 
top: 0px; 
background: url(images/evaNeesemannDesign.gif) 0 -23px no-repeat; 
display: block; 
list-style: none;
}

#evaNeesemannDesignMenu a {
width: 194px; 
height: 23px; 
display: block; 
border: none;
}

#evaNeesemannDesignMenu a:hover {
border: none;
}

#evaNeesemannDesignMenu #evaNeesemannDesign {
left: 0px;
}

#evaNeesemannDesignMenu #evaNeesemannDesign a:hover {
background: url(images/evaNeesemannDesign.gif) 0px 0px no-repeat;
}


/* Portfolio About Contact Menu Rollovers */

#portfolioAboutContactMenu {
position: relative; 
margin: 0px auto; 
padding: 0px; 
width: 194px; 
height: 18px; background:url(images/portfolioAboutContact.gif);
}

#portfolioAboutContactMenu li {
width: 194px; 
height: 18px; 
position: absolute; 
top: 0px; 
background: url(images/portfolioAboutContact.gif) 0 0 no-repeat;
display: block; 
list-style: none;
}

#portfolioAboutContactMenu a:hover {
border: none;
}

#portfolioAboutContactMenu #portfolio {
left: 0px;
}

#portfolioAboutContactMenu #portfolioActive {
left: 0px; 
background-position: 0px -18px;
}

#portfolioAboutContactMenu #about {
left: 75px; 
background-position: -75px 0;
}

#portfolioAboutContactMenu #aboutActive {
left: 75px; 
background-position: -75px -18px;
}

#portfolioAboutContactMenu #contact {
left: 127px; 
background-position: -127px 0;
}

#portfolioAboutContactMenu #contactActive {
left: 127px; 
background-position: -127px -18px;
}

#portfolioAboutContactMenu #portfolio a:hover {
background: url(images/portfolioAboutContact.gif) no-repeat 0px -18px;
}

#portfolioAboutContactMenu #about a:hover {
background: url(images/portfolioAboutContact.gif) no-repeat -75px -18px;
}

#portfolioAboutContactMenu #contact a:hover {
background: url(images/portfolioAboutContact.gif) no-repeat -127px -18px;
}

#portfolioAboutContactMenu #portfolio a {
width: 75px; 
height: 18px; 
display: block; 
border: none;
}

#portfolioAboutContactMenu #about a {
width: 52px; 
height: 18px; 
display: block; 
border: none;
}

#portfolioAboutContactMenu #contact a {
width: 67px; 
height: 18px; 
display: block; 
border: none;
}

/* Thumbnail Menu Rollovers */

#thumbnailMenu {
position: relative; 
margin: 0px auto; 
padding: 0px; 
width: 433px; 
height: 27px; 
background:url(images/thumbnails.jpg);
}

#thumbnailMenu li {
width: 433px; 
height: 27px; 
position: absolute; 
top: 0px; 
background: url(images/thumbnails.jpg) 0 0 no-repeat; 
display: block; 
list-style: none;
}

#thumbnailMenu a {
width: 29px; 
height: 27px; 
display: block; 
border: none;
}

#thumbnailMenu a:hover {
border: none;
}

#thumbnailMenu #smsThumb {
left: 0px;
}

#thumbnailMenu #smsThumbActive {
left: 0px; 
background-position: 0px -27px;
}

#thumbnailMenu #m2Thumb {
left: 28px; 
background-position: -28px 0;
}

#thumbnailMenu #m2ThumbActive {
left: 28px; 
background-position: -28px -27px;
}

#thumbnailMenu #calvinInviteThumb {
left: 57px; 
background-position: -57px 0;
}

#thumbnailMenu #calvinInviteThumbActive {
left: 57px; 
background-position: -57px -27px;
}

#thumbnailMenu #calvinMerchThumb {
left: 86px; 
background-position: -86px 0;
}

#thumbnailMenu #calvinMerchThumbActive {
left: 86px; 
background-position: -86px -27px;
}

#thumbnailMenu #vantaaThumb {
left: 115px; 
background-position: -115px 0;
}

#thumbnailMenu #vantaaThumbActive {
left: 115px; 
background-position: -115px -27px;
}

#thumbnailMenu #nurminenThumb {
left: 144px; 
background-position: -144px 0;
}

#thumbnailMenu #nurminenThumbActive {
left: 144px; 
background-position: -144px -27px;
}

#thumbnailMenu #corbThumb {
left: 173px; 
background-position: -173px 0;
}

#thumbnailMenu #corbThumbActive {
left: 173px; 
background-position: -173px -27px;
}

#thumbnailMenu #bpgThumb {
left: 202px; 
background-position: -202px 0;
}

#thumbnailMenu #bpgThumbActive {
left: 202px; 
background-position: -202px -27px;
}

#thumbnailMenu #nineElevenThumb {
left: 231px; 
background-position: -231px 0;
}

#thumbnailMenu #nineElevenThumbActive {
left: 231px; 
background-position: -231px -27px;
}

#thumbnailMenu #tomsThumb {
left: 260px; 
background-position: -260px 0;
}

#thumbnailMenu #tomsThumbActive {
left: 260px; 
background-position: -260px -27px;
}

#thumbnailMenu #deloittePropThumb {
left: 289px; 
background-position: -289px 0;
}

#thumbnailMenu #deloittePropThumbActive {   
left: 289px; 
background-position: -289px -27px;
}

#thumbnailMenu #deloitteInfoThumb {
left: 318px; 
background-position: -318px 0;
}

#thumbnailMenu #deloitteInfoThumbActive {
left: 318px; 
background-position: -318px -27px;
}

#thumbnailMenu #turnThumb {
left: 347px; 
background-position: -347px 0;
}

#thumbnailMenu #turnThumbActive {
left: 347px; 
background-position: -347px -27px;
}

#thumbnailMenu #oedThumb {
left: 376px; 
background-position: -376px 0;
}

#thumbnailMenu #oedThumbActive {
left: 376px; 
background-position: -376px -27px;
}

#thumbnailMenu #networkThumb {
left: 405px; 
background-position: -405px 0;
}

#thumbnailMenu #networkThumbActive {
left: 405px; 
background-position: -405px -27px;
}


#thumbnailMenu #smsThumb a:hover {
background: url(images/thumbnails.jpg) 0px -27px no-repeat;
}

#thumbnailMenu #m2Thumb a:hover {
background: url(images/thumbnails.jpg) -28px -27px no-repeat;
}

#thumbnailMenu #calvinInviteThumb a:hover {
background: url(images/thumbnails.jpg) -57px -27px no-repeat;
}

#thumbnailMenu #calvinMerchThumb a:hover {
background: url(images/thumbnails.jpg) -86px -27px no-repeat;
}

#thumbnailMenu #vantaaThumb a:hover {
background: url(images/thumbnails.jpg) -115px -27px no-repeat;
}

#thumbnailMenu #nurminenThumb a:hover {
background: url(images/thumbnails.jpg) -144px -27px no-repeat;
}

#thumbnailMenu #corbThumb a:hover {
background: url(images/thumbnails.jpg) -173px -27px no-repeat;
}

#thumbnailMenu #bpgThumb a:hover {
background: url(images/thumbnails.jpg) -202px -27px no-repeat;
}

#thumbnailMenu #nineElevenThumb a:hover {
background: url(images/thumbnails.jpg) -231px -27px no-repeat;
}

#thumbnailMenu #tomsThumb a:hover {
background: url(images/thumbnails.jpg) -260px -27px no-repeat;
}

#thumbnailMenu #deloittePropThumb a:hover {
background: url(images/thumbnails.jpg) -289px -27px no-repeat;
}

#thumbnailMenu #deloitteInfoThumb a:hover {
background: url(images/thumbnails.jpg) -318px -27px no-repeat;
}

#thumbnailMenu #turnThumb a:hover {
background: url(images/thumbnails.jpg) -347px -27px no-repeat;
}

#thumbnailMenu #oedThumb a:hover {
background: url(images/thumbnails.jpg) -376px -27px no-repeat;
}

#thumbnailMenu #networkThumb a:hover {
background: url(images/thumbnails.jpg) -405px -27px no-repeat;
}

Вы можете просмотреть фактический сайт на http://www.evaneesemanndesign.com

В настоящее время я пытался использовать z-index, а также помещать различные изображения в фоновый режим во время ролловера ... ни один из этих параметров не работает. Я знаю, что у IE есть проблемы с ролловерами, но я не уверен, какое решение следовать ... тем более, что оно работает в определенных разделах веб-сайта.

Любая помощь будет высоко ценится.

Спасибо.

Madison

Ответы [ 2 ]

1 голос
/ 02 ноября 2009

Я пытался в режиме совместимости IE (который должен хорошо соответствовать по крайней мере IE7), попробуйте заменить #thumbnailMenu li и #portfolioAboutContactMenu li на следующее: 

#thumbnailMenu li {
    /* Difference being that the width and display properties were removed */
    position: absolute;
    list-style: none;
    background: url(images/thumbnails.jpg) no-repeat 0 0;
    height: 27px;
    top: 0;
}

#portfolioAboutContactMenu li {
    /* Difference being that the width and display properties were removed */
    width: 194px; 
    height: 18px; 
    top: 0px; 
    background: url(images/portfolioAboutContact.gif) 0 0 no-repeat;
    list-style: none;
}

По крайней мере, так работает (поскольку у меня нет «реальной» среды IE6 / 7 для ее тестирования). Дайте мне знать, каков результат. Я почти уверен, что вы зацепились за старую ошибку Internet Explorer:)

0 голосов
/ 02 ноября 2009

просто удалите свойство text-align из тегов html, body и #pagewidth: 

html, body{ 
 margin:0; 
 padding:0; 
}

#pagewidth{ 
 width:800px; 
margin-left:auto; 
 margin-right:auto; 
}

Или добавьте «text-align: left;» на теги #portfolioAboutContactMenu, # thumbnailMenu.

Тем не менее, для лучшего позиционирования в поисковых системах, я предлагаю вам использовать некоторые решения для замены текста, потому что сканеры сканируют источник веб-страницы, а у вас мало текстового контента; это также улучшает доступность вашей веб-страницы. Более того, я предлагаю добавить атрибут «alt» к тегам «img»!

...