ماوس اور روی li ها و به هم ریختگی

[bftarane]

سلام.
لطفاً این لینک رو در مرورگر ie تست کنید. ببینید با ماوس اور روی منوها چه منویی که در فوتر هست و چه اون منوی عمودی شما هم مشکلی می بینید؟
http://generalsite.ir/defaultt.aspx
من با IE 8 دارم تست می کنم.
برای منوی فوتر دو تا عکس یکی سبز کم رنگ و یکی پر رنگ استفاده کردم ولی با Ie ماوس اور که می کنم گهگاه یه بالت سیاه رنگ کنار اون سبزها دیده میشه و خیلی سریع محو میشه.
لطفاً شما هم یه تستی کنید ببینید مشکلی داره؟
منتظر راهنماییتون هستم.
اینم کدهایی که استفاده کردم

<div id="footermenu">
<ul id="footermenu1">
<li><a href="#">عضویت در سایت</a></li>
<li><a href="#">ورود به سایت</a></li>
<li><a href="#">درباره ما</a></li>
</ul>
<ul id="footermenu2">
<li><a href="#">تماس با ما</a></li>
<li><a href="#">راهنمای سایت</a></li>

</ul>
</div>
#footermenu1
{
direction:rtl; font-weight:bold; padding-top:5px;padding-left:15px;float:right;
}
#footermenu1 li
{
list-style-image:url("D-I-Saite-02.png");
margin-right:25px;
padding-top:10px;

list-style-position:inside;
}
#footermenu1 li:hover
{
list-style-image:url("greenbullet.png");

}
#footermenu1 a
{
text-decoration:none;
color:#666;
vertical-align:top;
}
#footermenu1 a:hover
{
color:#333;
}

#footermenu2
{
direction:rtl; font-weight:bold; padding-top:5px;padding-left:15px;float:right;
}
#footermenu2 li
{
list-style-image:url("D-I-Saite-02.png");
margin-right:25px;
padding-top:10px;
padding-right:10px;

list-style-position:inside;
}
#footermenu2 li:hover
{
list-style-image:url("greenbullet.png");
}
#footermenu2 a
{
text-decoration:none;
color:#666;
vertical-align:top;
}
#footermenu2 a:hover
{color:#333;
}

برای منوی عمودی هم یه همچین حالتی تکرار میشه.

[qartalonline]

این کار زمانی اتفاق می افته که سایت برای اول بار توسط مرورگر بارگذاری بشه، این اتفاق به خاطر زمان لازم برای لود شدن تصویر هستش.

راه حل :
بهتره دو تصویر D-I-Saite-02.png و greenbullet.png رو در یک تصویر قرار بدید (Image Sprites).
مثال:http://www.w3schools.com/css/css_image_sprites.asp

[esmajidmn]

مشکل شما همانطور که دوست عزیز آقای qartalonline گفتند هست بهتره ازیک تصویر به جای دو تصویر استفاده کنید

[bftarane]

آیا می تونم با دستوری مثل زیر فقط یه ایمیج استفاده کنم و موقع ماوس اور فقط شفافیت عکس بیشتر بشه؟

opacity:0.4;
filter:alpha(opacity=100); /* For IE8 and earlier */

یه سوال دیگه برام پیش اومده بود که چون مرتبط به این مبحث میشه همینجا می پرسم

مثلاً یه ایمیج داریم برای هدر با طول 1000 و عرض 200
این طور که من تا حالا متوجه شده بودم اگه ما این عکس رو به سه قسمت اسلایس کنیم و جوری کنار هم بزاریم که همون عکس اولیه رو مثل پازل تشکیل بدن
سرعت لود بالاتر می ره و بهتره این کار رو کنیم.

می خواستم بدونم آیا این درسته؟

[qartalonline]

آیا می تونم با دستوری مثل زیر فقط یه ایمیج استفاده کنم و موقع ماوس اور فقط شفافیت عکس بیشتر بشه؟

opacity:0.4;
filter:alpha(opacity=100); /* For IE8 and earlier */


بله میشه استفاده نمود.


یه سوال دیگه برام پیش اومده بود که چون مرتبط به این مبحث میشه همینجا می پرسم

مثلاً یه ایمیج داریم برای هدر با طول 1000 و عرض 200
این طور که من تا حالا متوجه شده بودم اگه ما این عکس رو به سه قسمت اسلایس کنیم و جوری کنار هم بزاریم که همون عکس اولیه رو مثل پازل تشکیل بدن
سرعت لود بالاتر می ره و بهتره این کار رو کنیم.

می خواستم بدونم آیا این درسته؟

خیر، این کار باعث افزایش تعداد درخواست به سمت سرور میشه که در نتیجه باعث افزایش فشار بر سرور و کاهش سرعت میشه.

[bftarane]

بله میشه استفاده نمود.به چه صورت؟ از چه سلکتوری استفاده کنم؟ چون من فقط می خوام شفافیت بالت کاهش پیدا کنه نه کل li

[qartalonline]

میتونید استایلتون رو بصورت زیر داشته باشید:
ul{
list-style:none;
}
ul li:before{
background:url(greenbullet.png);
display:inline-block;
width:9px;
height:9px;
content:"";
margin-left:5px;
}
ul li:hover:before{
opacity:0.5;
}